这篇文章将教大家如何搭建Hexo博客程序，并部署到Github Pages+Vercel并通过Github Action自动化部署编译。

无需每次重复运行Hexo三件套命令，随着文章越来越多，编译的时间也随之越来越长，所以我们可以通过Github Action实现自动化部署，当我们博客需要更新时，你只需要将改动直接push到远程仓库，之后的编译部署的工作统交给CI来完成即可。

准备工作

请提前安装（准备）好以下软件，不会的请自行百度，有很多教程。

本地安装Hexo

  1. 打开 CMD（终端） 命令框输入如下命令安装
1
npm install -g hexo-cli


2. 安装完后输入hexo -v验证是否安装成功。

  1. 在硬盘中创建一个用于搭建Hexo程序的目录

如：我创建的目录是：E:\HexoBlogTest\DaliyuerBlog

  1. 在刚刚创建好的目录中鼠标右键，选择**Open Git Bash here**打开Git终端界面

  1. 配置Git户名和邮箱，终端中输入以下内容
1
2
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

  1. 终端中输入：hexo init初始化Hexo博客，确保目录与之前创建的目录一样
1
2
hexo init #在当前目录下存放Hexo文件
hexo init 项目名 #会创新创建一个目录用于存放Hexo文件

  1. 初始化成功后输入npm i安装相关依赖。
1
2
cd DaliyuerBlog  //进入Hexo Blog文件夹 如果你使用的是hexo init命令，则此命令可不用输
npm i

Hexo的目录结构如下：

目录描叙
node_modules依赖包
scaffolds生成文章的一些模板
source文章页面存放文件
themes主题
_config.landscape.yml发主题的配置文件
config.yml博客的配置文件
package.json项目名称、描述、版本、运行和开发等信息
  1. 之后终端中输入 hexo g生成静态文件，hexo g启动项目

  1. 打开浏览器，输入地址：http://localhost:4000/ ，看到下面的效果，说明你的博客已经构建成功了。

将静态博客部署到GitHub Pages

配置GitHub SSH密钥

打开Git终端执行以下命令生成SSH密钥

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

打开C盘用户目录下的.ssh：C:\Users\用户名\.ssh 找到id_rsa.pub文件用记事本打开，复制里面的内容，之后需要在github中配置ssh密钥

打开Github，点击右上角头像 选择settings，进入设置页后选择 SSH and GPG keys，名字随便起，将刚刚复制的内容公钥填到Key那一栏。

Ok到这里就已经配置好GitHub连接ssh了

测试连接，终端输入以下命令

1
ssh -T git@github.com

出现以下内容就说明已经配置成功了

创建GitHub仓库并部署Pages

  1. 打开GitHub创建一个仓库，点击右上角的+按钮，选择New repository，创建一个<用户名>.github.io的仓库。

仓库的格式必须为：<用户名>.github.io (注意：前缀必须为用户名，不要等后面无法打开网页)

仓库可见性选择Public，并勾选Add a README file

点击 Creat repository 进行创建即可

  1. 之后回到Git终端，输入npm install hexo-deployer-git --save 命令安装 hexo-deployer-git
1
npm install hexo-deployer-git --save
  1. 打开修改博客目录下的 _config.yml 文件

_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。

修改最后一行的deploy配置，将repo修改为你自己的github项目地址即可，branch为分支默认main即可

1
2
3
4
5
deploy:
  type: git
  repo: git@github.com:daliyuer/daliyuer.github.io.git
  branch: main
  message: Site updated:{{ now('YYYY-MM-DD HH:mm:ss') }}

  1. 修改配置之后终端运行如下命令，将代码部署到 GitHub Pages
1
hexo cl && hexo g && hexo d

等待命令跑完出现Deploy done: git即部署成功

等待5分钟左右，浏览器访问<你的用户名>.github.io即可查看到你博客的内容

注意每次更新博客都需要运行以上三件套命令，下面我会教大家使用Github Action自动化部署，无需使用上面的三件套命令。

部署到Vercel

注册Vercel

打开Vercel->选择I'm working on personal projects->输入用户名-> 继续Continue->使用Continue with GitHub注册，在新弹出的窗口授权github即可

新建项目将Hexo部署到Vercel

  1. 注册之后来到首页，点击·Add New...->Project

  1. 点击install在新弹出的窗口授权github

  1. 之后页面会出现之前创建的Github Pages仓库，点击Import，参数全部默认，点击Deploy部署

  1. 部署成功后点击Continue to Dashboard来到项目控制面板，出现如下图就代表部署成功了。

之后你就可以通过 github用户名.github.io和Vercel上的项目名.vercel.app访问你的博客了。

但是由于GFW把Vercel的vercel.app屏蔽了所以需要绑定自己的域名才能访问。

Vercel绑定自定义域名（可选）

  1. 项目控制台点击->Settings->Domains->Add->输入你的域名，这里我已bk.3ms.run为例，其他保持默认->点击Add Domain。

  1. 之后会要求验证域名所有权，打开你域名注册商的管理界面添加一条解析记录，如下图

  1. 验证成功之后在添加一条解析技能，如图

