Adam Ayrton Stoner

How I made this website

This post is also a podcast episode!

Subscribe to my podcast in the same place you enjoy other podcasts. Just search for my name, Adam Ayrton Stoner, in your podcast app of choice or use the button below 👇

I am aware of the irony in writing about how my website is made on my website but I’ve had another spate of people getting in touch asking exactly that. The amount of emails I get about it are so numerous (about two to three per week now) that I though it best to just write a public post about it.

This website is built using a Content Management System (CMS) called Ghost. Examples of other CMS include Wordpress and Squarespace.

I’ve been using Ghost since 2016 and chose it over these other options due to how lightweight and simple its admin interface is as well as the coding language it’s written in. I find Wordpress, which I still use elsewhere on a daily basis, is bloated, written in an old coding language and actively depends on third-party plugins to be functionally useful.

Like Wordpress, Ghost is open source meaning you can host it yourself it on platforms like DigitalOcean, AWS, and Heroku from as little as $5 USD per month. The majority of other options, including Squarespace, are proprietary; you rely on them to host your website and, as you'll discover if you try to move away from the service, have next to no control over your data.

I host my instance of Ghost on Ghost(Pro), the service provided by the very people that make Ghost, for $29 USD/mo, paid annually. Sure, I have the technical know-how to make Ghost work on platforms like DigitalOcean but I'm lazy and the option to reach out to their incredibly responsive support staff is worth every cent.

Ghost does everything I need it to including handling memberships, paywalling content, sending email newsletters, and dealing with the schematics around signing-up and logging in. My only gripe with Ghost as a CMS is the lack of a decent mobile editor. The admin interface just doesn't work well on smaller screens.

Ghost uses Handlebars for theme design. It looks like regular HTML with special lines that pull data from the CMS. A good knowledge of HTML and CSS is mandatory for theme design but you can pick up Handlebars very easily by reading Ghost's comprehensive theme documentation.

If you're using Ghost(Pro), knowledge of these basic things is really all that's required to build a stellar, custom website like mine. Otherwise, you'll need to know what a command line interface is and how to use it.

Ghost provides a default theme free-of-charge so that you can get started straight away and even lets you download the theme to tweak yourself. There are also countless marketplaces for Ghost themes and any freelance developer worth their salt should be able to build a custom theme for Ghost without any difficulty. If you're after a custom Ghost theme, get in touch with me and I might be able to help you out.

The theme I use on adamstoner.com is custom made by myself. It's incredibly minimal and modular, allowing me to change anything I want quickly without having to open a bunch of files.

When it comes to design, Ghost has a lovely 'set it and forget it' approach. Content is king in the admin interface and you needn't worry about a bunch of annoying and often unnecessary fields getting in the way of publishing it. I often find publishing things on other CMS' feels like a form filling exercise rather than a creative one.

That covers the basics. Of course, there are optional extras, all of which stem from your personal ethos and design preferences rather than necessity.

This website contains CSS to make the user experience as comfortable as possible, catering for those that use both light and dark mode user interfaces on their devices. It also uses one or two simple colours in very clear ways in order to attract attention and prompt action.

Remember, the internet is still slow and expensive for the majority of people in the world. Every byte counts. Nothing is faster than the lack of something which is why there are no webfonts, no icons, no advertisements and certainly no social media tracking beacons on this website. It's also as privacy-friendly as I could possibly make it thanks to analytics options like Fathom and the fact I self-host my email newsletter.

The intention behind all of these choices is to ensure that adamstoner.com loads as fast as possible on almost every device around the world. And it works – this very page weighs a meagre 15kb and loads in less than 1/5th of a second – which is probably why so many people ask how it's made. Now you know!

Unlock access to exclusive posts

Become a member to unlock access to exclusive posts and sign up to my monthly newsletter.