In part one I went over a few nagging issues with Ghost. Now lets look at the benefits of using a static site generator like Hugo vs Ghost or Wordpress. For the most part this applies to any static site generator, I chose Hugo because because how easy, fast and fun it is.
What does a static site generator like Hugo actually do?
A traditional CMS like Ghost or Wordpress stores all of your content inside a database and requires a server-side language like PHP or Node. Each time a someone visits a page the CMS will grab that data from the database and use it to render the page.
A static website generator like Hugo, Jekyll or Eleventy will take all of the information you define, like HTML templates, logic and your content written in markdown files and use that as a blueprint to generate each and every page as a completely static HTML file. This has a number of benefits:
- No server-side language required
- No database needed
- Inherently more secure (there’s nothing to “hack”)
- Host it anywhere and often for free
- It’s a considerably more lightweight process
- The deployment process can be all be done from your code editor
Hosting for static websites is free
In part one I mentioned hosting Ghost is either expensive or complicated. Using a static site generator makes hosting both free and simple. At the end of the day it’s just HTML, the technical overhead is very low so there are a number of ways to host your site for free with no catch.
One option is Render, they’re the new kids on the block, the other is Netlify, who are very well known and loved by all. I’m sure other options exist, but I didn’t look much further. In the end I chose Netlify, mainly because of their form processing features which I intend to use later.
It’s also worth noting Netlify comes with an SSL cert that happens automatically once you connect a custom domain, which is a fairly straight forward process. There are a lot of things I wasn’t expecting from a free product, like setting up redirects, but again Netlify makes this easy without having to worry about a single thing on the server side.
I wasn’t purely motivated by free hosting, at the end of the day I was only saving about $20 per month, it was more about the how simple and streamlined the entire process could be…
Hugo + Git + Netlify is a beautiful thing
The most enjoyable aspect of transitioning from Ghost to Hugo is the simplification of writing content, making changes to the website itself and getting those changes live. Everything is done from within VS Code.
The trick here is the integration between Netlify and Git. When creating your Netlify account you connect it to a Git repository, Netlify will recognise it as a Hugo website and will automatically build (create everything as static HTML files) and deploy the website for you. This happens automatically every time you push a change to your master branch.
Essentially the blueprint for the website; templates, any logic, images, CSS, JS and markdown files for posts live locally and on Git, which takes care of the backups. When I write new content or make design changes, I commit and push to git from VS Code, Netlify automatically picks up the changes, looks at the blueprint and builds everything out as HTML files and the changes are live within seconds. This is the most streamlined process I’ve ever used for maintaining a website.
Local and production content are always in sync
A real bonus of the Git and Netlify workflow is your content stays in sync across your local environment and production. A typical CMS like Wordpress or Ghost stores all of your written content in a database. Once the initial development of a site is done most new content gets written inside the CMS and stored on the production server database. Over time your local environment will be missing the vast majority of the content that is in production.
If anyone has ever tried to keep a CMS database in sync across multiple environments you’ll understand the special kind of hell it creates. If you use Wordpress and find yourself in that situation check out WP Migrate DB Pro - it’s the best solution you’ll come across. If you use another CMS, sorry I can’t help ya.
Writing all of my content inside VS Code and pushing it to Git solves this problem at its root. Writing content inside my development environment first, rather than in production ensures everything stays in perfect sync.
If I’m ever without my laptop and need to update or write new content I can always edit markdown files directly in Git.
Saying goodbye to a GUI blog admin
When building sites in the past I often had to consider whether I should handle something in code or provide a UI for it in the blog admin area using custom fields. It would nearly always result in a mixture of both because I couldn’t achieve exactly what I wanted with custom fields alone.
A static site generator typically doesn’t have a GUI so that dilemma disappears. Everything stays in code. Of course there are options to inject a GUI content manager between Netlify and Git, for example Forestry or Netlify’s own CMS. Try to avoid adding a GUI if you can, if you’re coming from Ghost or Wordpress the whole experience may feel very bare-bones or naked, but that’s the beauty of it. I find writing directly in my text editor to be the most productive writing environment I’ve ever worked in.
Building a website is fun again
Ultimately building another site in a traditional CMS like Ghost Wordpress felt like such a chore. I just wanted something super lightweight and streamlined as possible so I could whip up a quick template and get straight to writing. Hugo made this process fun, check out the directory structure below, that’s all there is to this whole site. No database, no plugins, no servers. It felt like making a website back in the early 2000’s, open up a text and away you go.