I get people writing into me saying "I love the layout/design/speed of your blog. How is it built?" It's an evolving process, but I wanted to share the core technology.
Content, Layout, Editing: Ghost
I am a big fan of Ghost, as I laid out in my article comparing Ghost with Medium.
I originally started writing on Blogger and Medium, but when Ghost became big enough for me to feel confident about it, I moved all my content over, and never looked back.
The main reasons I love Ghost are
- I really like the values of the founder, John Nolan, and the company. In their original mission statement, John asked the question: "If you eliminated all the promises of wealth from the roadmap up front, and tried to build a good company, how would that affect the product, business, customers, and every little decision in between?"
- Ghost is open source, and cheap to use and host. WordPress is like this too, and you can host it for as little as a few dollars a month. But not many other platforms are: Squarespace is $10+ a month, as is Wix, and
- Ghost is fast. There's a lot that goes into making a site fast, but at its core, Ghost serves up pages really quickly.
- The document-writing interface is a pure joy to use. The only other online document writer that I like at all is the one on Medium. Ghost's is equally as pleasant to write on.
A year after signing up for Ghost, I have no regrets. Writing posts is joy, much more so than in WordPress, even with their latest Gutenberg updates (which, as of 5.2, I still don't like, even though I'm clearly not a luddite — Koenig vs Gutenberg is the subject of an article to come).
Sign up for a trial with Ghost and check it out.
(I get a small commission if you do, but I've recommended Ghost for years before they offered commissions.)
Hosting: DigitalOcean, for really fast and cheap servers
You need a web host to store your web server. When people (like you, friendly visitor!) visit hooshmand.net, they are requesting pages from a server. (Unless you opt for the simpler route of letting Ghost do it all for you!)
DigitalOcean is basically a "server in the sky". A Linux machine somewhere out there in the cloud. It's the equivalent of a small computer with incredibly fast internet that you rent for $5 a month.
For anyone (like me) who is comfortable editing config files, having your own server for a website is a huge advantage compared to shared hosting.
Having my own server vs shared hosting means
- I can run multiple websites on one server if I want, slashing my hosting costs
- I can run web applications on my server too
- I can host code, static images and files, without any fuss (just upload and go)
- It's easy to manage on the road from a number of devices (I use Termius to access it remotely from my phones or computers)
- I can back up my whole server with daily snapshots
I started using DigitalOcean in 2016 when there were few alternatives. These days there's also Linode, or Cloudinary which sits in between. They're all very similar, but I can still recommend DigitalOcean and safely say I'm not using it anywhere near its limits.
I also use DigitalOcean to host Discover Discomfort on WordPress.
Image Compression: ImageOptim (Mac; PC alternative)
I'll put together a whole post on SEO optimization of images in a Ghost blog. But the most important part is this: Make sure the images are tiny.
Take the photos of elephants above, for example (which I took on Safari in the Maasai Mara). Here are the file sizes:
- Original raw image size: 21MB (5111 px width) (which of course I'd never publish on the blog)
- Lightroom JPG with standard settings, full resolution: 8.1MB
- JPG resized to 1500px, using Mac Preview: 707KB
- Resized JPG after ImageOptim (72%, stripping metadata): 136KB
Really the biggest difference is the one after reduction. That's where I was shocked to see just how small a JPG could get.
Another example: the cover image for this post was 626KB straight out of Adobe Spark. But the reduced file is only 79KB. That's an 87% reduction — typical, too.
The difference to page-loading time can be massive. Images are often the biggest files in a page.
My standard process for reducing an image is:
- Resize, max width 2000, often less.
- Convert to JPG or PNG, depending on the contents.
- Rename to a keyword-dense filename.
- Shrink with ImageOptim
alttags and caption (also important for SEO).
Every one of these steps is important. But the only one using another important tool is compression.
Online, there's a tool called TinyPNG, which you can use on a Windows computer. Despite its name, it also works with JPG files. I've tested both and TinyPNG is a bit less effective (e.g. the above image compressed to 270KB rather than 136KB). I also prefer the drag-and-drop nature of compressing files with ImageOptim.
Share images: Adobe Spark
When people share images on Facebook, in Whatsapp, or whever else, a "share image" comes up. I find it's useful to show not just what the post is about, but also to describe it. It makes it more likely a person will click into the image.
For this, I use Adobe Spark. It makes it trivially easy to find an image and to place designed text on top of it. It literally takes me under a minute each time.
I also like to use a different share image to the cover image.
Ghost Theme Customisation
I've customised the basic Casper theme for Ghost. After you've customized the first five things, it's important to customize a few other things, like
- Your front page: I added in amore prominent subscriber box, and an "About" section so people would know why they're at my front page
- Tweaks to post layout: I got rid of the overlap with the first paragraph and the header image, for one thing
- Other pages: Making custom "about pages" for example.
In all of these, you need to learn a little about the "Handlebars" scripting language. It's not hard, and it's akin to writing Macros in VBA on an old version of Excel.