Contents

Building a blog with Hugo and Netlify

Build a personal blog with Hugo within an hour.

Start with Hugo

Step 1: Install Hugo

On Windows

This video is the tutorial I followed to install Hugo on Windows 10.

Summary of steps in the above video
  • Create a new folder under C drive
  • Download the zip file from the Hugo repo on Github
  • Unzip file under the folder just created
  • Set up environment path

On other operating systems

Please follow the guide here

Step 2: Pick up a theme

This website is using this theme

Main reasons why I choose this theme:
😏 Dark theme, programmers' favourite 😉

Step 3: Hosting on Netlify

Please click this link to setup Netlify

Why to use Netlify?
  • UI friendly and easy to follow
  • Cost-efficient, the free plan is enough
  • Only a few steps to set up Hugo blog
  • Easy to set up a custom domain

Summary

Some holes 🌀 I met when I was building this blog:

  • Not all markdown syntax supported in Hugo, such as the collapse list
  • Different Hugo themes will have different setup steps, features, and syntax, so there isn’t a single way to make all themes work perfectly. Please try two or three themes and pick up the one you are comfortable with.
  • Make sure you use the latest Hugo version, some themes and features might not compatible with the old Hugo version.

Tools 🔨 check list:

  • Hugo —> Static website framework
  • Netlify —> Hosting and deploying the website
  • LoveIt —> Hugo theme
  • Visual Stuio code —> code editor
  • Github —> Code repository

At the end 💡

The way to build a personal blog website is easy, but keep writing a blog is hard. Hope you and especially me always remember the reason why we build our blog.

Further references

Markdown reference

Theme reference

Host on Netlify

Theme Demo source code

Emoji cheat sheet 1 Emoji cheat sheet 2