前言

使用hexo，在github page平台上托管我们的博客，这样就可以安心的来写作，又不需要定期维护，而且hexo作为一个快速简洁的博客框架，用它来搭建博客真的非常容易。使用github actions部署我们的博客，这样我们可以完全不需要服务器就可以更新博客。

本文分三部分

  • 工具安装
  • 本地部署（教程使用centos8 进行部署,Windows、Ubuntu等系统自行更换相应代码）
  • 推送到GIthub托管
  • 常见问题解答

工具安装

安装Git

Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理你的hexo博客文章，上传到GitHub的工具。廖雪峰老师的Git教程写的非常好，大家可以了解一下。Git教程

1
yum install git

安装好后，用git --version 来查看一下版本

安装Node.js

Hexo是基于nodeJS编写的，所以需要安装一下nodeJS和里面的npm工具。

1
yum install nodejs

安装完后，打开命令行，输入以下命令查看版本，检查一下有没有安装成功

1
2
node -v
npm -v

注意要最新版本，否则之后会有问题。

安装Vim

略

本地部署Hexo

输入命令

npm install -g hexo-cli

依旧用hexo -v查看一下版本

初始化Hexo

新建一个myblog文件夹（这个myblog可以自己取名字，不重要），然后cd到这个文件夹下，运行

hexo init

第一次初始化时间会长一点

新建完成后，指定文件夹目录下有：

  • node_modules: 依赖包
  • public：存放生成的页面
  • scaffolds：生成文章的一些模板
  • source：用来存放你的文章
  • themes：主题
  • _config.yml: 博客的配置文件

打开hexo的服务

1
2
hexo g  #生成静态页面
hexo server  #打开web服务，用来预览，默认在4000端口开启服务

访问web服务，因为没有设置主题，你看到的应该是默认的hexo。

Ctrl+C，结束服务

设置Hexo主题

教程使用butterfly主题

主题下载&配置

1
2
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
mv themes/butterfly/.git themes/butterfly/git #防止后面推送到github时报错！

在 hexo 工作文件夹的根配置文件中设置主题_config.yml：

theme: butterfly

下载安装 pug 以及 stylus 的渲染器

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

根据主题文档完善

butterfly主题文档

注意:主题功能所依赖的插件一定要下载

推荐功能

  • 个人信息更改
  • 增加 标签、分类、友情链接、About等必要页面
  • 开启本地搜索（注意安装相关插件
  • 字数统计（注意安装相关插件
  • 评论功能（推荐Gitalk

一切配置好后，使用hexo s 进行预览，自己满意之后，我们开始部署到Github！

部署到Github

方案

  • 将hexo文件部署在mian分支，利用hexo的Deploy功能在gh-pages分支生成静态页面
  • 利用Github Action 自动生成网址

Push到Github

Github ssh配置

生成 SSH key

运行下面命令

1
ssh-keygen

进行如下操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[root@centos-s-1vcpu-1gb-nyc1-01 myblog]# ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/root/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in idras.
Your public key has been saved in idras.pub.
The key fingerprint is:
SHA256:TiKslAE+EmjRSx/bNEoo9OVdYD7vx1S0mOkFdFHU2GM root@centos-s-1vcpu-1gb-nyc1-01
The key's randomart image is:
+---[RSA 3072]----+
|=oo .. o...o ++=.|
|o=.+oo+o.   B oEo|
|oo+.+.*+.  + +. .|
|. .= + .o . o    |
|  o o . S. o     |
| . . . +. o      |
|  .     .. o     |
|          .      |
|                 |
+----[SHA256]-----+

上面的操作将会在/root/.ssh目录下生成两个文件（id_rsa id_rsa.pub）

添加SSH key到 Github

登陆Github并打开下面网址

https://github.com/settings/keys

点击 New SSH key

title 可以随便填写

将 id_rsa.pub 的内容填入Key

你可能需要以下命令

1
cat ~/.ssh/id_rsa.pub

创建Github库

创建一个名为myBlog的空库（随意起名，下面教程将会用这个名字

hexo Deploy配置

安装hexo git 插件

1
npm install --save hexo-deployer-git

Setup Git Infomation

1
2
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

修改hexo的_config.yml配置文件

1
2
3
4
deploy:
  type: git
  repo: git@github.com:Ymjie/myBlog.git
  branch: gh-pages

Deploy 推送测试

hexo d

会提交到你github仓库gh-pages分支，

Push Hexo 到GitHub

1
2
3
4
5
6
7
git init 
vim .gitignore #删除 node_modules/  db.json
git add -A
git commit -m 'hexo main'
git remote add origin git@github.com:Ymjie/myBlog.git
git branch -M main
git push -u origin main

配置Github Actions

