部署hexo+qexo并自动同步至博客仓库

xjfkkk · 2024 年11 月 10 日 03:58

本文是对CM佬文章进行了补充，增添了qexo管理hexo博客后台功能，并自动推送修改后的代码至你的博客网站

修改的部分参考本文，详细视频链接查看：

1.安装所需软件

Node:

修改npm源,打开CMD窗口，运行安装华为云镜像源

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

Git：

VS code：

https://code.visualstudio.com

2.配置 Git 连接至github及仓库同步推送所需密钥

2.1. 配置用户名和邮箱

打开Git Bash配置github用户名和邮箱

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

2.2.配置公钥连接Github

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

将**“你的邮箱”** 修改为你自己的。为了密钥方便管理，可以修改存放目录。

可选择存放目录,如:将SSH密钥对保存到D:\Git\user-password目录下

D:/Git/user-password/id_rsa

去C:\Users\用户名\.ssh修改config文件(如果没有创建一个）

Host github.com
    HostName github.com
    User git
    IdentityFile D:/Git/user-password/id_rsa

路径进行相应调整

在D:\Git\user-password会看到以下文件

id_rsa私钥
id_rsa.pub公钥

2.3.再配置密钥用于github仓库同步

ssh-keygen -t rsa -C yourname.github.io

将yourname改为你自己的gihutb名

将SSH密钥对保存到D:\Git\hexo-key目录下

D:/Git/hexo-key/id_rsa

2.4.将 SSH KEY 配置到 GitHub

进入github，点击右上角头像选择settings，进入设置页后选择 SSH and GPG keys，点击SSH keys，名字随便起，将2.2步骤中获取的id_rsa.pub公钥填到Key那一栏

2.5.连接到github

ssh -T [email protected]

3.创建GitHub.io仓库和hexo-blog仓库

3.1.创建GitHub.io仓库用于存放静态站（即你的博客站点）

点击右上角的+按钮，选择New repository，创建一个<用户名>.github.io的仓库。
仓库名字的格式必须为：<用户名>.github.io (注意：前缀必须为用户名，此为预览博客需要，后期可修改仓库名)
不想暴露源码，可选择Private，点击 Creat repository 进行创建即可

3.2.创建hexo-blog仓库用于存放博客源码

点击右上角的+按钮，选择New repository，创建一个hexo-blog的仓库。
仓库名字的格式必须为：hexo-blog (名称可以自己更改)
不想暴露源码，可选择Private，点击 Creat repository 进行创建即可

4.初始化 Hexo 博客

4.1创建博客文件夹

创建一个文件夹来保存博客源码（如：路径D:/Hexo-Blog），在文件夹内右键鼠标，选择Open Git Bash here

4.2.安装 Hexo

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

blog可以自行替换，这是博客存放的目录

初始化项目后，blog有如下结构：

node_modules：依赖包
scaffolds：生成文章的一些模板
source：用来存放你的文章
themes：主题
.npmignore：发布时忽略的文件（可忽略）
_config.landscape.yml：主题的配置文件
config.yml：博客的配置文件

5.在博客根目录里安装最新版主题

5.1.安装主题

使用VS CODE打开你生成的blog文件，我以安知鱼主题为例

git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

5.2.安装 pug 以及 stylus 的渲染器

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

5.3修改主题

5.3.1.修改 hexo 配置文件

修改 hexo 配置文件_config.yml，把主题改为anzhiyu

theme: anzhiyu

5.3.2.覆盖配置

覆盖配置可以使主题配置放置在 anzhiyu 目录之外，避免在更新主题时丢失自定义的配置

将/themes/anzhiyu/_config.yml 创建副本并重命名为_config.anzhiyu.yml，将_config.anzhiyu.yml放入根目录下

以后如果修改任何主题配置，都只需修改 _config.anzhiyu.yml 的配置即可

其余插件及所需可参考官方文档进行配置即可

5.3.3.安装 hexo-deployer-git

npm install hexo-deployer-git --save

5.3.4.修改 `_config.yml` 文件

使用VS Code打开blog文件夹，修改_config.yml最后一行的配置，将repository修改为你自己的github项目地址即可，分支改为main代表主分支

deploy:
  type: git
  repository: [email protected]:github用户名/github用户名.github.io.git
  branch: main

6.修改写作模板

/scaffolds目录下有几个模版文件，其中

post.md：新建博文模版
page.md：新建标签页模版

官方文档：

你也可以替换为CM佬的模板

https://blog.cmliussss.com/p/HexoBlogNo2/#2-配置文章模版

7.将创建的两个github仓库进行同步

7.1.hexo-blog仓库私钥创建

打开你的hexo-blog仓库进行配置：Settings → Secrets and variables→ Secrets → Actions → new repository secret 页面上添加一个新的 Secret
Name填写HEXO_DEPLOY_PRI ，Secret 填写2.3步骤获取的id_rsa私钥

7.2.yourname.github.io仓库公钥创建

yourname.github.io仓库进行配置：Settings → Deploy keys → Add deploy key 页面上添加一个新的 Secret。

Title填写hexo-deploy-key ，Key填入**2.3步骤获取到的**id_rsa.pub 公钥，Allow write access勾选上

8.推送hexo博客源码至hexo-blog仓库中

强调：首先要将~\themes\anzhiyu目录下的.github 删除（或者可以移动到其他桌面位置）

8.1.初始化Git仓库

git init

8.2.将所有文件添加到Git暂存区

git add .

8.3.提交文件到本地仓库

git commit -m "first commit"

8.4.将本地仓库与GitHub仓库关联

git remote add origin YOUR_GITHUB_REPO_URL

将YOUR_GITHUB_REPO_URL替换为https://github.com/github用户名/博客源码仓库.git

8.5.推送代码

git push -u origin main

9.新建GitHub Action编写 Workflow

去你的hexo-blog仓库创建目录及文件如下：.github/workflows/main.yml

需要修改你的github名字，你的邮箱 , node-version: '22’根据你本地安装的版本进行相应替换即可并保存。

name: Hexo Deploy
# 只监听 source 分支的改动
on:
  push:
    branches:
      - main

# 自定义环境变量，这个GIT_USER和GIT_EMAIL配置成你自己的，GIT_EMAIL尽量和上面的`ssh-keygen -f hexo-deploy-key -C "your email"`中的your email保持一致
env:
  GIT_USER: 你的github名字
  GIT_EMAIL: 你的邮箱

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      # 获取博客源码和主题
      - name: Checkout
        uses: actions/checkout@v2

      # 这里用的是 Node.js 13.x，14.x 生成 Hexo 静态页面会有问题
      - name: Set up Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '22'
        
      - name: 安装 Hexo CI
        run: 
          npm install hexo-cli -g --no-fund && npm install hexo-server --save --no-fund

      # 安装依赖
      - name: Install Dependencies
        run: |
          npm install --no-fund

      # 从之前设置的 secret 获取部署私钥
      - name: Setup SSH Keys and known_hosts
        env:
          HEXO_DEPLOY_PRI: ${{ secrets.HEXO_DEPLOY_PRI }} 
        run: |
          sudo timedatectl set-timezone "Asia/Shanghai"
          mkdir -p ~/.ssh
          echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.name $GIT_USER
          git config --global user.email $GIT_EMAIL

      # 生成并部署 `npx hexo clean && npx hexo g -d` or `npm run deploy`
      - name: Deploy
        run: |
          hexo clean && hexo g && hexo d

去Actions中查看进度，完成后就可以去GitHub.io仓库查看静态网站代码是否成功推送，若生成目录，即可访问你的xxxx.github.io网页。

10.创建qexo绑定你的博客源码

10.1.一键部署qexo

首次部署会报错, 请无视并进行接下来的步骤

在项目 Settings → General → Node.js Version 将 Node.js 版本改为 18.x 后保存

10.2.申请 Vercel 数据库

进入Vercel Storage 界面 然后点击右上角的 Create Database 并选择 Postgres 创建免费 PostgreSQL 数据库, 在 Connect 页面获取数据库连接信息

10.3.绑定项目

在左侧边栏选择 Projects 点击 Connect Project 连接到你创建的qexo项目。

10.4.重新部署qexo

回到你的项目页面，在 Deployments 点击 Redeploy 开始部署, 若没有 Error 信息即可打开域名进入初始化引导

10.5.创建面板需要的账号和密码

10.6.创建Github 密钥

于 Github 设置 生成的 Token (建议使用 Classical) 需要 Repo & Workflow 下的权限 不建议给出所有权限

10.7.填写面板所需的变量

仓库为github用户名/仓库名 ，仓库的分支为main ，密钥为上一把获取的，仓库路径不用填写。

输入完成后即可进入你的后台

11.将github推送至cloudflare

在 Workers 和 Pages 中选择 Pages 的 连接到 Git 即可，可以自定义域名

也可以将xxx.github.io仓库放置于vercel中。

参考文章

Coker · 2024 年11 月 10 日 04:05

大佬太强了吧

Nihil · 2024 年11 月 10 日 04:06

插眼学习

pako · 2024 年11 月 10 日 04:09

大佬又发文章了，支持

snaily · 2024 年11 月 10 日 04:15

大佬太强了，太详细了

banlan · 2024 年11 月 10 日 04:16

大佬太强了

gugefb · 2024 年11 月 10 日 04:34

一直报错

xjfkkk · 2024 年11 月 10 日 04:38

你把主题下的.github文件删了吗

gugefb · 2024 年11 月 10 日 04:39

这是qexo的部署，去年就嘎了然后就一直这么报错，数据库也连着的

xjfkkk · 2024 年11 月 10 日 04:40

版本改为18，然后重新部署

xjfkkk · 2024 年11 月 10 日 04:41

yyy3 · 2024 年11 月 10 日 04:43

感谢分享！！

gugefb · 2024 年11 月 10 日 04:49

感谢，解决了

handsome · 2024 年11 月 10 日 07:12

太强了吧！大佬！

osjj · 2024 年11 月 10 日 07:18

大佬太强了666

jana · 2024 年11 月 10 日 07:36

很强有视频的话效果更佳

CVV · 2024 年11 月 10 日 07:40

大佬太强了！

user705 · 2024 年11 月 10 日 07:58

有点厉害支持~~

kefing · 2024 年11 月 10 日 13:29