Featured image of post 技巧 | 让你见识见识真正的新手小白熊之力吧之Hugo+GitHub搭建静态博客稍微全自动篇熊
Poreover

技巧 | 让你见识见识真正的新手小白熊之力吧之Hugo+GitHub搭建静态博客稍微全自动篇熊

答应我，代码能运行就不要再动它了好不好

⚠️上半篇推荐的手把手教学视频可能因为时效性，作者的最后一个视频自动部署方案现在跟着操作会有点（很大）问题，当然，原理其实是一致的，故本篇会尽量详细描述整个自动部署的原理和过程。

需要说明吗：下文的英文没有一个词是我拽洋文，均是页面上会显示的原文。最烦装〇的人！

前情提要

书接上回，我们建的第一个公开仓库repository已经成功上线，现在在准备好博文内容之后要达到线上主页更新的目标需要【2】个步骤：

1.hugo指令hugo -D生成最新的public文件夹；

2.将public文件夹上传至Github仓库。

本文的目标是简述及简化上述两个步骤。

策略之GitHub Action + GitHub Desktop

方案总述：一个是公开仓库后续放public文件，一个是建议私有的仓库包含你的博文源文件，利用GitHub Action自动化生成Public文件并让私有仓库和公开仓库连接，GitHub Desktop本地管理仓库并简化Git指令上传有改动的文件。

私有仓库建立

小贴士：

1.仓库名Repository name以见名知意为佳，例如Bear(博客名)HugoBlogSource。

2.跟我们上一步建立公开仓库唯一区别就是可见选择Private。

GitHub Action使用

我们的自动化依赖一段代码完成，而第一步是要给权限。（官方说法叫“GitHub 提供一个令牌Token，可用于代表 GitHub Actions 进行身份验证。”）

设置Token具体操作：打开GitHub，点开个人界面的Settings，往下翻翻到Developer Settings，有一个钥匙图标Personal access tokens (classic)，点进其中的Tokens (classic)，点击Generate new token (classic)，备注Note随便取建议取你能看得懂的，到期时间Expiration选择No expiration（否则你隔个十天八天的还要回来重新给权限），勾选repo和workflow这两部分。

注意，生成的那串Token只会显示一次，所以可以自己找个另外的文本文档啥的保存记录一下，否则就只能重新设置。

因为这段Token会被我们写进接下来的自动化代码文件里，所以我们要在这里再进行一个操作，在我们放源代码的仓库（也就是设置成私有的那个仓库）设置一个Secrets（可以理解为给它穿件衣服） （裸奔是不好的） 。

具体操作：点开我们刚刚创建的私有仓库，点开仓库的Settings，找到Security下的Secrets and variables，点进其中Actions，创建一个New repository secret，Secret那个框里粘贴进去刚刚你复制的那串Token，这里的Name建议不要取奇奇怪怪的名字，最好符合全英文+简洁原则，例如我这里写的是TOKEN。

下面就到了真正的核心——自动化代码部分，我们回到电脑本地文件夹你存放博客所有文件的位置（像本文就保存在电脑E:\hugo\bear），我们新建一个文件夹”.github“，并在”.github“内创建一个子文件夹”workflows“，我们的自动化代码就放在”workflows“文件夹下，创建一个空白文档，粘贴以下代码：

 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

name: deploy

on:
  push:
    branches:
      - main # 或者是你的源代码分支

jobs:
  deploy:
    runs-on: ubuntu-24.04 # 之前我用这段代码一直有问题网友说可能是因为这个ubuntu的版本问题，所有跟着网友改成了这个版本

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0

      - name: Set up Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "latest"

      - name: Build and Deploy
        run: |
          hugo -D

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          PERSONAL_TOKEN: ${{ secrets.TOKEN }} # 你的个人访问令牌
          EXTERNAL_REPOSITORY: beebeebear/beebeebear.github.io # 你的GitHub Pages仓库,即公开的那个仓库
          PUBLISH_BRANCH: main # 或者是你的GitHub Pages分支
          PUBLISH_DIR: ./public
          commit_message: ${{ github.event.head_commit.message }}

小贴士：大部分注释都写在上面了，不确定会不会有友友不知道上面说的源代码分支是指什么，点开你的仓库的Settings，General设置下有个Default branch，这里写了你的分支名，本质就是文件夹名，是可以修改的，我习惯用main，也有些人或者创建时默认是master，如果你的显示是master而且你不想改动，那么就把上面这串代码的main改成master。

自动化代码作者出处：actions-hugo

