Experimenting with Hugo, Netlify and JAMstack

I’ve started a new, experimental, blog on the open source ‘static site generator’ Hugo. It’s being deployed by Netlify, via GitHub.

This was inspired by my recent column about static site generators (SSG) on The New Stack, where I’m a senior editor and weekly columnist. Specifically, I wrote about Gatsby and the fast-growing web development trend known as JAMstack. Read my column for the details, but the upshot: this is a new, cloud native, way of publishing a website. The main point of difference is that you don’t publish posts from a web server, but deploy them as pre-rendered static HTML files over CDNs. This makes your website much faster and more scalable (e.g. if you get ‘Slashdotted’, to use an older web term). There are also some cool API and data connectivity angles to this type of site, which I’ll be experimenting with too.

Quick note about the domain name for this blog: GenerateStatic.com. I chose it on a whim and bought it via Netlify as part of its set-up process (very nicely integrated). After searching variations on domains that included the words ‘web’, ‘cloud’ and so on, I eventually thought about using ‘static site generator’ as inspiration for the name. I ended up with ‘Generate Static’, which was available as a dot com. I’m not sure what it means to generate static, but I do like the etymology:

Generate = Produce or create; Static = science of weighing

I like to write on the web, obviously, and my style of writing is centered on ‘weighing’ a topic carefully. So the domain seems to fit.

Back to SSGs: I did test Gatsby while writing my column, but after doing some further research I decided that Hugo was a better fit for me going forward. It’s marketed as the fastest SSG, mainly due to being developed in the cloud native programming language Go. I’ve been wanting to learn Go too, so I thought Hugo would be suitable for that reason.

Also Hugo seemed to have a good partnership with Netlify, another cloud native company I was curious about. Netlify coined the term JAMstack and I wanted to test out its deploy / host service.

So over the weekend, I got started installing Hugo and everything else I needed to start this new site. Two blog posts helped me out a lot: shout out to Jeremy Morgan and Flavio Copes, because I wouldn’t have been able to set this up without their posts guiding me.

Even with that help, there was a decent learning curve getting started with Hugo and Netlify.

One, I had to get used to the command line again. I use a Mac and it had been a long time since I last fired up Terminal. I used to use it back in the day, when I experimented with web development early in my web career. But the command line as an interface never came naturally to me, so it’s going to take a while to get used to it once more.

I have also not been a big user of GitHub up till now, despite having set up a GitHub account years ago. During this process of setting up Hugo, I eventually discovered that GitHub Desktop makes things easier than trying to do ‘commits’ etc via the command line. Even so, I’ve had to up-skill quickly in Git and GitHub.

I’m writing this post in Markdown in the Bear app, which I discovered this year and has recently become my go-to app for writing posts (also for making Evernote-style notes). But I have also downloaded the more powerful text editor, Emacs, which I soon discovered was necessary to edit certain files (I had a troublesome footer file in the theme I’m using, that I couldn’t edit properly in Bear or in the vanilla TextEdit app).

The setup process for Hugo and all the tools I’ve mentioned wasn’t without its challenges, but it was more about getting used to the command line again and figuring out exactly how Hugo works. Hint: it’s much different from a traditional web CMS like Wordpress. I’ll get into the nuts and bolts in future posts here. As for now, I have a pretty basic site - but it’s functional enough and runs well.

Finally, it’s worth noting that Netlify takes some getting used to as well. It turns out there were some non-obvious tweaks I had to make in the deploy settings to get my chosen theme to work.

But after I got it all set up, the posting process is fairly straight forward: I write the post in Bear, export it as a markdown file, open up Emacs to make a few tweaks and final edits, type ‘hugo server’ in the command line to check what it looks like on my local machine (which reminds me a lot of using Radio Userland in the early 2000s), type ‘hugo’ to render the files into HTML, send the updated files to GitHub, and finally Netlify automatically deploys the site via GitHub. Ok so it’s not as simple as hitting the ‘Publish’ button in Wordpress, but you get blazing fast speed and scalability on the end site.

I’ll be using this blog to experiment more with Hugo, Netlify and other JAMstack tech - and will make notes here.