Codespace + Hugo + Netlify联动搭建博客（小白向）

文章的初衷#

博客的目的是写作而不是展示自己技术的地方，所以本文以方便快速的角度出发，带小白们认识一下 hugo 的魅力。

需要准备的#

能快速打开 Github 的电脑（推荐挂梯子，否则写文章容易丢失）
学习 Markdown（很简单，工具推荐 Typora，0 学习成本，像编辑 Word 文件一样编辑 Markdown）

搭建博客#

访问CaiJimmy/hugo-theme-stack-starter点击Use this template按照提示完成操作

Step 1

完成操作后，点击Code创建新的 Codespace

配置博客#

打开 Codespace，打开config/_default/这里的文件就是博客配置。

修改 config.toml#

下面是各行需要修改的地方

名称	需要的操作
baseurl	修改为自己博客的网址，格式：（//: 网址）
languageCode	修改为网站的语言，这里写 zh-cn
paginate	每页显示文章数，保持原样即可
title	网站标题，如 "百度"
DefaultContentLanguage	支持 en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk, ar。填写 zh-cn

其他的不用管

修改 menu.toml#

在基础上进行修改即可

修改 params.toml#

footer

since: 填写博客创建日期，如 2023

customText: 自定义页脚文字，效果见本站页脚
dateFormat

不用改，改了可能会出错
sidebar

emoji: 头像右下角的图标，填写 emoji 即可

subtitle: 博客头像下的一段文字，不建议太长
sidebar.avatar

local: 头像是否在本地，如果在本地请填写 true！

src: 头像链接

其他的不用管

部署博客#

修改.github/workflows内的 deploy.yml (没有的新建)，删除内容后填写：

name: Deploy to Github Pages
on:
    push:
        branches: [master]
    pull_request:
        branches: [master]
jobs:
    build:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v2
            - name: Cache Hugo resources
              uses: actions/cache@v2
              env:
                  cache-name: cache-hugo-resources
              with:
                  path: resources
                  key: ${{ env.cache-name }}
            - uses: actions/setup-go@v2
              with:
                  go-version: "^1.17.0"
            - run: go version
            - name: Cache Go Modules
              uses: actions/cache@v2
              with:
                  path: |
                      ~/.cache/go-build
                      ~/go/pkg/mod
                  key: ${{ runner.os }}-go-${{ hashFiles('**/go.sum') }}
                  restore-keys: |
                      ${{ runner.os }}-go-
            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                  hugo-version: "latest"
                  extended: true
            - name: Build
              run: hugo --minify --gc
            - name: Deploy 🚀
              uses: JamesIves/github-pages-deploy-action@v4
              with:
                  branch: gh-pages
                  folder: public
                  clean: true
                  single-commit: true

新建分支

New branch

点击 New branch

Create a branch

打开仓库 > settings>Actions>General，按图修改

Action

上传到 Github

输入

git init
git add .
git commit -m "commit"
git push origin master

部署至 Netlify#

先注册一个账号，然后新建站点，选择从 Git 仓库导入

点击 Github 后等弹窗显示文字，关闭即可看到仓库，选择博客仓库，选择 gh-pages

示意图

其他的不用管点 Deploy site。到首页访问链接即可看到博客（每次更新博客不用手动重新部署，过程是自动的）