Why I rebuilt my blog? #

My previous blog was hosted on WordPress. It worked nicely. Although if I were being picky, it was not free 💸.
Then old domain name expired, I purchased a new domain patrickzhao.com.au and as a side effect, thinking of starting on a new blog platform.

Why Hugo? #

First of all, it’s free. There are plenty of templates out there which doesn’t cost any 💰

How did I set up Hugo 🔨 #

Basic setup #

Refer to Hugo’s official setup instructions

• Install Hugo As a Mac user, below is what I did. It’s easy enough to follow the official document to install if you are on other platforms.

brew install hugo

• Create a new site

hugo new site {myblog-name}

Theme Configuration #

Among a bunch of themes, I’ve chosen Congo theme So I followed the theme installation guide I tried different ways of installing the theme and decided to use Git submodule

cd {myblog-name}
git init
git submodule add -b stable https://github.com/jpanther/congo.git themes/congo

After that I just followed the configuration instructions along.

Useful configuration - Profile link icon #

Profile link icon need to be named same as the link configuration in languages.en.toml e.g. I have my Sessionize configuration on languages.en.toml

{ sessionize = "https://sessionize.com/patrick-zhao" }

The template will then look for an image under ./assets/icons called sessionize.svg

Useful configuration - Content header #

Hugo treats all markdown page as content. However, for some pages such as about, we wanted to use it as a menu page instead of regular blog post.

Folder structure #

Useful command #

Serve Hugo site locally with hot reload

hugo server

DevOps #

I’ve chosen to host it on my GitHub page

Setting GitHub Page #

• Create a GitHub Repo called {github-account-name}.github.io
• Configure the page setting, adding custom domain

• Set up GitHub Actions as below

name: Deploy to GitHub Pages
on:
    push:
        branches: [ main ]

permissions:
    contents: read
    pages: write
    id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.111.3
    steps:
    - name: Install Hugo CLI
      run: |
        wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
        && sudo dpkg -i ${{ runner.temp }}/hugo.deb                  
    - name: Install Dart Sass Embedded
      run: sudo snap install dart-sass-embedded

    - name: Checkout Code
      uses: actions/checkout@v3
      with:
        submodules: recursive
        fetch-depth: 0

    - name: Setup Pages
      id: pages
      uses: actions/configure-pages@v3
    - name: Install Node.js dependencies
      run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"

    - name: Build with Hugo
      env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
      run: |
          hugo --gc --minify           

    - name: Upload artifact
      uses: actions/upload-pages-artifact@v1
      with:
        path: ./public

# Deployment job
  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
        name: github-pages
        url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

What else? #

Once the foundation of my blog is setup, I started to think about what other plugins that I would like to have on my blog.

First of all, although I am not gonna monetize my blog but if readers really enjoy my content and are willing to tip, I think I should allow that. As a result, I decided to embed buymeacoffee

Secondly, I value all types of feedback. From the feedback, positive or negative, I learned readers’ perspective

Buy me a coffee ☕, why not 😎 #

I installed buymeacoffee to my blog. The way it’s installed is very simple.

• create a file called extend-head.html under ./layouts/partials folder according to the instructions
• Go to buymeacofee web portal and generate the web widget code
• Paste the widget code onto extend-head.html
• All set!

Let’s Disqus 👍 #

I always like to receive feedback, so I integrated Disqus to my blog as well. The way to integrate it is very simple.

• Add disqusShortname="patrickzhao" onto config/_default/config.toml
• Add snippet below to comments.html

<div id="disqus_thread"></div>
<script type="text/javascript">

(function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://patrickzhao.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

• All set!

Blogging #

It’s very simple, just create the mardown files under /content/posts folder, that’s it!

Summary #

Hugo is great for blogging, set up is easy while extensible. I wish to stay with it for a while and provide more feedback.