There is love for static websites

Aug 9, 2020

I must admit static websites are cool :)

I had heard they were a thing in the last few years but just discovered this year (2020) how nice it is to use.

What is a Static site?

You generate or compile static files like HTML, CSS, Javascript, Images, etc. up-front and then deploy to any old web server or even a CDN (nice!).

Static site generator?

How do you generate those static files? With a static site generator of course! Here are a few popular ones…

Hugo
Gatsby
Next.js
Jekyll

Why Static sites?

They are fast. You can put on a CDN! And this allows you to scale up without any hassle.
More secure (no server side code).
Easier to maintain (again, no server side code to patch/update).
Lower cost to operate. No database, no PHP or C# or any special progarm needed other than a web server.
And you can version control every part of it, unlike a database driven CMS.

Some other reasons to like static sites

You can setup your CI/CD pipeline to auto-build your static site (e.g. from your GitHub repo) and deploy to a cloud server (like a CDN) every time you Git push commits to your repo.
Decouple content management from the website. Meaning use a Content Engine like Contenful (or similar service) to power and hold your content. Then your static site can query the Content Engine during build time to pull down all the content.
Using tools like Visual Studio Code and Markdown you can create a site very quickly (I’ve had to do this a few times)

Markdown, it’s worth mentioning

Markdown is not specific to static sites and has been around for a while. But I’ve found it is a joy to write content with. Takes away the burden of having to format HTML.

Which static site generator do I like (so far)?

In particular, after trying out Gatsby and Hugo I have to say Hugo is FAST! Like really fast… can build site files in under one second! Gastby was taking around 30-40 seconds on my machine for a small site.

And the overall Hugo is simplier to work with and requires less configuration. I found Gatsby had a steeper learning curve to get working.

Which Hugo themes do I like?

Docsy - I’ve built multiple sites with this theme and it’s amazing. It has beautiful layouts for landing pages and also has a documentation system… in case you need to put down a bunch of organized content. Another really nice feature is the use of image manipulation so I didn’t need to re-size background images, just drop a PNG file within a page bundle and let Hugo do the rest.
Academic - This is another nice one, very simple, minimal and I’m still getting used to it :)

Setting up Hugo

You can find the official Hugo quickstart guide here, however below are the steps I used to get started.

I’m running Ubuntu Linux on WSL on Windows 10

brew

Not found, so used the recommended package

sudo apt install linuxbrew-wrapper

Ok, now that brew is isntalled, install Hugo

brew install hugo

Check the installed version Hugo

hugo version

You should get something like this

Hugo Static Site Generator v0.73.0-428907CC/extended linux/amd64 BuildDate: 2020-06-23T16:40:09Z