添加Actions secrets

在Github库->Settings->Secrets->New repository secret

Name: HEXO_DEPLOY_PRI

Value: 将 id_rsa 的内容填入

你可能需要以下命令

1
cat ~/.ssh/id_rsa

开启 Github Actions

在Github库->Actions->set up a workflow yourself 替换为以下内容

注意替换自己 git config 信息，照抄无用

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
# workflow name
name: Hexo Blog CI

# master branch on push, auto run
on: 
  push:
    branches:
      - main
env:
     TZ: Asia/Shanghai     
jobs:
  build: 
    runs-on: ubuntu-latest 
        
    steps:
    # check it to your workflow can access it
    # from: https://github.com/actions/checkout
    - name: Checkout Repository main branch
      uses: actions/checkout@main 
      
    # from: https://github.com/actions/setup-node  
    - name: Setup Node.js 16.x 
      uses: actions/setup-node@master
      with:
        node-version: "16.x"
    
    - name: Setup Hexo Dependencies
      run: |
        npm install hexo-cli -g
        npm install
        npm install hexo-renderer-pug hexo-renderer-stylus --save
        npm install --save hexo-deployer-git
    
    - name: Setup Deploy Private Key
      env:
        HEXO_DEPLOY_PRIVATE_KEY: ${{ secrets.HEXO_DEPLOY_PRI }}
      run: |
        mkdir -p ~/.ssh/
        echo "$HEXO_DEPLOY_PRIVATE_KEY" > ~/.ssh/id_rsa 
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        
    - name: Setup Git Infomation
      run: | 
        git config --global user.name 'Ymjie' 
        git config --global user.email 'i@vshex.com'
    - name: Deploy Hexo 
      run: |
        hexo clean
        hexo generate 
        hexo deploy

点击 Start commit -> Commit new file

常见问题

运行出错

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
FATAL { err:
   TypeError: line.matchAll is not a function
       at res.value.res.value.split.map.line (/root/fblog/node_modules/hexo-util/lib/highlight.js:128:26)
       at Array.map (<anonymous>)
       at closeTags (/root/fblog/node_modules/hexo-util/lib/highlight.js:126:37)
       at highlight (/root/fblog/node_modules/hexo-util/lib/highlight.js:119:10)
       at highlightUtil (/root/fblog/node_modules/hexo-util/lib/highlight.js:23:16)
       at data.content.dataContent.replace (/root/fblog/node_modules/hexo/lib/plugins/filter/before_post_render/backtick_code_block.js:92:17)
       at String.replace (<anonymous>)
       at Hexo.backtickCodeBlock (/root/fblog/node_modules/hexo/lib/plugins/filter/before_post_render/backtick_code_block.js:19:30)
       at Hexo.tryCatcher (/root/fblog/node_modules/bluebird/js/release/util.js:16:23)
       at Hexo.<anonymous> (/root/fblog/node_modules/bluebird/js/release/method.js:15:34)
       at Promise.each.filter (/root/fblog/node_modules/hexo/lib/extend/filter.js:67:52)
       at tryCatcher (/root/fblog/node_modules/bluebird/js/release/util.js:16:23)
       at Object.gotValue (/root/fblog/node_modules/bluebird/js/release/reduce.js:166:18)
       at Object.gotAccum (/root/fblog/node_modules/bluebird/js/release/reduce.js:155:25)
       at Object.tryCatcher (/root/fblog/node_modules/bluebird/js/release/util.js:16:23)
       at Promise._settlePromiseFromHandler (/root/fblog/node_modules/bluebird/js/release/promise.js:547:31)
       at Promise._settlePromise (/root/fblog/node_modules/bluebird/js/release/promise.js:604:18)
       at Promise._settlePromiseCtx (/root/fblog/node_modules/bluebird/js/release/promise.js:641:10)
       at _drainQueueStep (/root/fblog/node_modules/bluebird/js/release/async.js:97:12)
       at _drainQueue (/root/fblog/node_modules/bluebird/js/release/async.js:86:9)
       at Async._drainQueues (/root/fblog/node_modules/bluebird/js/release/async.js:102:5)
       at Immediate.Async.drainQueues [as _onImmediate] (/root/fblog/node_modules/bluebird/js/release/async.js:15:14) } 'Something\'s wrong. Maybe you can find the solution here: %s' '\u001b[4mhttps://hexo.io/docs/troubleshooting.html\u001b[24m'

解决方法：升级最新稳定版nodejs

如何写文章

https://butterfly.js.org/posts/dc584b87/

如何更新主题

1
2
3
4
5
cd themes/butterfly
mv git .git
git pull
mv .git git
#然后回到hexo目录，push到github

204.48.25.103

未完待续