部署hexo+qexo+github+cloudflare

XJFKKK2024-11-102024-11-10

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

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

https://www.youtube.com/@CMLiussss

1.安装所需软件

Node:

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

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

Git：

https://git-scm.com/downloads

VS code：

https://code.visualstudio.com

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

2.1. 配置用户名和邮箱

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

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

2.2.配置公钥连接Github

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

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

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

1	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仓库同步

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

将yourname改为你自己的gihutb名

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

1	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

1	ssh -T git@github.com

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文件，我以安知鱼主题为例

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

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

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

5.3修改主题

5.3.1.修改 hexo 配置文件

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

1	theme: anzhiyu

5.3.2.覆盖配置

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

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

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

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

https://docs.anheyu.com/initall.html

5.3.3.安装 hexo-deployer-git

1	npm install hexo-deployer-git --save

5.3.4.修改 `_config.yml` 文件

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

deploy:
  type: git
  repository: git@github.com:github用户名/github用户名.github.io.git
  branch: main

6.修改写作模板

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

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

官方文档：

https://docs.anheyu.com/page/front-matter.html

你也可以替换为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.提交文件到本地仓库

1	git commit -m "first commit"

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

1	git remote add origin YOUR_GITHUB_REPO_URL

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

8.5.推送代码

1	git push -u origin main

9.新建GitHub Action编写 Workflow

创建目录及文件如下：.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

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

https://vercel.com/new/clone?repository-url=https://github.com/am-abudu/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中。