简介
现在个人博客通常有比较多的选择，如果不想要自己购买服务器实现静态博客的发布，可以在简书、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文件夹里，方便后续管理与转移。
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为博客的目录名，可以修改为你自己想取的名字，生成的目录如下：
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下文件进行修改：
-
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配置 - 将插入评论代码加到主题模板中：
<script src="https://utteranc.es/client.js"
repo="qz757/qz757.github.io"
issue-term="title"
theme="preferred-color-scheme"
crossorigin="anonymous"
async>
</script>
这是当前最简单的配置方法， 也可以在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，所有配置结果如下：
Ⅴ、编写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: "git@github.com:qz757/qz757.github.io.git"
# 目标仓库
destination-repo: "git@gitee.com: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，希望可以帮助大家快速构建自己的个人网站；后边我会继续完善我的第二大脑系统的构建思路和方法。
