在写该文章时,博客部署的流程不断改变,所以,该文章的部署流程有点混乱。 现在我的博客部署流程是:在本地将Hexo项目源码git push到Gitee,Gitee自动git push到GitHub的仓库,GitHub Actions监测到仓库变化,自动构建Hexo(hexo clean && hexo g),同时,将/public文件夹下的文件同步到我的服务器,更新博客文章。

前言

我博客原本是部署在GitHub Pages上的,由于8月份由于Leancloud不支持评论数据在国内访问了,刚好618买了个服务器一直在吃灰,趁着国庆有时间就折腾一下,把博客迁移到服务器上吧,顺便把评论也搞一下。

2022-10-20追更:

前面已经将本地的/public/部署到服务器了,但是总感觉不够好,不能实时备份我的文件,万一哪天电脑崩了(暑假我的硬盘就突然崩了 🥚 )。并且每次都要在自己电脑hexo g && hexo g && hexo d,还是不方便,都有服务器了,为什么还要在自己电脑编译,直接丢在服务器编译不就好了,但我的服务器就2G,试了一下jenkins,一下内存就剩800m,jenkins还卡卡的,如果哪天没有随身带电脑也想写一下文章,就很不方便,但如果将博客的源码都放在GitHub仓库上,下次想异地写博客,直接Git pull,岂不是美滋滋?GitHub还有个Action ,简直2就一大神器好吧,马上动手。

大概思路:在本地git push到GitHub的私有仓库(保证安全性),然后使用GitHub Action自动化构建hexo,构建完自动将/public目录下的静态资源同步到我的服务器上面(文章在最后面)

本机环境

NodeJs 版本是LTS16.17.0版本

win10专业版 21H2

1
2
3
4
> node -v
v16.17.0
> npm -v
8.15.0

服务器环境

服务器系统为:Ubuntu20.04

使用的是华为云服务器

1
2
root# uname -r
5.4.0-100-generic

01服务器版本

环境配置

既然是将hexo部署到服务器了,你应该也使用过hexo了,你的hexo应该也是可以正常使用的,正常使用,在本地Git、NodeJs、hexo-cli也安装了。

在教程开始前,我默认你会一点基本的Linux知识、简单的Git拉取知识、nginx相关的知识、还有自学能力,遇到错误应该会主动Google搜索,而不是到处找同学问。如果你一点都不会Linux,Git的简单使用,nginx也没有了解过,我建议你先去快速了解一些再来看这个教程。如果你不想去了解的话,跟着教程走也是没问题,过程可能会遇到一点小问题,Google一下也是可以解决的。

整体思路:在win10写好文章后,使用Git将博客文章push到服务器上的Git仓库,同时,Git仓库实时同步静态资源到指定另一个文件夹下,用于对外展示博客文章。

安装Nginx

下载nginx

前往官网下载

我这边是在win10下载nginx安装包,然后上传到服务器上的

01下载Nginx

win10上传文件到服务器

1
2
#scp 文件名称 root@你的服务器IP地址:服务器保存地址
scp nginx-1.22.0.tar.gz root@192.168.232.130:/opt/

解压文件

1
tar -zxvf nginx-1.22.0.tar.gz

安装依赖

更新包

1
sudo apt-get update

安装依赖

1
sudo apt -y install gcc make libssl-dev zlib1g-dev libgd-dev libgeoip-dev libpcre2-dev libpcre3-dev

开始安装nginx

进入nginx目录

1
cd /opt/nginx-1.22.0

安装SSL模块

1
./configure --prefix=/usr/local/nginx --with-http_ssl_module

编译安装

1
make && make install

启动nginx

1
/usr/local/nginx/sbin/nginx

浏览器输入你的IP地址

出现如下说明Nginx安装成功了

03Nginx

重点注意:Nginx的安装目录在/usr/local/nginx,配置文件在/usr/local/nginx/conf/nginx.conf

安装Git

进入root用户

安装软件有时候需要root的权限,所以,一开始就使用root权限,不容易出错。

1
su

00进入root

更新包

1
apt-get update

01apt-get更新包

安装Git

1
apt install git

02安装Git

查看Git安装版本

1
git --version

新建Git用户

新建一个Git用户,用于给我的win10写文章时使用git推送文章到我的服务器上

新建用户

1
adduser git

03新建Git用户

配置Nginx

新建静态资源文件夹

切换到git用户

1
su git

hexo这个文件夹用于存放博客对外开放的静态资源

新建hexo文件夹

1
mkdir -p /www/git/hexo

