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

I've just finished the migration of my blog from ghost self hosting to hugo.
I'm more than happy to use { framework: "Hugo", hosting: "Firebase", cicd: "CircleCI" }.
Just wanted to share the full path how I got it done, which was not a piece of cake, you know, it's like kinda "production", not a playing around or dev env.
There are tons of good materials explaining how to blog with hugo, install hugo themes, etc. I'm just going to mention about the road blockers I met during this migration.

When you run the hugo server command on your local machine, it seems working flawlessly, but the first thing you may stuck when you try to deploy it to the cloud is baseURL in the hugo config file.
Here is my config file, a part of it exactly:

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

The first line is the point I'm going to mention. Yes, it enables us to use any host name as base url so that your stylesheets and other assets can have correct accessible url.

The next thing is just configuring firebase deployment. You just need to setup your firebase hosting and test if it's really deployed correctly, which is pretty straightforward.

Here is my firebase.json file:

 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  }

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
 3  firebase-deploy: azdevs/[email protected]
 4  hugo: circleci/[email protected]
 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
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'
33  build-and-deploy:
34    jobs:
35      - build
36      - deploy:
37          requires:
38            - build

As you may guess, you need to add the $FIREBASE_TOKEN as an env variable to your CircleCI project settings.
Yes, it should be working, you can blog anywhere using your favorite editor(mostly the VIM!), once you push your new contents to git, it will be live in less than a minute thanks to the CircleCI pipeline.
Sorry for not enough explanation about all the nitty-gritty, wish I were a full time blogger. :(
Happy blogging gents! ๐Ÿ˜Ž

comments powered by Disqus