利用GitHub-Actions将Hugo博客自动发布到GitHub和Gitee Pages

工作协同图片

简介

现在个人博客通常有比较多的选择，如果不想要自己购买服务器实现静态博客的发布，可以在、CSDN等平台建立自己的账号并发布，但是原始数据无法在本地管理；如果想要数据完全自己管理，可以使用GitHub或者Gitee Pages功能发布自己的博客，利用Hugo或Hexo等成熟的静态博客将md文件转换成静态网站文件进行快速发布。本文就用来记录如何快速将博客发布到、GitHub以及Gitee Pages三个平台。

一、流程设计

我希望的流程当然是主要精力用在写文章，发布的流程最好完全不需要手动处理，但实际情况下手动发布博客的流程大体是：

编写->拷贝到->本地Hugo生成文件->提交到Github->提交到Gitee->Gitee页面刷新；
流程相对比较多，希望能够编写完md后只需要把源文件提交到GitHub即可实现GitHub和Gitee Pages的自动化部署。

之前有使用过Travis CI+GitHub+Hexo自动发布到GitHub Pages，但是GitHub的访问经常不那么靠谱，因此想着也能同步到Gitee，并且自动构建Hexo的速度受Nodejs环境部署影响，速度很慢，因此本次计划采用Hugo来构建网站文件，整体流程设计如下：

博客自动发布流程

二、环境准备

为了满足博客自动发布流程，首先需要在本地准备好生产环境，以满足快速发布，以此的复杂是为了长期的简单，因此在环境准备阶段我会把所有涉及的工具都记录下来，以方便大家使用以及后边自己回顾，环境准备包含：

Typora配置
Git配置
Hugo配置
Obsidian配置

Ⅰ、Typora配置

1、Typora基本配置

Obsidian完成知识积累后，按照ZK->Project->Archive->Blog的流程发布Blog，但是Obsidian的文件相互关联，且附件如何快速复用，需要对Typora和Obsidian都进行简单的配置，确保后续Blog能够快速完成并发布，并且文件仍在Obsidian工程中正常显示；

Typora非常的简洁，而且可以实时预览，在写博客的时候经常会插入一些图片，截图后可以直接粘贴进去，图片也会自动保存在本地，这里需要注意图片的保存路径，在偏好设置里，设置插入图片时复制到指定路径（./resource/），这样复制的图片就会自动保存在当前文件夹下的resource文件夹里，方便后续管理与转移。

Typora图像设置

2、使用Typora+picgo-core+gitee实现图床功能

安装Nodejs
- windows7安装
  
  a. 从官网下载对应版本，win7可用最新版本为：v13.14.0；win10/win11可下载最新版本；
  
  b. 运行安装即可；
- ubuntu 20.04安装
  
  ubunut仓库中默认的Nodejs版本是v10.19.0，不是最新的版本，因为我用到的其他包需要依赖高级版本，因此安装v14版本；
  
  a. 安装NodeSource：curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -，这个脚本将会添加 NodeSource 的签名 key 到你的系统，创建一个 apt 源文件，安装必备的软件包，并且刷新 apt 缓存；如果你需要另外的 Node.js 版本，例如12.x，将setup_14.x修改为setup_12.x；
  
  NodeSource 软件源提供了以下版本：
  - v14.x - 最新稳定版
  - v13.x
  - v12.x - 最新长期版本
  - v10.x - 前一个长期版本
  b. 安装Nodejs和npm：sudo apt install nodejs，安装的版本node -v可查看是v14.18.2；

配置npm

配置npm源为淘宝源，命令如下：

npm config set registry https://registry.npm.taobao.org
npm config get registry

安装picgo
- 方法一、在上传服务中点击PicGo-Core(command line)
  
  自动下载的目录为：%AppData%\Typora\picgo
- 方法二：在上传服务中点击Custom Command，打开终端，输入以下命令：

sudo npm install --no-optional --verbose picgo -g #跳过可选依赖

在Gitee创建图床仓库

a. 注册一个码云（gitee）账号
b. 创建一个仓库（加号）
c. 仓库设定

gitee创建图床仓库

d. 创建gitee访问token

新建token，点击头像

gitee私人令牌1

gitee私人令牌2

e. 配置picgo

打开终端输入以下命令，如果是自动安装，需要将picgo目录加入path，或者在picgo目录执行命令：

#安装gitee的插件    
picgo install gitee-uploader 
#设置配置文件    
picgo set uploader  
1.按上下键找到gitee，回车    
2.repo：用户名/仓库名 （打开自己的仓库，浏览器里的网址username/reponame）    
3.token：刚才生成的token      
4.path:路径，图片上传到仓库的目录，例如img，即上传到仓库的img目录    
5.custompath:不用填，回车   
6.customURL:不用填，回车    
#使用配置好的文件（配置文件在~/.picgo/config.json）    
picgo use uploader