给hexo文件夹分配权限

1
chmod -R 755 /www/git/hexo

新建index.html

这个index.html文件用于等会测试nginx指向这个文件夹是否成功

1
echo "nginx-->succeed" > /www/git/hexo/index.html

配置nginx

编写nginx.conf文件

每一个语句后面都需要加分号;

并且每一行语句都要对齐

在nginx.conf文件内,添加一个server块,监听80端口,指向刚刚新建的hexo目录。

nginx.conf文件内,已经有一个server是监听80端口的,你可以将他改一下root的值,或者直接删掉、注释,然后重新添加一个server块,如我下面写的。

1
vim /usr/local/nginx/conf/nginx.conf

添加内容如下:

1
2
3
4
5
server {
listen 80;
server_name localhost;
root /www/git/hexo;
}

重启nginx

1
/usr/local/nginx/sbin/nginx -s reload

02重启nginx

如果重启报错,显示某一行出错了,那你去看一下报错的那行有没有什么语法错误,一般是语句后面没有添加;号造成的,或者是监听的端口有重复了,你可以去Google查一下错误是因为什么,或者你在文章下留言也可以。

查看是否配置成功

1
你的服务器公网IP地址

如果出现了页面说明已经配置成功了,如果没有出现,可能是哪里出错了。

03查看nginx是否成功

  1. 错误一:服务器安全组没有开启80端口(这个要去华为云官网控制台的安全组开放80端口)
  2. 错误二:Ubuntu服务器自带的是UFW防火墙,防火墙没有开放80端口导致外网访问失败。
  3. 错误三:在/www/git/hexo/index.html文件不存在,在nginx指向的目录不对,需要查看index.html文件是否存在,再查看nginx.conf配置是否正确,nginx.conf位于/usr/local/nginx/conf/nginx.conf
  4. 其他错误没有一一列出来

推送到服务器(已弃用)

弃用原因:该方法需要在本地hexo g && hexo d,不够懒,所以寻找一个更懒的方式。

实现流程

在本地 编写完文章,本地hexo cl && hexo g && hexo d,然后自动将public文件夹下的文件推送到服务器的Git仓库,服务器的Git仓库收到推送,自动检出public文件夹的内容到/www/git/hexo文件夹,Nginx静态部署。

缺点

至此一个简单的部署流程就是这样了,存在的缺点就是,需要在本地构建文章再部署到服务器。都有服务器了,为什么还要在自己电脑上构建呢?肯定有更方便的,比如:

  1. 服务器安装一个NodeJs,在服务器构建
  2. 或者在GitHub Actions构建
  3. 又或者在服务器安装Jenkins持续构建,使用Jenkins

配置Git仓库

进入git用户

1
su git

新建Git仓库

进入/home/git

1
cd /home/git

初始化hexo.git仓库

我这边选择在/home/git/下新建仓库,并且仓库名为hexo.git

1
git init --bare hexo.git

查看hexo仓库权限

1
ll

新建完仓库后,一定要看一下仓库的权限是不是属于git用户的,如果你是实验root用户新建仓库的,你需要将仓库的权限分配给git用户,否则后面会出错

1
chown -R git:git hexo.git

01新建git仓库

新建一个自动化钩子

新建post-receive文件

1
touch /home/git/hexo.git/hooks/post-receive

给post-receive添加执行权限

1
chmod +x /home/git/hexo.git/hooks/post-receive

编辑post-receive文件

1
vim /home/git/hexo.git/hooks/post-receive

在内添加如下内容:

1
2
3
4
5
# 指定我的代码检出目录
DIR=/www/git/hexo
git --work-tree=${DIR} clean -fd
# 直接强制检出
git --work-tree=${DIR} checkout --force

内容表示,将Git仓库的内容实时同步到/www/git/hexo文件夹下

修改win10博客Git配置

修改win10的博客根目录配置

打开_config.yml

02修改博客根目录配置

将url改为你的公网IP地址

1
http://{公网IP地址}

03url

修改git地址

修改deploy下的repo地址

1
2
#格式 仓库拥有者@公网IP地址:仓库在服务器的路径
git@公网IP地址:/home/git/hexo.git

04deploy

使用ssh免密码部署

进入git用户

1
su git

生成秘钥

1
ssh-keygen -t rsa

05生成服务器秘钥

进入.ssh文件夹

1
cd /home/git/.ssh/

新建authorized_keys文件

1
touch authorized_keys

编辑authorized_keys文件

1
vim authorized_keys

