用 Github Actions 部屬 Hugo 網站

Hugo

The world’s fastest framework for building websites

~~我也不知道是不是~~

GitHub Actions

Automate your workflow from idea to production

CI/CD工具

Step

安裝 Hugo
- Windows (Chocolatey)
- Linux (Homebrew)

版本有分 hugo-extended/hugo 有些Theme會需要安裝hugo-extended

建立 Blog
- hugo new site blog

Init Commit

1
2
3


cd blog
git init
git commit -m "init commit"

安裝Themes(以MemE為例) 需要hugo extended

安裝 MemE

1
2
3


cd blog
blog $ git init
blog $ git submodule add --depth 1 https://github.com/reuixiy/hugo-theme-meme.git themes/meme

用 Git Submodule 管理 Hugo Theme

用範例config.toml 取代原本的config.toml

1

rm config.toml && cp themes/meme/config-examples/en/config.toml config.toml

建立posts及about頁面

1
2


hugo new "posts/hello-world.md"
hugo new "about/_index.md" 

查看效果
1

hugo server -D

建立 GitHub Actions

hugo-setup

放在 ./github/workflows/main.yml

 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:
    - master  # Set a branch to deploy

jobs:
deploy:
    runs-on: ubuntu-18.04
    steps:
    - 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

再次commit

1

git commit -m "add workflows"

推上 GitHub
<USERNAME>.github.io 這個repo
或是置於其他的repo
- 並做以下設定
- 將Branch改為 gh-pages
  
  因為上面的Github Actions 會把build完成的網站推到gh-pages這個分支
- 從此以後你每次推送上github的commit Github都會自動幫你輸出網頁到
  https://<USERNAME>.github.io

有問題可以在下方utterances 留言喔

用 Github Actions 部屬 Hugo 網站

Hugo

GitHub Actions

Step

相關文章：