Let's JAM: Building a Blog with Hugo + GitHub Pages + Hover + Smol (Part 2)

In the last part of this series, we bought our domain name on Hover and installed hugo on our computer. This week, we’re looking at creating our repository on GitHub and setting up GitHub Pages.

I mentioned briefly how static web hosting (preferably over a CDN) is a core part of the JAMstack experience. There are a number of static web hosting solutions out there (apart from setting up your own with your own server, etc.), but we’ll be using GitHub Pages. GitHub Pages let’s you serve static content from GitHub repositories over the web and has a number of features that could be quite useful for us:

• it’s free 🎉
• it let’s you set a custom domain name and automatically generates a Let’s Encrypt SSL certificate for HTTPS
• it’s built right into GitHub so more than one person can collaborate on a blog without going the extra step of uploading generated files somewhere
• oh, did I mention it’s free?

Anyway, let’s first create a new GitHub repository for our blog at https://repo.new.¹

Back on our computer where we already had hugo create some basic files for us, go back into the project folder, initialize a git repository, and push our basic file and directory structure:

cd theresa-tobias.website
git init
git add -A
git commit -m "init"
git remote add origin https://github.com/pfandzelter/theresa-tobias.website.git
git push -u origin master

You will have seen that we already have a docs/ folder with some basic contents (but no blog posts yet), which we have now uploaded to GitHub. Let’s set up GitHub Pages! Go to the Settings tab on the GitHub repository and scroll down to GitHub Pages. Here, select the master branch and our docs/ folder as a source.

Now, we’re live! Well, kind of. So far, we can reach our page at http://pfandzelter.github.io/theresa-tobias.website (or whatever your username is).²

To set up our custom domain name, let’s go back to Hover and set up the correct DNS records. In the Control Panel for our domain, go to the DNS settings and set the following new record:³

As an optional step, we set up a forward from theresa-tobias.website to www.theresa-tobias.website in the Forwards tab of the Hover Control Panel.⁴

Finally, let’s go back to the GitHub Pages settings on our repository and enter www.theresa-tobias.website as our custom domain.⁵ Now, you might be asking yourself: why does GitHub Pages actually care about the domain we`re using if we set our DNS records on Hover? Thank you, that’s a smart question to ask. GitHub Pages needs to know what hostname we’d like to use to set up HTTPS for us. HTTPS is HTTP over TLS, and TLS is short for Transport Layer Security - essentially, it’s just more secure HTTP and, despite our blog not really needing any security because it’s all public anyway, it’s a good thing to have. The SSL certificates you need to enable TLS from a server-side used to be super expensive because a company would vet you first before issuing your certificate - but thank’s to the Let’s Encrypt project, it’s free now! We won’t get into how the Automatic Certificate Management Environment (ACME) works here, as GitHub Pages requests the needed certificates automatically, but it’s useful to know that it requires that we have already set up the correct DNS records.

HTTPS will be enabled automatically by GitHub Pages but it takes up to 24h for it to request the certificate. After that, it’s a good idea to enable Enforce HTTPS, which will redirect your clients from HTTP to HTTPS.

And, well, that’s it. In a few easy steps we have set up our GitHub repository and are now already hosting a blog (albeit an empty one) at our very own domain, all encrypted with HTTPS. In the next part of this series, we’ll be writing and publishing our very first blog post!