将win10下的id_rsa.pub复制到authorized_keys里面

win10的公钥在 C:\Users\xxx\.ssh

06复制win10公钥

07操作过程

正式部署win10博客文件到服务器

删除.git文件夹

删除博客根目录下的.git文件夹

08删除win10下的git文件夹

初始化本地仓库

在博客根目录下打开Git Bash Here

1
git init

09初始化本地仓库

部署文件到服务器

到这里,我们可以使用像我们以前那样,部署到GitHub pages一样的命令,使用hexo clean && hexo g && hexo d都是可以的。

1
hexo clean && hexo g && hexo d

10部署成功

如果在部署这步出现的出错,先看看错误内容是什么,看看是不是文章渲染出错,还是Git部署的错误,注意看清除。

打开服务器查看部署内容

1
ls /www/git/hexo

11hexo发布成功

使用外网IP查看

1
http://公网IP地址

在浏览器输入IP地址查看,这里注意输入的是http,不是https

12IP查看

如果你这里显示连接超时,你可以看看防火墙是否开启80端口

如果你不会用ufw防火墙,可以看这篇文章Linux防火墙

13连接超时

GitHub实时同步到服务器

上面说到,直接在本地hexo d推送public文件夹下的HTML文件到服务器不够方便,那还有什么方式比较方便,可以更懒的吗?

答案是:有的,我们可以在GitHub上持续构建我们的博客,我们可以在本地电脑上将Hexo博客的整个源码文件都推送到我们的GitHub仓库,然后Github仓库检测仓库更新,就自动执行action操作,自动构建HTML,构建结束推送public文件夹下的HTML文件到服务器,这样就可以完成自动构建。

这样我们每次在本地电脑写完文章后,我们只需要push到服务器就好了。

进入本地Hexo根目录下,

前言

追更,一切都是为了更懒 🙈

在这之前,你应该对Git掌握了一些基本的了解了,并且你的PC也可以通过SSH远程你的服务器,我们如何实现这一功能呢?我们使用GitHub Actions,通过GitHub Actions安装和我们本地一样Hexo,并且生成新的HTML文件,然后将新的HTML文件推送到我们的服务器上。

准备

新建一个空白的GitHub 私有仓库,保证安全性,这个仓库只存放自己的博客源码,还支持异地写博客,对于Hexo这鸡肋基本可以解决了。

绑定远程仓库到本地

打开本地hexo博客根目录,输入以下命令:

1
2
3
4
git remote -v                 # 如果有远程仓库链接,删掉之前的远程连接
git remote remove orign # 删除orign仓库绑定
git remote add origin 仓库地址 # 重新添加远程仓库地址,该地址是新建仓库的SSH地址
git remote -v # 查看新添加的远程地址,看看是否是你新添加的地址

如果以上操作失败,也可以直接移走博客根目录下的.git文件夹(移动到其他地方,还可以恢复),移走文件夹后重新添加远程链接就可以正常添加了。

1
2
git init
git remote add origin 仓库地址 # 重新添加远程仓库地址,该地址是新建仓库的SSH地址

推送源码到GitHub仓库

1
2
3
git add . # 将当前目录下的文件添加到缓冲区
git commit -m "first commit" # 将缓冲区的文件添加到本地仓库
git push origin main # main是分支名,将本地仓库推送到GitHub仓库

git push origin main有时候会因为网络原因导致错误,多执行几次就好了。

推送完打开GitHub新建的仓库刷新一下,看看是否有文件以及添加到了。

新建Actions secrets

Repo--->Settings--->Secrets--->Action--->New repository secrets

01-Actions secrets 20221030-486

我们需要新建几个Secrets的值:

  • secrets.PATH:服务器的文件存放绝对路径
  • secrets.DOMAIN:服务器域名或者IP地址
  • secrets.EXPORT:ssh远程端口(如果没修改过ssh远程端口,默认是22)
  • secrets.USER:使用ssh登录的用户
  • secrets.PC_PRIVATE_KEY:本机电脑的私钥(私钥存储位置可看下文)

02-Actions secrets 20221030-906

本机电脑的私钥在C:\Users\UserName\.ssh\id_rsa

03-snipaste_20221030_132602

编写GitHub Action文件

在本机博客根目录下新建/.github/workflows\autodeploy.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
name: 自动部署
# 当有改动推送到master分支时,启动Action
on: # 触发该actions
push: # 当提交时触发该事件
branches: # 指定提交到某分支才触发事件
- main # 指定提交到main分支触发事件
#2020年10月后github新建仓库默认分支改为main
release:
types:
- published

