Hexo搭建博客部署到Github Pages的个人经验

安装Hexo

先是要安装node.js和npm，注意node.js版本必须在14以上（在Ubuntu上吃了亏，我的node.js是apt官方源安装的，只有12，最后用nvm安装才安装了个node.js20），npm版本需要和node.js匹配，具体见https://nodejs.org/en/about/previous-releases

随后安装hexo

1	npm install -g hexo-cli

使用hexo -v查看版本

设置Github Page

创建一个Github仓库，格式必须为<用户名>.github.io

仓库创建好后，创建一个index.html文件，文件可以是任意格式的网页，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Westlord的个人随笔</title>
</head>
<body>
    <h1>Westlord的个人随笔</h1>
    <h1>Hello ~</h1>
</body>
</html>

随后，可以在仓库设置里的Pages页面里，在Branch处设置部署为网页的分支，按下save后稍等片刻即可部署成功。

图……没有了，可以参考GitHub Pages + Hexo搭建个人博客网站，史上最全教程这篇文章里的描述去弄。

个人使用的主题

Butterfly，安装文档：https://butterfly.js.org/posts/21cfbf15/

我是使用npm安装的：

# 通过 npm 安装并不会在 themes 里生成主题文件夹，而是在 node_modules 里生成
npm install hexo-theme-butterfly
# 如果你没有 pug 以及 stylus 的渲染器，请下载安装
npm install hexo-renderer-pug hexo-renderer-stylus --save

为什么使用npm部署

个人最后使用的是npm部署，不是因为我多懂npm，而是如果使用文件夹引入，在Github里就会面对哈人的子模块问题……个人还没学会子模块，于是放弃。

也许以后可以在本博客上出一个Git教程，重点讲讲子模块（

主题的具体配置是什么

去看主题文档的主题配置章节！这个章节不仅完善，而且对主题各个配置能展现的效果都有展示！

Github Pages部署方式

最开始是用hexo g -d部署到Github Pages，当然，首先要安装hexo-deployer-git插件

1	npm install hexo-deployer-git --save

在_config.yml里加入以下的一段，其中******是你的Github Token，得在你的Github设置里获取。

deploy:
  type: git
  repo: https://******@github.com/Elegant-Westlord/elegant-westlord.github.io.git,main
  branch: main
  token: ******

后面我看到【Hexo自动部署】优雅的使用 Github Actions 进行 Hexo 静态博客的持续集成与部署的介绍，试着用Github Action自动化部署。

我的部署脚本如下：

name: Blog CI/CD # 脚本 workflow 名称

on:
  push:
    branches: [main, master] # 当监测 main,master 的 push
    paths: # 监测所有 source 目录下的文件变动，所有 yml,json 后缀文件的变动。
      - '*.json'
      - '**.yml'
      - '**/source/**'

jobs:
  blog: # 任务名称
    timeout-minutes: 30 # 设置 30 分钟超时
    runs-on: ubuntu-latest # 指定最新 ubuntu 系统
    steps:
      - uses: actions/checkout@v2 # 拉取仓库代码
      - uses: actions/setup-node@v2 # 设置 node.js 环境
      - name: Cache node_modules # 缓存 node_modules，提高编译速度，毕竟每月只有 2000 分钟。
        uses: actions/cache@v2 
        env:
          cache-name: cache-node-modules
        with:
          path: ~/.npm
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - name: Init Node.js # 安装源代码所需插件
        run: |
          npm install
          echo "init node successful"
      - name: Install Hexo-cli # 安装 Hexo
        run: |
          npm install -g hexo-cli --save
          echo "install hexo successful"
      - name: Build Blog # 编译创建静态博客文件
        run: |
          hexo clean
          hexo g
          echo "build blog successful"
      - name: Deploy Blog # 设置 git 信息并推送静态博客文件
        run: |
          git config --global user.name "Elegant-Westlord"
          git config --global user.email "elegantwestlord@gmail.com"
          hexo deploy

      - run: echo "Deploy Successful!"