渊澄YC

川流不息,渊澄取映

经过上一篇的步骤之后,我们已经可以将我们的HEXO站点发布到GitHub上了,并且可以正常访问。但是我们每次更新文章以及站点配置的时候必须先在本地进行编译、然后再部署到GitHub上,也就是每进行一次修改,必须执行以下命令

1
2
3
hexo g
hexo clean
hexo d

那有没有一种方法就是,系统检测到我们发布了新文章,然后自动进行程序的编译和发布呢?
今天部署的这个GitHub Action服务就是解决这个问题的。在上一篇文章中我们在 GitHub上还新建了一个私人仓库,我们今天用这个私人仓库来进行操作。

1.修改本地文件

删除主题文件夹下隐藏的.git文件夹

删除hexo根目录下的.deploy_git文件夹

这两个是我踩过的坑,因为主题文件和hexo deploy git工具是git clone到本地的,所以如果直接上传到GitHub仓库的话,只会上传一个空的指针文件夹,之后进行自动化编译的时候会报错,所以必须删除本地的.git相关信息。

2.将本地HEXO源文件推送到私人仓库

在hexo文件夹中初始化hexo

1
2
hexo init
git init

关联远程仓库

1
git remote add origin [email protected]:miaoyanginfo/hexo-action.git

和远程仓库进行一个同步

1
git pull --rebase origin main

将本地文件添加到暂存库

1
git add .

添加注释

1
git commit -m "init repo"

推送到GitHub私人仓库

1
git push -u origin main

如果一切顺利的话,我们就会在GitHub的私人仓库中看到我们PUSH上去的HEXO文件夹和文件。

3.生成并部署deploy公钥和密钥

定位到本地hexo文件夹运行以下命令创建deploy key:

1
ssh-keygen -f github-deploy-key -C "HEXO CD"

运行完成之后会在hexo根目录下生成github-deploy-key和github-deploy-key.pub两个文件,一个私钥,一个公钥。
进入github我们创建的私人仓库,settings-secrets添加actions secrets。
名字输入 SSH_PRIVATE
value输入生成的github-deploy-key内容,也就是私钥的内容。

进入github我们创建的公开仓库,找到settings-deploy keys,
名字输入 HEXO_DEPLOY_PUB
内容输入github-deploy-key.pub文件内的所有内容,也就是公钥的内容。

4.创建GitHub Action文件

进入GitHub私人仓库页面,切换到Actions选项,创建一个名为deploy.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
name: Deploy                      # Actions 显示的名字,随意设置
on: [push] # 监听到 push 事件后触发
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout # 拉取当前执行 Actions 仓库的指定分支
uses: actions/checkout@v2
with:
ref: main # 注意选择私人仓库是main还是master分支

- name: Setup Node # 使用node 14
uses: actions/setup-node@v2
with:
node-version: "14"

- name: NPM INSTALL #安装依赖
run: |
npm install hexo-cli -g
npm install hexo-deployer-git --save
npm install

- name: Add KEY #这里需要提供一个ssh私钥,用你平时常用机器里的 ~/.ssh/id_rsa即可
env:
SSH_PRIVATE: ${{ secrets.SSH_PRIVATE }}
run: |
mkdir -p ~/.ssh/
echo "$SSH_PRIVATE" > ~/.ssh/id_rsa
chmod 700 -R ~/.ssh
ssh-keyscan github.com >> ~/.ssh/known_hosts
git config --global user.email "[email protected]"
git config --global user.name "miaoyanginfo"

- name: Hexo Deploy # hexo deploy 会自动build然后上传到github.io项目中
run: |
hexo clean
hexo deploy

5.测试Action是否正常运行

我们现在私人仓库/source/_posts文件夹下新建一个.md的日志文件,然后切换到Actions选项卡看下自动化执行过程是否有报错,如果运行正常的话,我们进入公开仓库,看下文件的最后修改时间是不是最近几秒钟内。
然后我们再打开我们的github站点地址,看看是不是有新日志已经发布了。

总结

