Total Pageviews

Friday 2 July 2021

使用 GitHub Actions 完成 Hexo 博客的自动生成与部署

 我的 Hexo 原始文件是按照

使用hexo，如果换了电脑怎么更新博客？ - CrazyMilk的回答 - 知乎 https://www.zhihu.com/question/21193762/answer/79109280

这种方式来进行备份的。因为更换了新的电脑，把仓库 clone 下来的时候因为网络的问题 npm install 总是失败，并且在本地写文章然后 push 然后再执行Hexo 相关的指令相对来说比较复杂。所以就想到把 Hexo 的生成和部署让某些东西自动完成，在本地只需要负责写作就好。

使用 GitHub Actions 在 push 的时候自动生成和部署hexo静态页面

首先要为仓库生成一个 Deploy Key

1
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

然后在这一步输入这对 Key 的文件名，如果直接回车会覆盖掉自己的 Key

1
2
Generating public/private rsa key pair.
Enter file in which to save the key (/home/yourname/.ssh/id_rsa):

接下来去仓库的setting里面

![](Screenshot from 2019-12-25 11-55-11.png)

在 Deploy keys 这里把刚刚生成的密钥对中的公钥添加进去

然后在 Secrets 里把刚刚生成的密钥对中的私钥添加进去，名字可以随意取，在 GitHub Actions 中以 $引用

![Screenshot from 2019-12-25 11-55-21.png](Screenshot from 2019-12-25 11-55-21.png)

创建一个 GitHub Actions WorkFlow

在目录下创建 .github/workflow/your-action-name.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
name: deploy hexo

on:
  push:
    branches:
      - hexo

jobs:
  generate-and-deploy:
    runs-on: [ubuntu-latest]
    steps:
      - name: checkout
        uses: actions/checkout@v2
        with:
          ref: hexo
          
      - name: setup node env
        uses: actions/setup-node@v1
        with:
          node-version: "10.x"

      - name: setup ssh ang git env
        env:
          PRIVATE_KEY: ${{secrets.HEXO_DEPLOY_KEY}}
        run: |
          mkdir -p ~/.ssh/ 
          echo "$PRIVATE_KEY" > ~/.ssh/id_rsa 
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          # set git infomation
          git config --global user.name 'your name'
          git config --global user.email 'your email'
          npm install & npm install -g hexo-cli
          npm install hexo-renderer-scss --save
          
      - name: gengration and deploy
        run: hexo g -d

具体的用法可以查看官方文档

1
2
3
4
on:
  push:
    branches:
      - hexo

表示在 hexo 分支 push 触发。jobs 表示执行任务，一个 jobs 可以包含多个 steps

1
2
3
4
5
6
7
8
- name: checkout
     uses: actions/checkout@v2
     with:
       ref: hexo
   - name: setup node env
     uses: actions/setup-node@v1
     with:
       node-version: "10.x"

使用 checkout 获取 hexo 分支的源码 ，并设置 node 环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- name: setup ssh ang git env
      env:
        PRIVATE_KEY: ${{secrets.HEXO_DEPLOY_KEY}}
      run: |
        mkdir -p ~/.ssh/ 
        echo "$PRIVATE_KEY" > ~/.ssh/id_rsa 
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        # set git infomation
        git config --global user.name 'your name'
        git config --global user.email 'your email'
        npm install & npm install -g hexo-cli
        npm install hexo-renderer-scss --save
        
    - name: gengration and deploy
      run: hexo g -d

然后就很常规的写入 ssh key 然后安装相应的东西，最后调用 hexo 的命令进行生成和部署.

查看执行情况

可以去项目仓库的 actions, 查看每个 workflow 的执行情况.

---------------------------

使用Github Actions对Hexo博客自动部署


很多同学和我一样也在用Hexo搭建自己的博客，通常最后发布的操作是 hexo g 生成静态网页，然后 hexo d 将public目录推送到github、coding、gitee等平台。

但是很多时候我们都想偷个懒，只管写博客，写完后将git 一 push，后面的生成部署工作让程序自动完成，github actions为我们提供了这个便利。

在我们博客的github仓库顶部可以找到 Actions 菜单，在里面我们可以搜索、选择各种预备好的actions模板，也可以点击 Set up a workflow yourself 按钮创建自己的工作流。

这里我的部署工作稍微复杂点，所以选择自己编写工作流配置文件。

在手动编写面板的右侧可以搜索别人写好的各种actions，方便我们使用这些actions,配置一些基本的工作.

当然，也可以选择在 hexo 根目录下创建 .github/workflows 目录，并在里面编写github actions配置文件的方法来开启这个功能。

首先我们需要将git库的代码检出到github actions提供的容器中，这里使用github提供的checkout步骤

1
2
3

- uses: actions/checkout@master
  with:
    submodules: true

因为hexo需要依赖node.js环境，所以我们还要安装node环境

1
2
3

- uses: actions/setup-node@master
  with:
    node-version: 12.x

有了node环境后我们需要安装各种依赖包

1
2
3
4

- name: Installation
  run: |
    npm install
    npm install -g hexo-cli

依赖装好后就可以执行命令生成静态网站了

1
2

- name: Generate
  run: hexo clean && hexo g

