Since I set up this site earlier this month I thought it would be nice to share my experience setting up this blog. Here’s how I did it using the Hugo static site generator framework.
Why Hugo?
I was on the lookout for a way to get a blog site up and running, which met my criteria:
- Simple post creation
- Simple hosting solution
- Minimal HTML/CSS/front end dev
- Easy to include additional static pages
After some research, I found that using Hugo to generate content and hosting on github pages was the perfect fit. Hugo is a powerful framework for creating static sites and blogs, requiring only some basic development skills. The only things you need to know for Hugo are
- Git
- YAML
- Markdown
If you have these skills, getting started with Hugo is a simple. Of these, I think git is the main barrier, but anyone with a little git experience should be fine.
If you have a github account you will easily be able to host your own blog via github pages, and it’s super simple to deploy.
Getting Started with Hugo
How to set up the blog wasn’t immediately obvious, but it’s feasible to get everything up and running in a few hours.
Hugo simplifies the process of creating a static site. The heavy lifting is done by the theme you choose, meaning you don’t need to code in Go, although I’d be happy to have a Go at that! ;)
It’s important to note that you need to choose a theme for your site. This has advantages because the theme handles all of the HTML/CSS stuff for you, but it also can impose some limitations, assuming you don’t want to go ahead and edit the theme. I chose gruvhugo because I liked the look and it aligned with my requirements. It’s worth shopping around for a while; you can see available themes here.
The main task is configuring the hugo.toml
file, which defines the settings and structure of your site. For a quick start, there’s an excellent 10-minute introduction to setting up a site with Hugo by Ryan Schachte.
Repository Set Up
This is the part that sounds a little complex, so I’ll explain in a bit of detail here.
- You need to host your blog code in a repo, let’s call it
myblog
- If you want to take advantage of github pages for deployment and hosting you need to commit the static files generated by Hugo to the repo corresponding to your github pages. This repo needs to be named
username.github.io
, so in my casepagrim.github.io
. This will also be the url of your blog. - In order to make it easy to commit the static files, you can add your
username.github.io
repo as a submodule of yourmyblog
repo at thepublic
directory. In other words, you’ll be running this commandgit submodule add username.github.io public
. The reason for choosing thepublic
directory is that this is where Hugo will store static files when you generate them (by default) - The simplest way to add themes is often to add your theme
mytheme
as a submodule of yourmyblog
repo, this time at thethemes/mytheme
directory. As a side note, I did decide to amend the theme very slightly so I added a forked version of the theme on my own github and added that as the submodule. Of course, if you take the theme as-is, there’s no need for this.
Initially, I considered using Continuous Integration (CI) for deployment instead, but once I worked through the above setup everything was very smooth.
Local Development & Writing
I made extensive use of Hugo’s local server to preview the end result of my site as I worked on it. This was incredibly helpful for ensuring everything looked and functioned as expected before publishing.
I initially wrote this post as a series of bullet points and asked ChatGPT to turn those into full sentences, although I edited the output a lot before publishing. Based on this experiment it seems like a great way to remove the heavy-lifting of writing a long post but still ensuring the content reflects my personal opinions :)
Final Thoughts
I’m extremely happy with the final result of my blog site. Hugo made the process smooth and enjoyable. Whilst I might explore other options in the future to add more features or flexibility, the current setup is an excellent starting point.
If you’re looking to create a blog site quickly and efficiently, I highly recommend giving Hugo a try. With its ease of use and powerful features, it’s a fantastic choice for anyone wanting to share their thoughts and experiences online.
Happy blogging!