Setting up a hugo blog with google domains

Posted on Mar 21, 2021

In this article I’ll try to detail how I set up the blog you’re reading.

First thing I did was to register spageti.dev on google domains.
It cost me a grand total of 12 euros for a year which is quite expensive but I really wanted this url. 😁
Actually registering the domain should be the last thing you do, but I felt like it would motivate me to put online something under the address.

Next I found the bear blog template which is originally a BaaS (Blog as a service) fully online and centralized.
I did like the simplicity he offered but all the work is done for you which removes quite a bit of fun, control over style and overall code improvement possibilities.

That’s where the hugo version of the bear template comes in, made by Jan Raasch. It’s a version that you have complete control over with light and dark theme and let you deploy your own version of the website.

To install you first need to install the hugo CLI : advanced instructions are available here.

If you’re on Windows like me, you’ll want to install hugo through chocolatey :

choco install hugo-extended -confirm

Or scoop :

scoop install hugo-extended

Note : if you don’t have chocolatey you can follow the instructions here, the installation consists of a single command to run in admin mode in your powershell terminal.
Note 2 : I installed the extended version but it won’t be necessary for the bear blog template, of what I understood, the extended version is used to compile SASS.

Next is the download of the theme on your machine.
You can do so with the following commands :

hugo new site <name of your site>    
cd <name of your site> 
git init
git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog

Now go in the theme folder and copy the content of the folder to replace the content of the base template, most importantly the toml file, the content’s folder file architecture of the and static folder.

It should work out of the box but additional configuration instructions are available here

You can add blog posts with the following commands :
shell hugo new posts/<name of the post>.md

Next is the deployment through github pages.

  • Create a file .nojekyll at the root of your repo, otherwise github will deploy with the default jekyll config.
  • Create a CNAME (no extension) file in the static directory containing the name of your site (spageti.dev in my case).
  • Create a ‘.github’ folder containing a ‘workflows’ folder himself containing a ‘gh-pages.yml’ file with the following code, no modifications are necessary :
name: github pages

on:
  push:
    branches:
      - master  # Set a branch to deploy

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          # extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
  • Create a github repo and push your website to the master branch.
  • Go to the settings and scroll to the Github Pages section and set the deployed branch to gh-pages.

gh-pages config

  • Next is the dns config, go to google domains, then go to DNS on the left menu and scroll to the bottom of the page, there you should see a personalised resources section, you have to plug in the IP address of gh-pages, like so :

google dns config

I added a www redirection to make sure that when someone types www.spageti.dev he’s redirected correctly to spageti.dev

Now you only have to wait for the changes to take effect all over the world, it should take at most 48 hours. Once github detect the SSL can be enforced, you can tick the checkbox in the gh-pages config.

And congratulations, your site is online and redeployed at every push !

Additionnal advise :
As said earlier, with this self deployed blog you have complete control over style.
That’s why I made the dark mode the default, and the light mode pops in when specified in the user browser preferences. You only need to change a single line of css to do so in themes/hugo-bearblog/layouts/partials/style.html :
From @media (prefers-color-scheme: dark) {
To @media (prefers-color-scheme: light) {