测试上传功能
- 打开你typora，验证图片上传，查看是否成功；
- 成功设置好图床，将一张图片拖到typora中，试一下能否自动上传
- 手动上传图片可参考：picgo gitee仓库；

Ⅱ、Git配置

1、Git下载安装

去官网下载git;
运行安装，选择安装路径，其他默认即可；

2、基本配置

配置全局用户名和邮箱

git config --global user.name "用户名"
git config --global user.email "邮箱"

生成公钥

ssh-keygen -t rsa -C "邮箱地址"

在.ssh文件生成id_rsa和id_rsa.pub两个文件；

3、配置公钥到github

setting->SSH and GPG keys：new SSH Key；

4、配置公钥到gitee；

设置->ssh公钥->添加公钥；

Ⅲ、Hugo安装配置

Hugo 是一个基于Go语言开发的静态博客框架，号称世界上最快的构建网站工具；

1、安装

Windows安装：在hugo github下载windows版本包，解压到目录，并添加到PATH即可；
Ubuntu安装：sudo apt-get install hugo

2、生成博客

命令为：hugo new site myblog
myblog为博客的目录名，可以修改为你自己想取的名字，生成的目录如下：

image

3、主题下载

在hugo主题网站找到喜欢的主题，我选的是hexo主题，可以在next主题的github地址hugo-theme-next下载;
可以下载主题压缩包，解压到themes文件夹下，也可以直接使用git clone到themes目录下；

4、主题配置

将【exampleSite\config】和【exampleSite\content】两个目录拷贝到站点根目录下；
content目录下有en和zh_CN两个目录，分别放英文和中文两个页面的md文件，默认的md文件可以删除，将需要发布的文章放入这两个目录即可；
config目录下_default目录对站点的侧栏等功能进行配置，可以根据自己需要进行配置；

5、主题修改

由于默认主题生成的文章页面有些功能是不需要的，因此需要对themes下文件进行修改：

image

single.html修改，删除文章页面不需要的几个信息；

image
rss.html，直接删除文件内容即可；
comment.html修改为自己的评论功能代码，我使用的是utteranc，可以参考5、配置评论功能]；

image
foot.html，删除页脚不需要的信息

image

6、快速复制当前配置

将config、content和themes三个目录拷贝到新创建的站点目录，将content下替换为文章文件即可。

7、配置评论功能

utterances是一款基于Github Issue的Github工具，优点主要是无广告、加载快、配置简单，轻量开源。
由于utterances是一款Github App，因此安装utterances非常简单，只需要授权特定repo权限给utterances就可以了,注意一个点：授权的这个repo必须是public的，可以选择多个repo，但是建议选择一个就可以了，也比较安全。

给出我授权的repo作为参考，我是选择博客的repo作为utterances评论的存放点(在博客评论的内容都会以issue的形式发布在repo下).

utterances APP配置
将插入评论代码加到主题模板中：

这是当前最简单的配置方法，也可以在utterances官方查看其他配置方法，以及详细的配置参数说明。

8、Hugo常用命令

hugo server本地启动服务进行预览，localhost:1313访问；
hugo生态静态网页文件到public目录；
hugo -b url，制定baseurl生成网页文件，所有文章的链接前缀都是以此生成的；
hugo new post/first.md，用模板生成md文件

Ⅳ、Obsidian配置

Obsidian的安装和使用可参考我的另一篇文章：Obsidian作为第二大脑工具的基本使用和配置

三、实现方案

所有环境准备好后，终于要开始启动我们的自动化流程的实现了；

Ⅰ、GitHub和Gitee Pages配置

Gitee Pages配置：
- 创建与用户名同名仓库；
- 仓库主页->服务->Gitee Pages，选择对应的分支并开启https；
GitHub Pages配置：
- 创建名称为【用户名.gthub.io】的仓库；
- 仓库主页->setting->Pages，选择对应的分支；

Ⅱ、GitHub同步到Gitee鉴权私钥配置

参考git配置生成公私钥，并将公钥配置到Gitee；
将私钥配置到GitHub仓库，Pages仓库主页->Settings→Secret→New repository secre 用于GiuHub Action提交代码到Gitee的鉴权，命名为GITEE_RSA_PRIVATE_KEY，将私钥填入；

image

Ⅲ、GitHub仓库代码更新Token配置

生成GitHub账号的 personal access token