jobs:
deploy:
runs-on: ubuntu-latest # 该actions运行的环境,这里指定在Ubuntu系统环境下运行
steps:
- name: 检查分支
uses: actions/checkout@v2
with:
ref: main

- name: 安装 Node
uses: actions/setup-node@v1
with:
node-version: "12.x"

- name: 安装 Hexo
run: | # 在控制台运行的shell指令
export TZ='Asia/Shanghai'
npm install hexo-cli -g

- name: 缓存 Hexo
uses: actions/cache@v1
id: cache
with:
path: node_modules
key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

- name: 安装依赖
if: steps.cache.outputs.cache-hit != 'true'
run: | # 在控制台运行的shell指令
npm install --save

- name: 生成静态文件
run: | # 在控制台运行的shell指令
echo "开始清除html文件"
hexo clean
echo "开始生成html文件"
hexo generate

- name: 部署到Github page分支 # 如果你只是想部署到服务器,那就删掉这部分
uses: JamesIves/github-pages-deploy-action@v4
with:
token: ${{ secrets.TOKEN_HUB }} # GitHub的token,需要勾选两个权限,repo和ad_hook
repository-name: ${{ secrets.REPO }} # 仓库名,比如我的仓库 0000rookie/Repo
branch: page #部署到这个上面的仓库main分支
folder: public # 将public文件夹下的内容推送到上面的分支
commit-message: "${{ github.event.head_commit.message }} Updated By Github Actions"

- name: 部署到服务器 # 如果你只是想部署到GitHub仓库某个分支,那就删掉这部分
uses: burnett01/rsync-deployments@4.1
with:
# 这里是 rsync 的参数 switches: -avzh --delete --exclude="" --include="" --filter=""
switches: -avzh
path: public/ # 将public文件夹同步到服务器下的 PATH 路径
remote_path: ${{ secrets.PATH }} #服务器的文件存放绝对路径
remote_host: ${{ secrets.DOMAIN }} #服务器域名或者IP地址
remote_port: ${{ secrets.EXPORT }} # ssh远程端口(如果没修改过ssh远程端口,默认是22)
remote_user: ${{ secrets.USER }} # 使用ssh登录的用户
remote_key: ${{ secrets.PC_PRIVATE_KEY }}

部署到服务器

如果你只是需要部署到服务器,不需要部署到GitHub仓库某个分支,你可以删除部署到GitHub 仓库的那部分的代码部署到Github page分支

需要修改的内容:

  • PATH:服务器的文件存放绝对路径
  • DOMAIN:服务器域名或者IP地址
  • EXPORT:ssh远程端口(如果没修改过SSH远程端口,默认是22)
  • USER:使用SSH登录的用户
  • PC_PRIVATE_KEY:本机电脑的私钥
1
2
3
4
5
6
7
8
9
10
11
- name: 部署到服务器
uses: burnett01/rsync-deployments@4.1
with:
# 这里是 rsync 的参数 switches: -avzh --delete --exclude="" --include="" --filter=""
switches: -avzh
path: public/ # 将public文件夹同步到服务器下的 PATH 路径
remote_path: ${{ secrets.PATH }}
remote_host: ${{ secrets.DOMAIN }}
remote_port: ${{ secrets.EXPORT }}
remote_user: ${{ secrets.USER }}
remote_key: ${{ secrets.PC_PRIVATE_KEY }}

部署到GitHub 仓库的page分支(已弃用)

如果你只是需要部署到GitHub仓库某分支,不需要部署到服务器,你可以删除部署到服务器的那部分的代码部署到服务器

需要修改的内容:

  • secrets.TOKEN_HUB:GitHub的token,需要两个权限,repo,和workflow、 admin:repo_hook
  • secrets.REPO:GitHub仓库的名,需要带上用户名,比如:用户名/仓库名
1
2
3
4
5
6
7
8
- name: 部署到Github page分支 # 如果你只是想部署到服务器,那就删掉这部分
uses: JamesIves/github-pages-deploy-action@v4
with:
token: ${{ secrets.TOKEN_HUB }} # GitHub的token,需要勾选两个权限,repo和ad_hook
repository-name: ${{ secrets.REPO }} # 仓库名,比如我的仓库 0000rookie/Repo
branch: page #部署到这个上面的仓库main分支
folder: public # 将public文件夹下的内容推送到上面的分支
commit-message: "${{ github.event.head_commit.message }} Updated By Github Actions"

设置忽略推送文件

