This Site Built With Hugo

Well-written, static websites are a beautiful thing… at least, in my mind they are. They’re normally incredibly simple, they load super quick, are easier to cache, and the list of potential vulnerabilities is limited compared to a dynamically generated website. There are no login pages to crack, no admin panels to sneakily get access to and do some damage, there are no caching issues with a page changing practically every time it is loaded with ads or user content - it just is.

In this article, I’m going to discuss the setup for this website, and how it came to be that way. This site uses Hugo to generate the static HTML files and assets, which, if you’re interested in using Hugo as well for your website, has a bit of a learning curve for how everything fits together. After the learning curve, however, it is mostly just smooth sailing with writing plain-old text files that are formatted using markdown.

Disclaimer

My intent with this article is NOT to convince you that static websites are somehow inherently better than dynamically-loaded websites, or even that Hugo is the best static website generator. My intentions are simply to shine some light on the idea of static websites, and maybe open your eyes to static site generators like Hugo if you have never used them before and don’t see how they’re useful.

I also believe it is important to document the things that I do on my home network and sometimes at work, in the hopes that if someone else runs into the same issues I have or are looking for similar setups can look here for solutions or have some sort of starting point.

Installing Hugo

Installing Hugo is very easy, as the documentation provides installation steps for numerous operating systems. I’m not going to replicate the steps here, as I can’t do a better job at detailing them than the project’s authors themselves. Plus, the steps may change with future updates and I really don’t want to have to update this article every single time they change…

You also have the option to use a Docker image for Hugo. At the time of writing this article I’m using the jojomi/hugo image, as the maintainer seems to keep up quickly enough with the latest versions of Hugo and the image is flexible enough for me for both development and production uses. Keep an eye out for a later article where I do a deeper dive into using Hugo with Docker.

Getting Back to Hugo

Getting back to Hugo, if you’ve heard about it before then you know that it, in it’s simplest form, renders Markdown files into HTML files. This is mostly true, as the text files you write are markdown, with some extra headers that Hugo uses for housekeeping, like the page title, creation date, etc. Since markdown files are pretty much just plain text files with relatively sparse formatting, this makes it insanely simple to write new pages and blog posts. You want to write your blog post in Notepad? Sure, go ahead. You want to write your blog posts in an IDE with a markdown preview and syntax highlighting, linting, and all that jazz? That works too!

It Takes a Bit to Set Up Your Site

First things first, you need to create your site. You can run hugo new site myblog, where “myblog” is the name of your site. This will create the initial directory structure for your site.

Next, you will want a theme for your site. You CAN create this on your own, but I’d recommend you take a look at the themes available at themes.gohugo.io to get things moving for now. You can come back to this later if you want to create your own theme, or just modify the theme you currently have. Once you have your theme (let’s go with PaperMod), you can grab the link from the download button, and then you can run:

cd myblog
git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git

And then add the line theme: "hugo-PaperMod" at the end of your config.toml file.

But It’s REALLY Easy to Write an Article

When I can write a very simple Markdown document like this:

---
title: "Example Post"
date: sometime_time_string
draft: true
---

And it gets translated into a proper HTML document following my template and it looks good, that’s really neat. Combine this with Git and you have a really easy way to work on your blog posts from multiple devices and your documents will even be versioned!

And It’s REALLY Easy to Test Your Changes

To see your site and test your changes, you can run hugo server -D which will run Hugo to generate your site, and start an HTTP server to serve your site. You can now navigate to localhost:1313 in your web browser and boom! Your site is as it would be if you were serving to your live audience. You shouldn’t use this in a production setting, but this is extremely useful for developing your site and writing articles.

Less Security Issues

Another benefit to Hugo - this applies to any static site, really - is that you don’t have to worry about someone brute-forcing the login page to your site so they can get access to the admin panel and make a mess of your site. While it does seem a little defeatist by giving up some of the features pioneered by Web 2.0, security is an ever-evolving challenge that frequently requires a lot of attention, forethought, and some failure. Malicious actors are contstantly changing their methods to exploit systems, and sometimes your security systems are able to catch and prevent these new methods. Sometimes, you just have to hope you’ll figure out or be alerted to an intrusion if it happens. And sometimes, you’re really exhausted after a long day of work and/or gaming, and you just want to get your web app running before you go to bed, thinking you’ll tidy things up and secure it in the morning… and bam, you get attacked overnight and now you have an issue on your hands. It happens.

In my opinion, I don’t consider it “giving up” so much as I consider it “reducing surface area of attack”. I could spend more of my time fighting with security issues and tightening up this blog - Wordpress really isn’t that bad if you put a little bit of effort into it - but I have better things to do. I really don’t need any of the fancy features offered by Wordpress or any other dynamic blogging software

Conclusion

Like I mentioned at the start of this article, I don’t intend to switch you to Hugo for your sites with this article. Merely, I hope to show you that static sites are a thing of beauty, and they do have their uses even today! There are pros and cons to everything, and boy, are there some nice “pros” to this! (And yes, there are some cons too… fancy features are nice.)

There is a LOT more to Hugo than I mentioned in this article. There are many things you can do with organizing your content, creating/customizing a theme, using page types/templates, asset pipelines, all kinds of things. And there are also cool things you can do with version control and continuous integration systems for automatically building and deploying your site. There are endless possibilities! I hope this got you interested in static sites, or at least appreciate them a little bit more.