This article documents the process of building a personal blog website with Hugo, from initialization to setting up a custom domain.

Creating a Personal Website with Hugo Locally

Hugo is an open-source static site generator written in Go, known for being lightweight and fast. Official Website

Installation

Platform: Ubuntu 22.04.2 LTS (Windows Subsystem for Linux 2)

Installing Go

Follow the official tutorial to install Go. After installation, update PATH by adding to ~/.bashrc:

export PATH=$PATH:$HOME/go/bin

Installing Hugo

Using the build from source method:

CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@latest

After installation completes, verify Hugo:

hugo version

Creating a Local Website

Hugo makes site creation simple with a single command (replace jrqz with your project name):

hugo new site jrqz

The newly created site is empty, but Hugo provides many themes for quick setup. Here I used the Ananke theme:

cd jrqz
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml

Start the Hugo development server:

hugo server

Visit the URL shown in the command output to view your site.

Creating Your First Blog Post

Hugo makes creating blog posts easy. Just create a Markdown file in the appropriate location:

hugo new content posts/my-first-post.md

The file will contain:

+++
title = 'My First Post'
date = 2024-03-26T20:32:47+08:00
draft = true
+++

draft = true means Hugo won’t publish this post by default. Set it to false when ready.

Deploying to GitLab Pages

GitLab Pages allows automated builds from source code and is accessible without VPN in China.

Create .gitlab-ci.yml in the project root:

default:
  image: "${CI_TEMPLATE_REGISTRY_HOST}/pages/hugo/hugo_extended:latest"

variables:
  GIT_SUBMODULE_STRATEGY: recursive
  HUGO_ENV: production

before_script:
  - apk add --no-cache go curl bash nodejs

test:
  script:
    - hugo
  rules:
    - if: $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH

pages:
  script:
    - hugo
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
  environment: production

Modify baseURL in hugo.toml:

baseURL = 'https://{username}.gitlab.io/{project}/'

Create a project on GitLab and link the local repository:

git add .
git commit -m "Initial commit"
git remote add origin git@gitlab.com:sznswjr/jrqz.git
git push -u origin master

Note: GitLab 15.11 enables unique domain for Pages by default. Go to Deploy → Pages and uncheck “Use unique domain” to avoid resource path issues.

Setting Up a Custom Domain

Purchase a domain from a provider like Tencent Cloud. After verification:

1. Go to GitLab project → Deploy → Pages → New Domain
2. Add DNS records:

Finally, update baseURL in hugo.toml to your custom domain and push.