在Hexo根目录下找到.gitignore文件,如果没有,创建一个,并且写入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
.DS_Store
Thumbs.db
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/butterfly/.git
deploy.sh
deploy.txt
.vscode

上面的内容表示:.gitignore写上的都不推送到GitHub仓库,忽悠掉这些文件。

最重要一点要将node_modules文件夹加入到.gitignore,因为node_modules文件夹真的太大了。

重新推送源码

1
2
3
git add .
git commit -m "add workflows :construction_worker: "
git push origin main

查看GitHub Action

如果没有看到红X说明已经部署成功了,这时候去服务器看看对应存放目录,看看文件有没有更新了。

查看GitHub Action

进阶

因为一些特殊原因,我们每次提交代码到GitHub仓库,经常会碰到网络不佳的情况,经常提交失败,Gitee有个镜像仓库功能,可以实时对GitHub仓库进行push或pull,这个功能非常实用,我们可以使用Gitee作为仓库中转站,我们可以每次提交到Gitee,然后Gitee自动将我们的代码push到GitHub,因为Gitee在国内,提交的速度也会快很多。

实际操作可参考我另一篇文章:https://blog.hikki.site/bdd9dd56.html

至2023/03/31日后,Gitee镜像功能失效了,后续不知道会不会重新开放,你可以试一下看看能不能正常使用。

给博客添加域名

打开域名商

我是在万网购买的域名,打开控制台,找到域名列表

01解析

添加解析记录

  • 记录类型:A
  • 主机记录:www
  • 记录值:填你的服务器IP

02域名解析www

添加解析记录

  • 记录类型:CNAME
  • 主机记录:@
  • 记录值:www.域名

03域名解析

启用解析

添加完后需要手动启用一下解析,选中刚刚添加的解析记录,然后启用

04启用解析

查看是否解析成功

在浏览器打开你的域名看看是否可以在正常打开,一般启用解析1分钟左右就可以正常访问了,如果访问失败,重新启用解析,如果还是不行,你需要检查一下IP访问博客是否正常,如果IP访问正常,那可能是延迟的原因,如果IP访问失败,那就是你的博客还没部署好,你需要重新看看上面的内容。

使用Twikoo作为评论(没有SSL)

我这里使用8000端口作为twikoo入口,在安装twikoo之前,需要开放8000端口测试

我使用的是Ubuntu,自带UFW防火墙,开放8000端口:ufw allow 8000,还需要去服务器的安全组开放入站的8000端口

运行容器

1
docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 8000:8080 -v /home/twikoo/:/app/data -d imaegoo/twikoo

参数介绍:

  • --name:容器名称
  • -e:设置环境变量,可无视
  • -p:端口映射,主机端口:容器端口
  • -v:数据映射,将twikoo的所有评论相关的数据挂载到/home/twikoo/
  • -d:表示后台运行
  • imaegoo/twikoo:你要拉取的镜像名称

查看容器

运行docker ps看到如下情况,说明运行成功了。

1
2
3
root# docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
2bd30e7045b1 imaegoo/twikoo "docker-entrypoint.s…" 13 days ago Up 25 hours 0.0.0.0:8000->8080/tcp, :::8000->8080/tcp twikoo

查看twikoo是否正常运行

在浏览器打开http://域名:8000,如果返回以下的内容,说明twikoo已经部署成功了

1
2
3
4
5
{
"code":100,
"message":"Twikoo 云函数运行正常,请参考 https://twikoo.js.org/quick-start.html#%E5%89%8D%E7%AB%AF%E9%83%A8%E7%BD%B2 完成前端的配置",
"version":"1.6.7"
}

在博客根目录下配置twikoo

我使用的是butterfly主题,在主题目录下的_comfig.yml配置文件添加envId即可

1
2
3
4
5
twikoo:
envId: http://IP地址:8000
region:
visitor: true
option:

部署到博客上

1
hexo clean && hexo g && hexo d

博客测试留言

首次打开博客的留言系统,需要注册,第一个注册的用户是管理员,必须记好密码,如果忘记了,删除twikoo容器内的/data/db.json.1文件内的ADMIN_PASS的参数即可。

配置SSL证书安装twikoo

由于有些浏览器会拒绝HTTPS网址的HTTP连接,导致我们的twikoo会访问失败,浏览器觉得你这个是HTTPS的网址,有HTTP链接会不安全,自动给你拒绝访问了,用户就用不了评论了。但是twikoo又不支持HTTPS,但我们可以通过Nginx反向代理来实现,请求使用HTTPS,通过Nginx反向代理转发到HTTP,实际访问的是HTTP请求,这样就可以啦。