经过两篇文章的操作,我们已经可以实现HEXO在GitHub上面的部署以及使用GitHub的Action功能来实现文章发布时自动编译和部署。如果在部署过程中遇到问题,欢迎和我交流。


经过三天的不断网上趴文和自我修炼,参考了众多网上大神的教程和文章,自己又填了无数个坑之后,终于成功在GitHub上部署了HEXO系统发布文章,使用GitHub Action功能自动编译HEXO程序并发布静态页面。我将用两个篇幅来记录部署过程。
第一部分介绍如何在本地部署HEXO程序,安装主题,本地预览,然后发布到Github Page。
第二部分介绍如何使用GitHub Action功能实现HEXO程序的自动编译和发布。

1.GitHub上新建仓库

登录你的Github,新建两个仓库:
一个仓库用于发布我们的HEXO站点,为了便于区分,我们在这里叫它公开仓库,新建的时候选在类型为Public,网址那里填入***.github.io,确保你可以使用域名https://***.github.com 访问到你的页面,这篇文章我们主要在这个仓库中进行操作;
另一个站点用于存放我们的HEXO程序源文件,用于和主仓库实现自动化编译和发布的联动,我们叫它私人仓库,类型选择Pravite,名称随便起,我们这里叫做hexo-action。

2.本地安装配置环境

需要安装的工具有git和node两个环境,安装包已经上传到了阿里云,大家可以自行下载。
git x64

1
https://www.aliyundrive.com/s/eWkiy8beBEj

node x64

1
https://www.aliyundrive.com/s/A6iLQPNecXt

安装完成之后在cmd窗口运行git –version及node -v 命令确保安装正确。

3.部署Github通讯密钥

我们在本地运行git bash命令窗,

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件:

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

连续回车,直到命令运行结束。
在本地用户名文件夹下会看到一个.ssh命名的文件夹,用记事本或是notepad++打开里面的id_rsa.pub文件并复制全部内容。
打开GitHub_Settings_keys 页面,新建new SSH Key,Title随便填,Key那里把刚才复制的公钥粘贴过去,然后点击Add SSH Key。

我们可以输入下面命令来测试一下密钥是否配置正确:

1
ssh [email protected]

3.运行安装命令进行HEXO的安装

在本地选择一个文件夹,作为你的hexo主目录,在这个文件夹下右键,选择git bash here打开git命令窗口。

运行命令安装hexo:

1
npm install -g hexo

运行命令在此文件夹新建站点:

1
hexo init

如果命令没有报错的话,在你选定的文件夹下应该会下载到hexo的文件。

我们可以编辑根目录下的_config.yml来配置HEXO站点的相关信息。
编辑完相关信息之后运行以下命令重新生成站点文件:

1
hexo g

4.打开本地演示模式

输入下面命令打开本地演示模式:

1
hexo s

打开之后在浏览器输入http://localhost:400 就可以访问到网站了。

5.安装主题butterfly

我们接下来安装一个主题,这里以butterfly这个主题为例,其他主题的安装也类似。

在hexo文件下下运行以下命令:

1
2
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus --save

运行完成之后我们编辑主题文件夹下的_config.yml文件来对主题进行配置。
编辑完成之后复制一份这个yml文件到hexo根目录,并命名为_config.butterfly.yml。
接着编辑根目录下面的站点配置文件_config.yml来更改主题

1
theme: butterfly

修改完成之后重新运行下面命令编译HEXO:

1
hexo g

然后本地预览新安装的主题:

1
hexo s

6.将站点发布到Github上

如果在本地演示没有报错,我们就可以将站点发布到Github上面了。
首先我们需要编辑根目录下的_config.yml文件,拉到文件最底部填入你的github地址:

1
2
3
4
5
deploy:
type: 'git'
repo: [email protected]:miaoyanginfo/miaoyanginfo.github.io.git
branch: master

然后运行下面的命令:

1
2
npm install hexo-deployer-git  --save
hexo clean && hexo g && hexo d

发布完成之后我们直接用域名https://***.github.io
就可以访问到我们搭建的HEXO站点了。