GitHub Desktop

喜欢折磨的也可以用Git命令。

顺带说一下我们新建仓库code页面下create a new repository on the command line里那串命令的意思 （其实是我写都写了不想浪费） ：

1
2
3
4
5
6

git init //创建空的git文件夹
git remote add origin https://github.com/beebeebear/bearblogsource.git  //和远程库建立连接，那串https是对应链接
git branch -M main  //当前分支为main分支
git add .  //添加所有文件
git commit -m "first commit"  //推送，""内的内容是备注
git push -u origin main  //推送到远程的main分支上

不过按照接下来操作我们应该用不上这串命令了……（谁在狂喜？）

其实仓库创建出来提示页面就有个GitHub Desktop下载按钮，当然也可以点击这个官方链接进行下载：GitHub Desktop

下载安装之后如果你已经登录了GitHub账号（如果您正在按这篇博客跟着做那么应该是登陆状态）可以直接关联然后登录，这里说一下GitHub代码仓库管理的逻辑其实是这样：线上仓库有文件——克隆（下载）文件到本地——本地文件有更新——确认提交更新后的代码

到这一步，我们现在以及以后需要管理的就只有私有仓库……在这里插入一小步，创建”.gitignore“文件，意思是在上传的时候自动忽略我们这个文件里写的内容，像public文件我们就不需要上传，以及你如果跟着上半篇我推荐的那个视频走，Hugo.exe文件其实也不用上传，”.gitignore“文件位置写在博客文件夹根目录下（例如我的博客文件夹位置E:\hugo\bear，这个文件就写在这里）

当然也可以不用管”.gitignore“文件，直接梭哈，只是说越简洁在上传的时候能减轻一点网络压力。

继续以下步骤：GitHub Desktop点进对应私有仓库克隆到本地（我放在了E:\hugo这个文件夹下，主要是我方便管理，我懒），把我们的源文件扔进去（建议复制不要剪切，既然咱们是新手就要多留心眼，留个原件，这样万一出问题也不至于瞬间回到第一步），这个时候点开GitHub Desktop我们会发现”Changes“那一块多出来很多东西，我们在”Summary“那里写好本次改动的原因（因为是我们自用的博客没有什么规则我比较懒一直在调试就直接打了test）commit to main，然后确认提交push origin，如果失败了大概率是网不行，换个节点。

稍等片刻，代码生效（学名叫部署）需要点时间，可以点开仓库的Actions查看部署deploy情况。

到这一步应该就完成整个的自动化操作了，如果没有，请看下一步。

公开仓库检查

因为如果你按照上篇操作，在公开仓库你应该已经提交了一次代码，这个时候我们去公开仓库检查一下，有可能出现一种情况，除了跟私有仓库有联系的代码（Code页面每一行提交的文件中间有亮着蓝色的部分例如我这边显示是”beebeebear/xxxxxxx(私有仓库名)@xxxxxxxx(一串数字)“）还出现了部分没有联系的，如果你出现了这样的情况，恭喜你，现在打开GitHub Desktop，按照克隆操作把公开仓库拉到本地，然后把文件清空再上传，相当于把公开仓库清空。

然后GitHub Desktop再重新回到私有仓库，因为自动化代码触发貌似需要代码有变动，所以这里可以新增一个测试博文文件（\content\post那里），再再再更新上传，来触发代码生效。

现在应该就能正常打开博客页面了。

还有高手？

其一：

如果咱们的源代码只有一点点变动（例如某篇你发现了错别字），事实上你可以直接在Github上改，这也是为什么要上传源代码的原因……？（并不是）当然，不是很推荐这种做法。

其二：

心细的友友应该早就察觉，其实新建博文也不一定需要使用hugo命令，第一次它把框架搭好之后我们后续如果只是要新增博文内容，直接拿着以前的文件夹复制粘贴然后修改里面的index.md文件就好了，常用的hugo命令可能是本地调试即hugo server -D。

其三：

如果搭建中的某一步一直报错，搜索引擎找遍办法也没用，最好的办法就是炸了重来。

你可能需要的：

删除仓库的步骤：点进对应仓库Repositories，仓库Settings，划到最下方Danger Zone，Delete this repository。

其四：

博客搭建不是一劳永逸的，就像上述的自动化代码，半年前还能用结果半年后就要对应修改了……

但是你的博文内容是最核心也是相对最永恒的，一切皆可抛，保存好post、保存好post、保存好post（重复三遍），总能换个地方重来。（能不用总是迁徙当然更好！）

comments powered by Disqus