我这里使用二级域名来反向代理到服务器的8080端口

申请二级域名

具体怎么申请证书可以查看这篇文章:

申请acme.sh免费证书

在解析记录的时候建议主机记录填写twikoo,这样二级域名就是twikoo.域名。比如我的域名是hikki.site,解析记录填写twikoo,那二级域名就是twikoo.hikki.site

Nginx配置

安装SSL证书 & 反向代理

在申请证书的时候,我已经将证书保存到/usr/local/nginx/conf/cert/one.hikki.site/下,因此这里使用的相对路径。

由于twikoo不支持https,只能使用http,我们将https反向代理为http

我这里的twikoo使用的docker安装的,入口是8000端口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# docker twikoo评论系统
server {
listen 80;
server_name twikoo.hikki.site;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl;
server_name twikoo.hikki.site;
# cert/twikoo.hikki.site 这个路径是相对路径,相对路径是根目录是nginx.conf这个文件所在的目录
ssl_certificate cert/twikoo.hikki.site/cert.pem;
ssl_certificate_key cert/twikoo.hikki.site/key.pem;

location / {
proxy_pass http://127.0.0.1:8000;
}
}

加载Nginx配置

检查是否有语法错误

该指令是检测刚刚编写的nginx.conf文件是否有语法错误,在每次编辑完改文件是,应该养成习惯检测一下是否有语法错误,预防nginx出现异常。

如果有错误,改正错误再下一步加载配置

1
/usr/local/nginx/sbin/nginx -t

加载配置

加载配置没有出现异常,就可以去博客留言试一下了。如果可以访问正常就可以了。

1
/usr/local/nginx/sbin/nginx -s reload

检查是否成功

在浏览器打开博客,按F12打开开发者工具,看看这个twikoo.你的域名请求是否返回状态码200,如果是,说明成功了。

如果是其他了,你应该回到上面,检查是哪一个步骤少了。

01检查博客请求是否正常

又拍云图床配置加速域名并改为https

又拍云有免费的SSL证书可以申请,可以直接去申请就可以使用

申请证书

打开SSL证书

01打开SSL证书

申购证书

02申购证书

选择证书

03选择证书

补全证书信息

04配置域名

