Working with Hugo

Configuring Hugo on WSL2 and Deploying using Netlify

So, judging by the lack of “aesthetic” this blog offers, it’s quite evident that I’m not very good with front-end, which is why I wanted something easy to set up and most importantly didn’t require me to work on the design much. I tried Blogger, WordPress and other such alternatives, but for some reason, I never liked any of those, I especially didn’t like the “Powered by WordPress” site banner. I made my website which was text only, with some fancy repeating background design, it looked nice but it was too simple and bland, plus it was a single-page website. There was no “About” page, no header or footer, it was barely responsive. Being a single-page website, it also didn’t have anything to accommodate a blog, which is why I resorted to Blogger and WordPress.

Hugo, which is what is used to build this website, is a static site generator, all I had to do was to choose a theme, make a few changes, add a few blog posts and this website was ready to go! The theme I went with is called no-style-please, it offers a minimal design, which makes it easy to maintain and make tiny changes to, plus I liked the way it presented the blog posts. It also had auto dark mode, which is something I wanted to put on my website for quite some time now.

Coming to working with Hugo, I’m currently using a Windows laptop on which I’m running WSL2 for all programming-related work. Here’s the setup guide for running Hugo on WSL2:

Download the latest “extended” version from their Github repo. (I ran the non-extended version of Hugo first and I ran into trouble with Sass files that needed to be transpiled to CSS. Probably why the docs recommend you to go with the extended version.)
Extract the archive.
Move the executable to /usr/bin.
Run the following code to check if everything works:
```
$ hugo version
```
If all the installation steps were executed as specified in the documentation, you should get the following output or something similar based on your version of Hugo:
```
hugo v0.111.3-5d4eb5154e1f5a0315c4180dab192+extended linux/amd64 BuildDate=2023-03-12T11:40:50Z VendorInfo=gohugoio
```
Once Hugo was installed, creating a website and applying a theme was pretty straightforward. Just following the quickstart guide provided by Hugo is enough to get you up and running. As far as the themes are concerned, there are a lot of options but only a few good ones. I went with no-style-please and got to writing the blog posts.
I chose Netlify for hosting and deploying this website. The integration is pretty straightforward and is mostly similar to what is specified in the documentaion by Hugo, but it’s not completely straightforward. Here’s why, in the quick start guide for Hugo, under the “Publish the site” section, it tells you to run the Hugo command to create the entire static site in the public directory. A lot of tutorials online tell you to push only this public directory to Github, along with the config.toml and leave out the rest of the directories and files. I did the same and also include the netlify.toml that Netlify requires, but, a lot of my builds failed on Netlify with the following error message:
```
Unable to locate config file or config directory.
```
After a bit of playing around and Googling, I came to this post on the Hugo forum and specifically, this answer which said:
```
If you want to build your site on your machine, you can just drag and drop 6 the public folder, and netlify will serve it. This is a pretty simple way to do things.

If you want to use Netlify’s continuous deployment 5, commit your whole project: i.e. the content, themes, and static folders, without the public folder. 
```
This is what is missing in Hugo’s documentation. Instead of running the Hugo command and creating the public directory, one needs to simply push the whole site to Github, specify in the netlify.toml file that the Hugo command is the build command to run and the public directory which the command creates is the directory to publish, and, that’s it, your site is now up and running on Netlify. I would also recommend you change your Netlify subdomain to something sensible and easy to remember.

I’m probably not going to be sticking to this theme for long. I’ve already found a handful of worthy replacements. I need to check if everything works in those themes before making the jump. So, maybe you’ll be welcomed by a new theme the next time you visit this blog. Or maybe the new theme is so good that it replaces the entire website, i.e, ashrith.dev. who knows!?

Working with Hugo.

Configuring Hugo on WSL2 and Deploying using Netlify