Hugo - An Awesome Way to Enjoy Your Blog Life as an Engineer

I have just finished migrating my blog from Ghost self-hosting to Hugo. I am more than happy to use: { framework: "Hugo", hosting: "Firebase", cicd: "CircleCI" }. I just wanted to share the full process of how I got it done, which was not a piece of cake. You know, it's not just playing around or a dev environment; it's production. There are tons of good materials that explain how to blog with Hugo, install Hugo themes, etc. I'm just going to mention the roadblocks I encountered during this migration.

When you run the hugo server command on your local machine, it seems to work flawlessly. However, when you try to deploy it to the cloud, the first issue you may encounter is the baseURL setting in the Hugo config file. Here is a portion of my config file that pertains to this issue:

 1relativeURLs = true
 2title = "crazyoptimist"
 3theme = "hugo-coder"
 4languagecode = "en"
 5defaultcontentlanguage = "en"
 6
 7paginate = 20
 8canonifyurls = true
 9
10pygmentsstyle = "b2"
11pygmentscodefences = true
12pygmentscodefencesguesssyntax = true
13
14disqusShortname = "crazy-optimist"

The main point I want to make is about the first line. It allows us to use any hostname as a baseURL so that stylesheets and other assets can have a correctly accessible URL.

The next step is to configure Firebase deployment. You just need to set up your Firebase hosting and test if it is deployed correctly, which is pretty straightforward.

Here is my firebase.json file:

 1{
 2  "hosting": {
 3    // Site name in firebase
 4    "site": "crazyoptimist-net",
 5    // Build artifacts dir, ./public in hugo, you know, it will be the web root on the fly
 6    "public": "public",
 7    "ignore": [
 8      // Do not bundle these files to upload
 9      "firebase.json",
10      "**/.*"
11    ]
12  }
13}

Here is the list of Firebase CLI commands used:

1# normal login
2firebase login
3# just a normal deploy scenario for firebase
4firebase deploy --only hosting:crazyoptimist-net
5# get your firebase token
6firebase login:ci
7# then you can use this command for automation
8firebase deploy --token "$FIREBASE_TOKEN"

And the final point is here in CircleCI config(.circleci/config.yml) file:

 1version: 2.1
 2orbs:
 3  firebase-deploy: azdevs/[email protected]
 4  hugo: circleci/[email protected]
 5
 6jobs:
 7  build:
 8    docker:
 9      - image: cibuilds/hugo
10    steps:
11      - checkout
12      - hugo/install:
13          version: 0.75.1
14      - hugo/hugo-build:
15          extra-flags: '--gc --minify'
16      - persist_to_workspace:
17          root: ~/project
18          paths:
19            - public
20            - resources
21
22  deploy:
23    docker:
24      - image: 'circleci/node:lts'
25    steps:
26      - checkout
27      - attach_workspace:
28          at: ~/project
29      - firebase-deploy/deploy:
30          token: '$FIREBASE_TOKEN'
31          alias: 'crazyoptimist-net'
32workflows:
33  build-and-deploy:
34    jobs:
35      - build
36      - deploy:
37          requires:
38            - build

As you may have noticed, you need to add the $FIREBASE_TOKEN as an environment variable to your CircleCI project settings. With this setup, you can blog anywhere using your favorite editor (hopefully VIM!). Once you push your new content to Git, it will be live in less than a minute thanks to the CircleCI pipeline.

I apologize if my explanation lacked some nitty-gritty details. Wish I were a full-time blogger. :X

Happy blogging gents! 😎