/images/logo.jpg

[Github] 1. Deploy GitHub Blog Site

intro

  • GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.

pre-work

create a repository

  • Create a repository named your_github_username.github.io, where your_github_username is your GitHub username. For example, if your GitHub username is octocat, the repository name should be octocat.github.io.

hugo install

create a blog site

hugo init site

1
2
3
4
5
6
7
8
# create directory
mkdir your_github_username.github.io
# cd to directory
cd your_github_username.github.io
# init site
hugo new site .
# git init, make sure it's a git repository
git init

add a theme

1
2
3
4
5
6
7
8
9
# add a theme, here we use LoveIt theme.
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
# now the git is main branch which is not stable, we need to checkout to the latest stable version.
cd themes/LoveIt
git checkout v0.3.0
cd ../..
# now, there should be a .gitmodules file in your directory. if not, you need to run `git init` first.
# copy the exampleSite config file to the root directory
cp themes/LoveIt/exampleSite/hugo.toml .

modify the config file

  • modify the config file hugo.toml

bashURL

1
baseURL = "https://gooddayday.github.io"

themes directory

1
2
3
# themes directory
# 主题目录
themesDir = "./themes"

website title

1
2
3
# website title
# 网站标题
title = "GoodyHao's Blog"

website images

1
2
3
# website images for Open Graph and Twitter Cards
# 网站图片, 用于 Open Graph 和 Twitter Cards
images = ["/logo.jpg"]

website icon

  • put icon file in the static directory

gitRepo

  • modify the gitRepo to your public git repo url
1
2
3
# public git repo url only then enableGitInfo is true
# 公共 git 仓库路径,仅在 enableGitInfo 设为 true 时有效
gitRepo = "https://github.com/GOODDAYDAY/GOODDAYDAY.github.io"

github deploy

create a workflow file

  • create a file .github/workflows/deploy.yaml, and add the following content:
 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
31
32
33
34
35
36
37
38
39
40
41
42
name: Deploy Hugo to GitHub Pages
on:
  push:  # Trigger condition: push code to master branch
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest  # Use Ubuntu environment
    steps:
      # 1. Check out repository code (recursively pull theme submodule)
      - uses: actions/checkout@v4
        with:
          submodules: true

      # 2. Install Hugo (use extended version, supports SASS)
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'  # Or specify version (e.g., '0.147.2')
          extended: true

      # 3. Cache dependencies (speed up subsequent builds)
      - uses: actions/cache@v3
        with:
          path: |
            resources/_gen
            public
          key: ${{ runner.os }}-hugo-${{ hashFiles('**/go.sum') }}
          restore-keys: |
            ${{ runner.os }}-hugo-

      # 4. Build Hugo site (enable compression)
      - name: Build Hugo site
        run: hugo --minify

      # 5. Deploy to GitHub Pages (automatically push public directory to gh-pages branch)
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN  }}  # GitHub automatically provided Token (no manual creation needed)
          publish_dir: ./public  # Point to Hugo generated static files directory
          force_orphan: true  # Force create new commit (avoid branch history confusion)
  • github repository settings -> pages -> source -> select gh-pages branch and / (root) folder -> save
    • if gh-pages branch not exist, need to push code to github first

/images/1.%20deploy%20github%20blog%20site.md/1.%20github-page-setting.png