DevBlog
slapelachie.xyz
Making a Static Website with Hugo

Rationale

In this day and age, the most common type of website created is a dynamic one using frameworks like Express and React. While this is useful in some instances - such as creating a forum or a website with a large user base - these frameworks are taking over what should be very minimal websites and making them bloated. As I like creating things that are light-weight and only have the necessities, I decided to seek alternatives, which is where I stumbled upon statically generated websites.

This option is combination of both dynamic and static websites, where the server generates the pages from templates and then serves them as static websites that do not need to be generated on the fly.

For my use case - a simple blog - this is perfect for the following reasons:

  1. It’s secure - I don’t need to log in through a terribly created authentication system and just need to upload it to the server.
  2. It’s fast - The server does not need apply the template whenever someone visits the website.
  3. Ease of use - I just need to upload a simple markdown document and execute a command to get a new post to show up.

So, why did I choose to use Hugo for this. Well the answer is simple, it’s the first one I found. Coincidently it matches my needs perfectly, all I need to do is find a good template, modify it a bit, and then start posting with it.

Installation

This is not a guide, this is just the process on how I set it up for my own use. For a proper guide I would suggest looking at Hugo’s documentation, Lunduke’s post or Chris Titus' guide.

Reading into how to create websites using Hugo, I stumbled across a post by Lunduke, which suggested to download the binary from Hugo’s github and place it in the project directory (This was better for me as I did not need to worry about adding more packages to my testing machine).

After doing this I followed through the documentation and how to create the website and installing the themes. However finding a good starter theme was a tough choice. A lot of the themes to choose from were too much for what I needed, but eventually found three good themes; Coder, m10c and Diary. Out of these three I settled on Diary as the others didn’t have what I wanted in them. From here I made a fork and started customizing it to my liking.

About Page

As I wanted my main website to be as minimal as possible, I decided to remove the about page from there and decided to integrate it here instead. To do this was going to need to extend the template to allow this to be included. This was actually simple to implement, and just required adding a page under /content/ and linking that in the main config file.

Conclusion

In the end I managed to get a beautiful blog website generated that suits my needs and aesthetics. A blog that is easily modifiable if I want to change it up someday. All in a very small footprint.


Last modified on 2020-12-17