When my sister first asked me for help with her website, I didn’t have much to say. I was going to school for embedded engineering and web development was a completely different beast. I looked through her server at the code but I could tell most of it was generated using tools in which I hadn’t used anything remotely similar. I wasn’t much able to help much but I got an idea of the issue she was running into with her site: speed, nonresponsive, and expensive.
Creating My Own Site
After finishing college, I had time to branch out into other fields of programming. I decided to create my own website in order to track projects I had done and interact with other engineers. I didn’t need anything fancy and wasn’t going to make money on it so I didn’t feel a need to pay large amounts every month for hosting. I had ran my own home servers for source control and media but I felt that there must be a nicer way of doing things.
I was extremely happy to learn that Github had recently started allowing users to host a static site straight from a code repository. I was even happier when I learned that Gitlab (my preferred source host) offered a similar service. They made it extremely simple for anyone with a little coding background to setup and manage a website using a static site generator. The coder could checkout a repo locally, edit the files, and then push them to the source host where a website would be built and hosted automatically. This left only one problem left to solve: What’s a static site generator?
A quick Google search showed that there are plently of options available for a static site generator. The top choice at the time of this writing was the Jekyll framework. I began experimenting and was very impressed with what I found but I couldn’t help but feel that it was slow and clunky. I moved on to the second choice, Hugo, and saw both of my issues disappear. Here’s how you can setup your own website using Hugo.
Setting up Hugo
Most Linux distros have a version of Hugo available for installation within their package manager. This is the preferred installation method as it is usually a stable version and will be updated with the rest of the programs on your system. An example would be the apt packag emanager on Ubuntu systems.
| |
The downside of this method is that it usually a fairly old version. When I installed Hugo using apt on Ubuntu 18.04, the installed version was 0.26.1. This might be fine depending on the features you want to use in your website but the latest version of Hugo at the time of this writing was 0.47.1. Luckily, Ubuntu now ships with its new snap package manager which happens to have the latest Hugo version.
| |
We can now setup a folder to keep all of the files for your new website. I usually like to keep a code folder in my home directory but as long as the website get its own folder (and you can find it) it doesn’t matter where you place the directory.
| |
Finally, we tell Hugo to create a new site in the current directory and run the website.
| |
By default Hugo allows you to view the website by navigating to localhost:1313 in your local browser. Changes made to the website will cause the browser to automatically refresh.