image
将仓库权限选上就行了，然后将生成的token，配到私钥配置的地方仓库→Settings→Secret→New repository secre，命名为ACCESS_TOKEN；

Ⅳ、配置Gitee密码到Github用于自动部署Gitee Pages工程

同之前步骤相同，将Gitee密码配置到GitHub Secrets，命名为：GITEE_PASSWORD，所有配置结果如下：

image

Ⅴ、编写Actions脚本

synctogitee.yml

name: deploy blog to gitee
 
on:
  push:
    branches:
      - master    # master 分支 push 的时候触发
      
jobs:
  deploy: #执行部署Hugo生成静态代码，默认放在gh-pages分支
    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: '0.90.1'
          extended: true #不需要extended版本就可以注释

      - name: Build github # 我的Hugo配置baseurl为GitHub Pages路径，使用hugo命令默认为GitHub Pages生成静态网站
        run: hugo

      - name: Deploypage # 部署到GitHub Pages分支
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.ACCESS_TOKEN }}
          external_repository: qz757/qz757.github.io
          publish_branch: gh-pages  # default: gh-pages
          publish_dir: ./public

      - name: Build gitee # 指定baseurl为giee Pages的url生成Gitee网站静态文件；
        run: hugo -b https://qz757.gitee.io
          
      - name: Deploygitee # 部署到Gitee对应的分支，该步骤是部署到GitHub仓库的对应分支
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.ACCESS_TOKEN }}
          external_repository: qz757/qz757.github.io
          publish_branch: gh-pages-gitee  # default: gh-pages
          publish_dir: ./public
                
  
  sync: #同步到gitee仓库
    needs: deploy
    runs-on: ubuntu-latest
    steps:
    - name: Sync to Gitee
      uses: wearerequired/git-mirror-action@master
      env:
        SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
      with:
        # 来源仓库
        source-repo: "[email protected]:qz757/qz757.github.io.git"
        # 目标仓库
        destination-repo: "[email protected]:qz757/qz757.git"
        
  reload-pages:
    needs: sync
    runs-on: ubuntu-latest
    steps:
      - name: Build Gitee Pages
        uses: yanglbme/gitee-pages-action@main
        with:
          # 注意替换为你的 Gitee 用户名
          gitee-username: qz757
          # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
          gitee-password: ${{ secrets.GITEE_PASSWORD }}
          # 注意替换为你的 Gitee 仓库，仓库名严格区分大小写，请准确填写，否则会出错
          gitee-repo: qz757/qz757
          # 要部署的分支，默认是 master，若是其他分支，则需要指定（指定的分支必须存在）
          branch: gh-pages-gitee

Ⅵ、绑定Gitee账号到微信公众号

需要绑定Gitee账号到微信公众号，否则最后一步reload pages自动部署Gitee Pages会登录失败，原因是需要短信验证；绑定公众号后则不需要短信验证；其他问题解决可以参考gitee-pages-action

Ⅶ、自动发布

将Hugo生成的工程文件整体提交到GitHub Pages工程master分支；
查看Actions执行结果完成后，GitHub和Gitee Pages已自动部署完成；

image

四、后续使用

在Typora完成文章编写后，一键上传所有图片到Gitee图床，拷贝发布到，然后提交到GitHub repo master分支，即可自动部署到GitHub和Gitee Pages；

结束

以上就是我利用GitHub-Actions将Hugo博客自动发布到GitHub和Gitee Pages，希望可以帮助大家快速构建自己的个人网站；后边我会继续完善我的第二大脑系统的构建思路和方法。

利用GitHub-Actions将Hugo博客自动发布到GitHub和Gitee Pages

简介

一、流程设计

二、环境准备

Ⅰ、Typora配置

1、Typora基本配置

2、使用Typora+picgo-core+gitee实现图床功能

Ⅱ、Git配置

1、Git下载安装

2、基本配置

3、配置公钥到github

4、配置公钥到gitee；

Ⅲ、Hugo安装配置

1、安装

2、生成博客

3、主题下载

4、主题配置

5、主题修改

6、快速复制当前配置

7、配置评论功能

8、Hugo常用命令

Ⅳ、Obsidian配置

三、实现方案

Ⅰ、GitHub和Gitee Pages配置

Ⅱ、GitHub同步到Gitee鉴权私钥配置

Ⅲ、GitHub仓库代码更新Token配置

Ⅳ、配置Gitee密码到Github用于自动部署Gitee Pages工程

Ⅴ、编写Actions脚本

Ⅵ、绑定Gitee账号到微信公众号

Ⅶ、自动发布

四、后续使用

结束

你可能感兴趣的:(利用GitHub-Actions将Hugo博客自动发布到GitHub和Gitee Pages)