Bye-bye old CMS, hello Static Website

Exactly 9 months ago, I wrote an article about my new blog (this one) and the story which CMS I’ve picked and why.

Back then, I’ve written a few blog posts and was happy with my decision. But there is a problem with all those fancy content management systems out there: Housekeeping.

The Problem of Housekeeping

As all software stacks, you always need to keep your software up to date, especially when it is accessible over the internet. Sure, you could automate all those updates with CLI tools, but there is a chance that something could break and you have to invest more time than you’ve planned to fix it again. When automating things it could be even worse: Assuming you have excellent monitoring, you get a notice that your site is down in your holidays without access to a computer… yikes!

Don’t get me wrong: Grav, my favorite flat-file CMS, is still awesome and works like a charm. It could still power this website and did, until a few days ago, with no problems. I wanted to minimize the need for maintaining everything. I don’t enjoy housekeeping that much and my time is limited. That’s where a static website kicks in.

A Static Website to the Rescue?

What a Static Website is…

You can think of a static website as a book: Like a book, a static website shows the content of its last publishing date. If you want to update the site, upload new files. In terms of a book, you would print a new book.

The absolute advantage of a static website is: Besides a web server that delivers your content and a visitor’s browser, there is almost no software involved that could break anything. There are simple HTML pages, images, CSS and Javascript files on your webspace or server. You don’t need a database, PHP server or other fancy stuff and no live content management system.

It is like in the good old days when you wrote your website in HTML yourself. So there is no housekeeping of your site anymore. Your website could be online for 10 or more years without the need of updating your CMS software for security reasons.

You don’t write every HTML page by yourself, there are static site generators out there, I will come to that later.

… and what not

Well, it may be not that simple. Typically websites use interactive elements. A website with a restricted login area or even tools that have to save the users’ content, still have to be a normal website with server-side scripts and/or databases.

But every website with the purpose of delivering content written by a hand full of authors could be suitable to be generated as a static website.

User Interaction

You may ask: How can I interact with my readers on a static website!?

That is easier than you may think. Many problems are solvable by outsourcing them. And to be honest: Most sites use the outsourced services already, even if they aren’t static websites!

You want to…

• use comments on your blog? You can use Disqus.
• track your page visits? You can use Google Analytics or Matomo.
• offer a search? You can use the Google Search or tools like Lunr

Where to Start

Now we want to get rid of the housekeeping and create a static website, but how?
Let’s see what I wrote in my first blog post about Hugo and Jekyll:

You almost can’t use simpler software than this. The static site generators are extremely fast, but lack of support of fancy user interfaces. I am a developer but still don’t want to write all my stuff in a shell or text editor. Maybe good for a static site, but it didn’t feel right for a blog.

Aha! “Good for a static site” - Bingo. That’s today’s topic.
But “lack of support of fancy user interfaces”? This may be true, static site generators like Hugo are command-line tools and you write your posts in Markdown, but I had to learn that there are great community projects available that offer a complete user interfaces on top of Hugo.

I don’t use them, for now, I write my content in Visual Studio Code with some Markdown plugins or in Ghostwriter, but especially beginners should have a look at Hokus CMS.

Writing the Pages in Markdown

From now on, you will write your pages and posts in Markdown. If you don’t know what Markdown is, think of it as a plain text file with some symbols to mark a line as a headline, code block, etc. Far easier than writing HTML. Have a look at this guide for more details.

As mentioned before, you don’t have to write all the pages in HTML by yourself. The static site generator, like Hugo, will read the templates and apply them on your Markdown files to generate all required pages automatically.

I’ve written my posts in Markdown before, Grav uses it too. I love it because it’s very convenient to write. You keep typing and don’t have to select anything to mark it bold, etc…

Hugo to the Rescue!

As you may have already noticed: I’ve picked Hugo to build my static websites. There is no particular reason. I love Go, the programming language Hugo is written in, and the speed it offers.

I don’t want to write another tutorial on how to set up a website with Hugo, but I would like to highlight some aspects.

Getting to Know Each Other

First, I can recommend the excellent quick start guide in the Hugo documentation.
With its help, you will

• create your first site structure,
• add a theme and
• generate your first static website.

You can find many more free website themes on this page.
Afterward, the article about the basic usage will explain how Hugo works and how you can deploy your website.

Tip 1: Organizing your Website

As mentioned in the guides, there will be a directory structure like this:

├── archetypes
├── assets
├── content
├── data
├── layouts
├── resources
├── static
├── themes
└── config.yaml

There are many possibilities to organize your content. Some people like to place the markdown files in the content directory and the images in the static directory.

In that case, you would have to sync the structure of your website in both folders, like this:

├── content
│ └── blog
│ ├── post1
│ │ └── index.md
│ └── post2
│ └── index.md
└── static
 └── blog
 ├── post1
 │ ├── image1.jpg
 │ └── image2.jpg
 └── post2
 ├── image1.jpg
 ├── image2.jpg
 └── image3.jpg

It is better to bundle the pages in your content directory:

├── content
│ └── blog
│ ├── 0001-post1
│ │ ├── image1.jpg
│ │ ├── image2.jpg
│ │ └── index.md
│ └── 0002-post2
│ ├── image1.jpg
│ ├── image2.jpg
│ ├── image3.jpg
│ └── index.md
└── static
 └── logo.jpg

You can note another recommendation here: I prefix the directory names of my blog posts with a number, so they are ordered after the time I’ve created them.

Tip 2: Copy the Layouts of the Theme

I bet every time you create a website, you want to customize the selected theme. If you want to change an image, icons or layout, most content management systems force you to duplicate the downloaded theme or to edit it in place. The problem with this approach is that you will have conflicts when you try to update the theme.

With Hugo, you can overwrite the themes layout templates. Just copy the template you want to change/overwrite into your layout directory

├── layouts
│ └── partials
│ └── footer.html
...
├── themes
│ └── fancy-theme
│ └── layouts
│ └── partials
│ ├── footer.html
...

Here your layouts/partials/footer.html will overwrite the themes footer.html. So you can update the entire theme without conflicts and will benefit from all the updates, but will keep your changed template (and can adapt the updates of that template on your own, if you want to do so).

Publishing your new Static Website

To build your website, execute the hugo command and it will create, by default, a public directory with all your files. Remember to delete it before you rebuild your site as Hugo does not delete files that don’t exist anymore.

The public directory contains everything you need for your static website - or better: It is your static website. Now you can upload all the files in that directory to your webspace or server and enjoy your new static website.

Conclusion

Maintaining a website/blog can be a lot of work. Not only that you have to create content, but you also have to update your content management system, the plugins, themes and hope that it will work as expected after every update.

The start with a static website may be difficult, you may have to learn a few new things like Markdown and for example the Hugo command line (optionally Git, but you don’t need that).

It can allow you to focus on creating content instead of housekeeping your software stack.

Do you already use a static website?
If you have any questions, tips or feedback, please leave a comment below. :)

Cover: Pankaj Patel