“This blog needs to be a static website made with Hugo.”


That was my basic idea. A simple blog. No fancy things, just explanations about things I built and liked, and perhaps a personal blogpost every now and then.

Soooooo what would be the first post? What do I need to write first right? Well why not just answer the obvious question:

“how did you host the site you are building RIGHT NOW?!”

Table of Contents

Quite early on I figured I want to use github pages to host this blog. Well obviously, I did not do that.

Why? Because Netlify offered built-in hugo building support. And things like: multiple branches1 Multiple websites! I could do A/B testing, etc, etc. I don’t need that now, but yeah, in the future? Who knows!

They also have DDOS protection built in and a CDN (Very handy, even though I try to put the pictures at imgur.com. Different blog post methinks)

Also: Netlify CMS. Simple online content editor. Helps me create drafts quickly, perhaps edit a typo while on the road with my phone etc. Scratch that, too basic and not enough hugo integration.

So…

TL;DR

The site is created as static files using Hugo I host it at Netlify (free) and the source of it is hosted at Github, picture at imgur.com

Serverless

Yep, It’s all serverless! There is nothing for me to host or do myself. As long as it stays a personal website Netlify does not charge me with anything!

We also use a Github repo, and Github charges for private repo’s. Bu I do not need a private repo, since all of this stuff is on a public blog anyway? So again: free.

Serverless Serverless

Hugo

I can be short here, It’s really simple. Go to their quickstart and set it up!

Most difficult part: Choosing a theme. And May I suggest you “fork” the chosen theme so you can make additions / alterations to it?

And then you MUST add the theme NOT by “cloning” it but by adding it as a submodule:

git submodule add git@github.com:markmaas/hugo-nederburg-theme.git themes/nederburg-mark

When you are done with those basics; put it all up in a new public repo, like mine is

Hugo Hugo

Github

The steps here are simple enough: 1. Create a new fresh public repo 2. Upload the Hugo content. you just created into this new public repo. Github guides you through this stuff.

Netlify

First, you create a new account. Then, you connect netlify to the github repo you just created.

Somehow netlify deduces that you are using a Hugo based static site. All you need to do is to tell it which version you use. (Mine is 0.47).

After that your site is live!

But… with a horrible URL. Mine was: https://mystifying-johnson-d64a73.netlify.com/

You get that link for free and you could use that ofcourse…. But no. We want a nice and custom domain.

Custom domain

Go to domain management in the netlify settings and start adding your own domains. I already owned maas-martin.nl and simply created a CNAME to https://mystifying-johnson-d64a73.netlify.com/ for my bare domain and the www subdomain.

Domain Settings Domain Settings

Lets encrypt

After the DNS has been done and recognized by netlify, you have the option of turning on LetsEncrypt TLS for your site (https://). You can find this setting in the netlify settings page as well:

TLS Settings TLS Settings

Ofcourse you want this. Good for your SEO score, privacy, and for your readers!