等待几分钟之后你就可以通过添加的自定义域名访问了。

Github Action自动化部署

由于每次部署写文章修改配置后都需要运行Hexo的三件套指令，随着文章越来越多，编译的时间也随之越来越长，通过Github Action，我们只需要在每次完成博客的编写或修改以后，将改动直接push到远程仓库，之后的编译部署的工作统统交给Github Action CI来完成即可。

引用站外地址，不保证站点的可用性和安全性
使用Github Action实现全自动部署
参考文章-Akila

创建Hexo源码仓库

  1. 继续创建一个Github仓库用于存放HexoBlog的全部文件，Repository name仓库名称可随意填。仓库选择私有Private，其他保持默认创建即可。

创建完成后，需要把博客的源码push到这给仓库，之后会教大家如何弄。

  1. 在本地博客目录下依次新建文件夹/文件：[BlogRoot]/.github/workflows/autodeploy.yml如下图，在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
# 当有改动推送到master分支时，启动Action
name: 自动部署

on:
  push:
    branches:
      - main #2020年10月后github新建仓库默认分支改为main，注意更改

  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: 检查分支
      uses: actions/checkout@v4
      with:
        ref: main #2020年10月后github新建仓库默认分支改为main，注意更改

    - name: 安装 Node
      uses: actions/setup-node@v4
      with:
        node-version: "18.19.0" #action使用的node版本，建议大版本和本地保持一致。可以在本地用node -v查询版本号。

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

    - name: 缓存 Hexo
      uses: actions/cache@v4
      id: cache
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}
    
          
    - name: 安装依赖
      if: steps.cache.outputs.cache-hit != 'true'
      run: |
        npm install --save

    - name: 生成静态文件
      run: |
        hexo clean
        hexo generate

    - name: 部署 #此处master:master 指从本地的master分支提交到远程仓库的master分支，若远程仓库没有对应分支则新建一个。如有其他需要，可以根据自己的需求更改。
      run: |
        cd ./public
        git init
        git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
        git config --global user.email '${{ secrets.GITHUBEMAIL }}'
        git add .
        git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated By Github Actions"
        git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" master:main
        #git push --force --quiet "https://${{ secrets.TOKENUSER }}:${{ secrets.CODINGTOKEN }}@e.coding.net/${{ secrets.CODINGUSERNAME }}/${{  secrets.CODINGBLOGREPO }}.git" master:master #coding部署写法，需要的自行取消注释
        #git push --force --quiet "https://${{ secrets.GITEEUSERNAME }}:${{ secrets.GITEETOKEN }}@gitee.com/${{ secrets.GITEEUSERNAME }}/${{ secrets.GITEEUSERNAME }}.git" master:master #gitee部署写法，需要的自行取消注释

获取Token

为了确保交由Github Action来持续部署时，Github Action具备足够的权限来进行hexo deploy操作,需要先获取Token，

访问Github->头像（右上角）->Settings->Developer Settings->Personal access tokens->Tokens (classic)->generate new token->Generate new token(classic),创建的Token名称随意，但必须勾选repo项和workflows项,最后点击Generate token创建即可

token只会显示这一次，之后将无法查看，所以务必保证你已经记录下了Token。之后如果忘记了就只能重新生成重新配置了。如上图

配置Github Action

  1. 继续打开刚刚创建用于存放Hexo博客源码的Github仓库依次打开Settings->Secrets->actions->New repository secret添加环境变量，依次添加以下变量名称。

    变量名内容
    GITHUBUSERNAMEGitHub用户名
    GITHUBEMAILGithub邮箱
    GITHUBTOKEN刚刚申请的Github的tken

  2. 将本地Hexo博客源码上传到Github仓库推荐使用Visual Studio Code操作，用vs code 打开hexo博客目录，CTRL+~打开终端。

    1
    2
    3
    4
    #依次输入以下命令
    git init
    git branch -M main 
    git remote add origin git@github.com:[Github用户名]/[Github仓库名].git #自行更改Github用户名/Github仓库名

  3. 博客根目录创建（如无）.gitignore，输入如下内容：

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

    表示不上传到github上。这样可以显著减少需要提交的文件量和加快提交速度。

    如果不是butterfly主题，记得替换最后一行内容为你自己当前使用的主题。

  4. 之后再运行git提交指令，将博客源码提交到github上。牢记下方的三行指令，以后都是通过这个指令进行提交。

    1
    2
    3
    git add .
    git commit -m "github action update" #引号内的内容可以自行更改作为提交记录。
    git push -u origin main

到这基本上已经完成所有的配置了，每次发布文章修改配置只需要将文件push到github上就可以了。

查看Github Action部署情况

打开GIthub存放源码的私有仓库，找到action。

若全部打钩，恭喜你，你现在可以享受自动部署的快感了。