最后一步就是将生成的public目录推到github仓库的page分支上，这样github pages就会将最新的网站自动部署了

1
2
3
4
5
6

- name: Deploy
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./public
    cname: urdomain.com

在github actions工作流中，还可以完成更多更复杂的操作，里面可以直接执行shell脚本，可以使用docker镜像提供的特殊环境，大家可以根据自己需求进行修改。

我的配置文件是适合我自己博客用的，里面还包括了网页、js、css、图片的压缩，cdn链接的替换，自动打release方便绕过jsDelivr的缓存。

在github actions将page专用分支更新后，zeit\netlify\github pages三个平台都会自动将最新的内容部署上，这样我就只需要关注博客内容，后续操作都不需要管了.

----------- 

利用GitHub Actions实现Blog自动部署与发布


GitHub Actions是GitHub官方推出的持续集成服务。通过GitHub Actions可以为你的项目提供持续构建，测试，程序打包和部署一条龙服务。根据官方资料介绍，GitHub Actions为用户提供虚拟服务器环境，硬件规格为:

  • 2-core CPU
  • 7GB RAM
  • 14GB SSD

支持的操作系统包括：

  • Windows Server 2019
  • Ubuntu 18.04
  • Ubuntu 16.04
  • macOS X Catalina 10.15

正好，我基于Hexo的blog仓库也是放在GitHub，这样的虚拟环境配置用来持续构建和自动部署blog再合适不过了，还可以避免每次本地部署重复输入命令和CPU风扇狂转的困扰。

配置过程

环境介绍

我的blog是基于Hexo的，所有的Markdown文件托管在GitHub的私有仓库中，另外，构建生成的静态页面是托管在另外一台阿里云国际版的VPS主机上。

利用GitHub Actions需要达成的目标就是：每次提交或者更改新的blog文章，触发GitHub Actions进行构建，构建出静态页面后，直接发布到VPS上。

生成部署专用SSH密钥对

首先需要生成一对新的SSH密钥，注意这对密钥不能有密码保护，因为整个构建过程应该是自动的，有密码保护的密钥对会中断构建过程。

将这对密钥的public key添加到托管blog的VPS对应账户的~/.ssh/authorized_keys中。然后在Blog仓库的Settings->Secrets里添加刚刚生成的私钥，名称为BLOG_DEPLOY_KEY。这样做的目地是保护私钥不被泄漏，这样在GitHub Actions中不用以明文的方式填入私钥。

https://xiaozhou.net/pics/actions/1.png

创建GitHub Actions

以我的blog为例，在blog仓库的Actions选项卡下点击新建workflow，填入如下配置:

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
name: HEXO CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x]

    steps:
      - uses: actions/checkout@v1

      - uses: webfactory/ssh-agent@v0.2.0
        with:
          ssh-private-key: |
            ${{ secrets.BLOG_DEPLOY_KEY }}
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      
      - name: Configuration environment	
        run: |	
          ssh-keyscan -p 22833 xiaozhou.net >> ~/.ssh/known_hosts	
          
      - name: Install dependencies
        run: |
          npm i -g hexo-cli
          npm i
      - name: Deploy hexo
        run: |
          hexo g -d

构建过程中有几个要点：

  • 构建环境基于Ubuntu，并使用node 10.x
  • 构建中用到了webfactory/ssh-agent用来缓存部署blog所用到的私钥
  • 每次构建触发的时候，先初始化基于node 10.x的环境
  • 扫描目标VPS的公钥，并保存到虚拟环境的~/.ssh/known_hosts中，这样可以避免部署时候要求用户输入确认的步骤。
  • 构建前先初始化好hexo的环境，并安装所有依赖
  • 最后，进行静态页面的构建并直接发布

一切准备就绪，为了测试blog的自动构建和发布，可以尝试新建或者修改一篇blog post，然后在仓库的Actions中，就能看到自动触发的构建流程了。

https://xiaozhou.net/pics/actions/2.png

https://xiaozhou.net/pics/actions/3.png

from http://web.archive.org/web/20210712082002/https://xiaozhou.net/blog-auto-deployment-via-github-actions-2020-06-08.html

-------------------

使用SFTP将hexo静态网页部署到个人服

务器

记录一下使用SFTP将hexo生成的静态网页推送到个人服务器

由于WordPress太卡了，我的小服务器带不动了，于是转用hexo，不得不说hexo真的太好用了
于是在此记录一下

使用SFtp将hexo博客部署到个人服务器上

  • 首先服务器需要开启SFtp服务，不懂得自行百度
  • 在使用hexo g生成静态网页
  • 使用hexo d将静态网页推送到服务器

在使用sftp推送前需要修改配置文件如下：

在_config.yml文件中添加下面配置：

1
2
3
4
5
6
7
deploy:
  type: sftp
  host: xx.xx.xx.xx---服务器ip地址
  user: root       ---sftp登陆账号
  pass: ******     ---sftp密码
  remotePath: /    ---服务器上网页所在目录路径
  port: 22         ---sftp端口号

同时需要安装两个sftp部署插件

FTPSync:

1
npm install hexo-deployer-ftpsync --save

SFtp:

1
npm install hexo-deployer-sftp --save


Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)