Since the inception of this blog, it has run on a small host from Scaleway, on Docker, using the Ghost platform, and Traefik as a load balancer. You can read about it here: https://blog.devinsmith.co.za/scalable-site-in-2020/
This has been an effective solution up until now, but for 2021, I wanted to figure out how to run this site totally statically, removing the need for a virtual machine instance, and allowing me to (effectively) run the blog cost free. Here’s a quick one on how I achieved that.
Static Site Generator
In order to begin this process, I had to find a static site generator to use, in order to process markdown and create my site from the content I have written. I decided to go with the popular Hugo static site generator (https://gohugo.io/). It appeared easy enough to get going, with minimal overhead, with lots of features under the hood I can leverage later on once I have learned more about it.
Exporting Content from Ghost
One of the first steps I needed to handle, was getting my blog content out of Ghost, and being able to import it into Hugo to generate the site, I found a great package to be able to do this, so the process was pretty simple:
- Export the content from Ghost as JSON using their export feature (https://ghost.org/help/the-importer/)
- Using ghost-to-md, convert the JSON export from Ghost into multiple markdown files with your content (https://www.npmjs.com/package/ghost-to-md)
- Now we have a collection of markdown files, there were some changes and modification we needed to make to make them compatible with Hugo:
- The date_modified field needed to be changed to just “date” to work (this might be a theme field and not a Hugo/MD one, more on that later)
- The tags field needed to be reformatted properly into a list
- One or two other fields needed slight modifications to be compatible, the Hugo server gives really good debug info if it can’t process md files and this was exceptionally useful here.
Once we have everything exported, and Hugo up and running with the MD files, we now have all the content out of ghost and being compiled by Hugo.
Theming
For my Ghost platform, I used a great free Ghost theme called Attila (https://github.com/zutrinken/attila) When moving this to static hosting, I wanted to try and keep the blog looking as similar as possible (for the moment) with the idea to move to a new theme down the line to update and refresh the site.
Thankfully, I found someone who had ported the Atilla theme to Hugo, (https://github.com/vseventer/hugo-theme-attila) the theme is a bit out of date, but appears to work fairly well, and fitted my use case pretty perfectly until I can find an alternative Hugo theme to work to.
This meant travelling to the new static blog, was much less of a jarring experience, and felt like you were still travelling to the old version. There were a couple of fields for each post that were specific to the theme, like setting the header image and modified time etc, but once these were set correctly, everything worked nicely.
There was one or two more items I had to deal with to get the same feel as the Ghost site, including adding some pages to the Hugo menu, and setting the site’s icons and favicons. This was pretty easy and following the Hugo documentation for these was pretty painless.
Images
As I use primarily images from Unsplash, and my posts have cover images, I needed to get the header and other images across from the old platform. This required going to the old site, saving the images and correctly setting them in the markdown files to point to the right place.
This was a manual process, but didn’t take that long, and mimicked the old platform pretty quickly. There are one or two issues with the image being a different size in the header, but mostly due to the theme version I imagine, and not a fault of hugo itself.
Codebase
Now that the entire site is static, I pushed everything to a private Github repo, to ensure that the content and everything else needed to get the site up and running is always available there.
Should I need to redeploy the site to a new location in future, it should be as easy as compiling the site and pushing the files to the correct destination. No more worrying about backing up the database behind the scenes!
Deployment & Hosting
Having used Netlify (https://www.netlify.com/) before for some sites, I decided to use them again for this blog. As always with Netlify, it was a super simple process:
- Link the github repo
- Populate a custom Netlify.toml for the correct commands and configuration to compile with Hugo (there is a great tutorial on how to do this on Hugo’s site here: https://gohugo.io/hosting-and-deployment/hosting-on-netlify/)
- Select the plan for the website
- Deploy automatically from the Github repo’s main branch.
This process with Netlify is amazing, it allows one to deploy the site from the main branch, as well as have separate test versions of the site for any Pull Requests that I open on the site’s repo.
This makes it super easy to test a change or a new post (like this one) and ensure everything is displaying correctly before releasing it to the main version! And unbelievably this plan is totally free, and uses their CDN to distribute the content. No setting up pipelines, no dealing with deployment mechanisms, all handled for me!
All in all, a really simple, process, with lots of power and ease of use, all for free, highly recommend!
Conclusion
Once I had all of this sorted out, and the site hosted with Netlify, it was simply a case of changing the DNS record pointing to the site to point to Netlify, and I was in business.
I really like the new method of running everything, the code for the site is safe, it is served from a CDN and provides really easy way to check my changes and add new posts. There are one or two changes I would like to make, in terms of refreshing the site and updating to a different theme, but that will come in due course.
As always, I use unsplash for my images, and this one is from Christopher Gower (https://unsplash.com/@cgower), credits to him.
Have you noticed any bugs with the new static version of the site? If you have, let me know, hit the contact button in the menu on the right to find my email, I’ll be sure to check it out!
Thanks for reading!