选择证书信息

  • 域名:这个加速域名可以是二级域名,也可以是已经备案的域名,我顶级域名hikki.site已备案,我这里使用的二级域名
  • 加密算法:选择``RSA`

05填写加速域名

DNS解析

07

在DNS域名商进行域名解析

  • 主机记录:images
  • 记录类型:CNAME
  • 记录值:记录值是你的云存储服务的CNAME

08域名解析

09CNAME

配置https

10配置https

开启https

11开启https

管理该云存储证书

12管理证书

查看证书

13查看证书

选择加速域名

14选择加速域名

预览云存储图片

在云存储管理预览一下图片,看到地址框已经是自己的加速域名了,并且是带有https的,说明已经配置好了。

博客更新发送邮件

我的博客用的是Hexo静态博客框架,我的博客更新流程是,在本地写文章,推送本地项目到Gitee,Gitee再git push到GitHub,再配合GitHub Actions编译文件,再同步/public文件夹的内容到我的服务器上,虽然流程有点复杂,但可以多个备份,保证数据的安全性。

那么问题来了,有时候会hexo g会因为语法一些问题,导致hexo g编译失败,GitHub不会通知我啊,服务器也不会通知我啊,那怎么办?

GitHub Actions这么强大,简简单单发个邮件,不在话下啦,马上安排一下。

在上面,我们已经用GitHub Actions实现了不少的工作流,自动化编译、自动化将编译后的HTML同步到服务器,现在我们再加一个工作流,在最后面加上一个发送邮件,GitHub Actions的在工作流是从上往下执行的,如果在上面的某一步执行出错,则下一步不会执行到,我们将发送邮件放在最后一步,如果上面的步骤都执行成功,则发送邮件。

通过简单的几步,我们就可以实现每一次更新博客,都可以通过邮件提醒。

添加工作流

**在Hexo博客根目录下的/.github/workflows/autodeploy.yml**文件最后添加如下字段,表示最后一步执行发送邮箱。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- name: 发送邮件
uses: dawidd6/action-send-mail@v2
with:
server_address: smtp.163.com # 发送端的服务器地址
server_port: 465 # 发送端服务器的端口号
# 不知道发送服务器地址和端口号看这篇文章 https://blog.hikki.site/dd7ff60b.html
# 账号 授权码
username: ${{secrets.EMAIL_USERNAME}} # 发送的邮箱号(发送端)
password: ${{secrets.EMAIL_PASSWORD}} # 发送的邮箱授权码(发送端)
subject: ${{secrets.EMAIL_TITLE}} # 邮件内容标题
body: ${{secrets.EMAIL_BODY}} # 邮件内容,支持HTML
to: ${{secrets.EMAIL_TO}} # 接收邮件账号(接收端)
from: ${{secrets.EMAIL_FROM}} # 发送的邮箱号(发送端)
content_type: text/html

到目前为止完整的工作流:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
name: Hexo自动部署
# 当有改动推送到master分支时,启动Action
on: # 触发该actions
push: # 当提交时触发该事件
branches: # 指定提交到某分支才触发事件
- main # 指定提交到main分支触发事件
#2020年10月后github新建仓库默认分支改为main,注意更改
release:
types:
- published

jobs:
deploy:
runs-on: ubuntu-latest # 该actions运行的环境,这里指定在Ubuntu系统环境下运行
steps:
- name: 检查分支
uses: actions/checkout@v2
with:
ref: main

- name: 安装 Node
uses: actions/setup-node@v1
with:
node-version: "16.x"

- name: 安装 Hexo
run: |
export TZ='Asia/Shanghai'
npm install hexo-cli -g

- name: 缓存 Hexo
uses: actions/cache@v1
id: cache
with:
path: node_modules
key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

- name: 安装依赖
if: steps.cache.outputs.cache-hit != 'true'
run: |
npm install -g npm
npm install --save

- name: 生成静态文件
run: |
echo "开始清除html文件"
hexo clean
echo "开始生成html文件"
hexo generate


- name: 部署到服务器
uses: burnett01/rsync-deployments@4.1
with:
# 这里是 rsync 的参数 switches: -avzh --delete --exclude="" --include="" --filter=""
switches: -avzh
path: public/ # 将public文件夹同步到服务器下的 PATH 路径
remote_path: ${{ secrets.PATH }} #服务器的文件存放绝对路径
remote_host: ${{ secrets.DOMAIN }} #服务器域名或者IP地址
remote_port: ${{ secrets.EXPORT }} # ssh远程端口(如果没修改过ssh远程端口,默认是22)
remote_user: ${{ secrets.USER }} # 使用ssh登录的用户
remote_key: ${{ secrets.PC_PRIVATE_KEY }}

- name: 发送邮件
uses: dawidd6/action-send-mail@v2
with:
server_address: smtp.163.com # 发送端的服务器地址
server_port: 465 # 发送端服务器的端口号
# 不知道发送服务器地址和端口号看这篇文章 https://blog.hikki.site/dd7ff60b.html
# 账号 授权码
username: ${{secrets.EMAIL_USERNAME}} # 发送的邮箱号(发送端)
password: ${{secrets.EMAIL_PASSWORD}} # 发送的邮箱授权码(发送端)
subject: ${{secrets.EMAIL_TITLE}} # 邮件内容标题
body: ${{secrets.EMAIL_BODY}} # 邮件内容,支持HTML
to: ${{secrets.EMAIL_TO}} # 接收邮件账号(接收端)
from: ${{secrets.EMAIL_FROM}} # 发送的邮箱号(发送端)
content_type: text/html

添加Secret

发送邮箱时,我们需要几个参数,发送邮箱的账号、发送邮箱的账号密码、接收端的账号等等,因为这些信息都是私人信息,不宜公开,我们需要定义几个Secret来保证安全。

需要注意的是,我们不使用邮箱的密码,而是使用邮箱的授权码,如果你不知道怎么获取邮箱授权码,可以看这篇文章,https://blog.hikki.site/41eebd45.html#配置发送邮箱地址

我们需要新建以下6个Secret,值根据你的情况填写,可以参照我的案例

发送邮箱:aa134***54@163.com

接收邮件的邮箱:134***56@qq.com

  • EMAIL_USERNAME:aa134***54@163.com
  • EMAIL_PASSWORD:fgew***weg
  • EMAIL_TO:134***56@qq.com
  • EMAIL_FROM:aa134***54@163.com
  • EMAIL_TITLE:博客更新成功
  • EMAIL_BODY<h1>博客成功成功</h1>

部署成功

完成以上就可以测试了,在本地重新git push一下,等待Gitee同步资源到GitHub,在GitHub观察Actions的更新情况即可。

到目前为止,博客的工作模式也稳定下来了。

02-博客工作流程图-20230104-766

部署到服务器,虽然中转了两次,速度稍微慢了些,但我觉得影响不大,更新慢一点无所谓。这样部署的好处是,多备份,可以实现异地写博客。

Hexo的缺点就是要异地写博客很麻烦,需要本地配置NodeJS可以,但使用我这个模式,就不需要本地有NodeJS环境了,直接将Gitee或者GitHub的仓库git pull到本地,新增文章或则修改文章,再git push到GitHub,GitHub Actions会自动帮我编译,就不需要经过本地编译这一步流程,从而可以减少本地配置NodeJs环境。

Hexo常用的脚本文件

下面的几个脚本文件是我自己写的,比较简陋,将就着用,下面的脚本文件,需要放在Hexo根目录下才能保证正常使用,为了方便,你可以创建一个脚本快捷方式放在电脑桌面。

新建草稿

1
2
3
4
5
6
7
8
#!/bin/bash
# 这是发布文章的脚本
# Author: 小码同学
# 博客: https://blog.hikki.site

echo "请输入草稿标题:"
read title
hexo new draft $title

使用方式

在博客根目录创建一个新建草稿.sh文件,将以上内容写入到新建草稿.sh文件即可。

新建文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#!/bin/bash
# 这是新建文章的脚本
# Author: 小码同学
# 博客: https://blog.hikki.site

echo "请输入文章标题:"
read title
echo "请输入文章存储位置:"
read path

echo "你的文章标题为:$title,位置为:$path"
cd $(pwd)
if [ $path = ""]
then
hexo new $title -p $title.md
else
hexo new $title -p $path/$title.md
fi

使用方式

在博客根目录创建一个新建文章.sh文件,将以上内容写入到新建文章.sh文件即可。

自定义新建文章模板

有时候,我们需要自定义一个新建文章的模板,比如我学习算法,文章基本都是固定的写法,就自己创建了一个模板。

新建模板

在Hexo根目录下\scaffolds文件夹,新建一个算法.md文件,写入以下内容:

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
---
title: 【数据结构】{{ title}}
tags:
- 算法
date: {{ date }}
cover: https://images.hikki.site/20230103145217.png
---

# 题目


**提示:**

# 示例

**示例1:**

```java

