Setting up a static website with Hugo and Github Pages
TLDR: You can setup a website for yourself for the cost of a domain name and some time using a static site generator like Hugo and free hosting on Github Pages.
So I just did this for myself after procrastinating for months. The steps can be a bit confusing at first, so I’ve decided to pull together a short tutorial in case anyone else wants to do something similar and also as a reminder for myself in the future in case I need to do this again.
Alternatives
Instead of going through the effort of setting up a site yourself, you can just host it on a myriad of free or low cost alternatives. If you like the look of the bear blog theme, just create your blog on the OG Bear Blog itself. You can even have your own domain name point to it for a small fee.
I’ve gone through this effort because I’m cheap and because I eventually want to host this site on my own local setup. So I decided to go down the static site generation (SSG) route instead.
Ingredients
You will need the following:
- Hugo
- The Hugo BearBlog Theme
- A Github account
- A domain name
Hugo
You don’t have to use Hugo. There are a lot of static site generators out there that will convert you input files into a static website. I chose Hugo because it is popular, has a lot of documentation and is being actively developed. It is also easy to install on Linux and fairly straight-forward to use.
Installation
I use Linux Mint BTW, so unfortunately the version of Hugo in the package repo is quite old. No matter, you can go directly to the Release Page and download the latest release of the .deb for Intel/AMD machines. Something like hugo_extended_withdeploy_0.154.2_linux-amd64.deb. If your machine architecture is difference, pick the one which applies to you.
Download the file and run:
sudo apt install hugo_extended_withdeploy_0.154.2_linux-amd64.deb
run the following to see if Hugo was installed:
hugo version
Theme installation and Site Generation
The Quick Start Guide has the details for the next bit.
hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog
echo "theme = 'hugo-bearblog'" >> hugo.toml
hugo server
This will get you a working setup, but it’s not ideal. Instead copy over the hugo.toml file from ’themes/hugo-bearblog/exampleSite’ into your base directory and modify it. Also copy over the contents of ’themes/hugo-bearblog/exampleSite/content’ and ’themes/hugo-bearblog/exampleSite/static’ to the appropriate directories under the base directory as well. You now have some files you can edit as per your requirements.
Home Page setup
Edit the ‘content/index.md’ to setup your Home page.
Blogging
Run
hugo new blog/my-new-post.md
and edit the created file under ‘content/blog’. This is your blog post and it will appear in the Blog page.
Publish
Run hugo to generate the static pages under ’/public’. Just copy those files over to where they are going to be served from. If you’re using Github Pages, make sure you don’t over-write the CNAME file you created to link your domain to your Github Pages otherwise you’re going to have a bad time.
Final Tweaks
- RSS Feed: Add the following in the hugo.toml file to create an RSS feed. The RSS icon is the ‘wireless’ emoji which is Unicode U+1F6DC. Type Ctrl+Shift+U and then u1f6dc and press Enter to type in the Unicode character in Linux. In Windows, I think you can use Wnd+. to get a pop-up to do the same.
[outputs]
#home = ["HTML", "RSS"]
section = ["HTML", "RSS"]
[[menu.main]]
name = "🛜"
url = "/index.xml"
weight = 100
-
Emoji Support: Add
enableEmoji = truein hugo.toml to add support for emoji’s like 👋. Emoji shorthand can be found on this page. -
Static Images: You can add static images into the ‘static/images/’ directory and refer to them with
in your .md files. Also update the favicon.ico and favicon.png files.
Github Pages + Domain Name
-
There are a lot of top level domains (tld’s) you can choose from and they are supported by multiple Registrars. Find one which works for you. I registered my domain under .in and Namecheap was the cheapest one I could find for that tld at that time.
-
To set up Github Pages, go to the official documentation and follow the instructions there.