This is the second article detailing my exploits to build a free blog. The first attempt, failures and learning can be found in Part 1.
In case you din’t read the first article, I am trying to create a blog to solve the following problems:
- Host a blog cheaply as possible - ideally for free.
- Simplicity is king - particularly when it comes to authoring and publishing.
- Realised after first attempt: Solution needs to work cross platform - as I use both Windows and OSX.
The approach
Research
After discovering the shortcomings outlined in Part 1 I did more research. Eventually I stumbled across GitHub Pages and Hugo combined with Netlify. To be honest I think either would work for me but Netlify’s comparison along with my own researched made me want to try it. One day I might re-create this blog from GitHub and do a comparison.
Hugo
I used Hugo to create the static site and it seemed familiar to Wyam.
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
I became familiar with Hugo using the excellent quick start. This worked well but I wanted to change my theme. I chose my theme Hyde from the list of blog themes on the. To swap themes I tweaked the instructions from the quick start step three to:
cd quickstart;\
git init;\
git submodule add https://github.com/spf13/hyde themes/hyde;\
echo 'theme = "hyde"' >> config.toml
Markdown and Visual Studio Code
Hugo supports authoring blogs in Markdown.
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).
Visual Studio Code (VS Code) is fantastic, if you haven’t heard about it.
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity)
For the blog I use VS Code when authoring articles, specifically the Markdown Preview functionality. The The Markdown:Open preview to side from the Command Palette works exactly how you I want it to.
GitHub
At this point I have a fully functioning blog that I can run locally that is stored safely in a public GitHub repository.
Netlify
Netlify’s marketing site is great, and they nailed their mission statement and marketing materials:
Netlify is a unified platform that automates your code to create high-performant, easily maintainable sites and web apps.
Write frontend code. Push it. We handle the rest.
All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more…
I loosely followed the Hugo’s documentation to setup hosting on Netlify. This walked me through creating the free account, connecting Netlify to my GIT repository, and configuring Netlify to build with a specific version of Hugo. I chose the latest release of Hugo.