Contents

Hugo blog setup and deployment

Using my template

Tip
If you prefer a do-it-yourself way to set up your Hugo blog, please follow the theme documentation instead.

Copy My template site for a quick start. It includes

  • Beautiful CodeIT theme installed as a Git submodule.
  • Some useful shortcodes were added from color your world theme.
  • CI/CD routine for both GitHub actions and GitLab CICD. The website will be built and deploy automatically upon pushing the changes.
Note

After copying, you need to change baseURL in config.toml.

1
baseURL = "www.example.com/" # With the trailing slash

Hosting on GitHub pages

Click the Use the template button at my template repository.

The website will be deployed on the gh-pages branch. You need to activate GitHub pages in the repository settings, pointing to root folder in the gh-pages branch.

The CI file in my site, as an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
name: github pages

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: checkout master
      uses: actions/checkout@v2
      with:
        submodules: true  # Fetch Hugo themes (true OR recursive)
        fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: 'latest'
        extended: true
    - name: Build
      run: hugo --minify
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./public
        full_commit_message: ${{ github.event.head_commit.message }}
        force_orphan: false

The major pro of GitHub pages is that the acccess is pretty fast thanks to the CDN infrastructure.

Hosting on GitLab pages

Click import project and select Repo by URL, paste the git url from my template.

The CI/CD part is coded on .gitlab-ci.yml. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
image: registry.gitlab.com/pages/hugo:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive
  HUGO_BASE_URL: 'https://sosiristseng.gitlab.io/'

before_script:
- apk add --update --no-cache git

test:
  script:
  - hugo -b ${HUGO_BASE_URL} -v
  except:
  - main

pages:
  script:
  - hugo --gc --minify -b ${HUGO_BASE_URL}
  - apk add --update --no-cache brotli
  - find public -type f -regex '.*\.\(htm\|html\|txt\|text\|js\|css\|svg\|xml\)$' -exec gzip   -f -k {} \; || echo 'Gzip failed. Skipping...'
  - find public -type f -regex '.*\.\(htm\|html\|txt\|text\|js\|css\|svg\|xml\)$' -exec brotli -f -k {} \; || echo 'Brotli failed. Skipping...'
  artifacts:
    paths:
    - public
  only:
  - main
Note
You need to modify the HUGO_BASE_URL entry in .gitlab-ci.yml to your domain for the website to build properly.

The major pro GitLab pages is that there are more custom domains and access levels. You can internalize your website , requiring logging in to an approved account to visit.

See also