```

**示例2:**

```java

```


本文章来源于我的博客:https://blog.hikki.site

新建算法模板

1
2
3
4
5
6
7
8
9
10
11
#!/bin/bash
# 这是发布算法文章的模板脚本
# Author: 小码同学
# 博客: https://blog.hikki.site

echo "请输入文章标题"
read title
site=【数据结构】
path=计算机科学/算法之路/数据结构/$site$title.md
cd $(pwd)
hexo new 算法 -p $path $title
  • path:是文章存储的位置,你可以根据自己的情况修改,默认存储在_post/计算机科学/算法之路/数据结构/下。

使用方式

在博客根目录创建一个新建算法.sh文件,将以上内容写入到新建算法.sh文件即可。

推送Hexo到GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
cd /G/FILE/FileSave/图片素材/博客/
echo "备份博客素材到Gitee--->GitHub"
git add .
git commit -m "update 图片素材"
sleep 1 # 睡眠1秒
git push origin source

cd /e/Blog/Hexo
echo "添加文件到缓冲区"
git add .
echo "将缓冲区文件提交到本地仓库"
git commit -m "update article"
sleep 1 #睡眠1秒
echo "推送文件到Gitee仓库"
git push ee main

sleep 1 #睡眠1秒
echo "推送hugo"
cd /e/Blog/Hugo
git add .
echo "将缓冲区文件提交到本地仓库"
git commit -m "update hugo"
sleep 1 #睡眠1秒
git push hugo hugo

描述

cd /G/FILE/博客素材/:进入到博客素材文件夹推送文件到GitHub仓库

cd /e/Blog/Hexo:进入Hexo根目录,将Hexo根目录全部文件推送到GitHub

cd /e/Blog/Hugo:进入Hugo,推送文件到GitHub

需要注意的是:GitHub的每个仓库都有限制大小,据我了解,一个仓库最大应该是1G。

可能会出现的错误

在提交过程每次都要输入密码

原因

可能是你有刷新过你的id_rsa.pub导致你服务器上的公钥和本地的不一样了。

解决方法

将本地的公钥复制到服务器即可。

01复制本机的公钥

复制到/home/git/.ssh/authorized_keys

02将公钥粘贴到authorized_keys

文章参考