Why set up a Hugo Blog

• My aim was to build a blog that was low cost, low maintenance, and secure with HTTPS/SSL
• A static website was all that I needed to document things for myself (and potential readers)!
• Wordpress seemed like a bit of an overkill for this
• There are many tools that can build static websites (e.g. Jekyll), and it seemed like Hugo was easier to maintain than Jekyll

Setup

My overall setup was similar to that in ariya’s blog, and the components I used were as follow:

• Hugo (framework for building the website)
• Firebase (mobile and web application development platform by Google, with free HTTPS/SSL support)
• Gitlab (host private repositories with git version control to host raw Hugo contents, which can be used to build the website contents and push them to Firebase)
• (Optional) I’ve tried using Mailchimp for email subscription function, and Disqus for discussion boards. While they work well, I wanted to keep my blog contents to a minimal, and rely on Twitter/Facebook/LinkedIn/Email for communications, and Google’s search engine to direct my contents to people who search the relevant key words.

Get a domain

Set up a domain or subdomain. I used namecheap, but there are plenty of options to choose from.

Hugo (local setup)

Referencing quickstart to set up Hugo, here’s the procedure (and command line code below) for mac:

1. Install Go and Hugo

   # For Mac
   brew install go
   brew install hugo
   # For Linux
   snap install hugo --channel=extended

2. Create a directory (…/<website>) and set it up for Hugo

   mkdir .../<website>
   hugo new site .../<website>

3. Add some content (change the value of draft to ‘false’ in file to make it visible)

   hugo new about.md # then edit this file

4. Clone a bunch of default themes, or just choose just one theme or download (or create your own)

   git clone --recursive https://github.com/spf13/hugoThemes themes

5. Edit the file config.toml to tailor the theme to your need (e.g. set baseurl = “http://blog.example.com/"), then build the site locally to see the results

   hugo server --theme=<theme> #Build site (specify folder name in themes)

Firebase (and Google Cloud Platform)

• Install Google Cloud Platform on your computer
• Set up Firehose to work with Namecheap (this gives you free HTTPS/SSL)
• Verify domain ownership via TXT
• Some extra notes on setting this up from Stackoverflow
• Note some DNS settings changes can take quite a while (up to 24 hours?)
• Set up Firebase CLI and login
  • Install node.js (follow above link)
  • Install firebase and login npm install -g firebase-tools firebase login:ci
  • The login:ci will print a token that you can save and use for gitlab integration

Setting up with Gitlab (or other similar version controlled repositories)

SSH from local computer

SSH config: Generate ssh key pair (I renamed it to gitlab and gitlab.pub) In ~/.ssh/config add (IdentityFile should be private key):

Host gitlab.com
    HostName gitlab.com
    PubkeyAuthentication yes
    IdentityFile ~/.ssh/gitlab

Create firehose.json

Create/edit firebase.json file and place it in the hugo-blog directory. The file should contain the following:

{
  "hosting": {
    "public": "public"
  }
}

Set up .gitlab-ci.yml file

Add environment variables FIREBASE_TOKEN and FIREBASE_PROJECTID in “Settings - CI/CD”

variables:
    GIT_SSL_NO_VERIFY: "true"
stages:
    - deploy
deploy:
    stage: deploy
    image: nohitme/hugo-firebase
    script:
        # build site
        - cd ${CI_PROJECT_DIR}
        - rm -rf public
        - hugo --theme=hugo-theme-cactus-plus-mod
        # upload
        - firebase deploy --token ${FIREBASE_TOKEN} --project ${FIREBASE_PROJECTID}
    only:
        - master

• Git push to update new contents to repository
• This should trigger a build of the website everytime and push this to firebase