Hexo+Github-Pages+Cloudflare搭建博客完整指南

发表于 2025-05-23 分类于 hexo 阅读次数：本文字数： 2.8k 阅读时长 ≈ 10 分钟

本文详细介绍了如何使用Hexo框架搭建一个个人博客，并将其部署到 GitHub Pages和Cloudflare Pages上。主要内容包括：

环境准备：安装Node.js和Git
配置Git和GitHub：设置SSH密钥，创建GitHub仓库
初始化Hexo项目：安装Hexo，创建新博客
部署到GitHub Pages：配置部署设置，推送静态文件
部署到Cloudflare Pages：连接GitHub仓库，自动部署
基本使用方法：创建新文章，本地预览，发布更新

事前准备

域名（非必须，你也可以使用免费域名，或者GitHub.io或Pages.dev分配的域名也可以）
GitHub（必须，你需要注册一个GitHub帐号）
Cloudflare（非必须，你需要注册一个Cloudflare帐号，这样你就可以将博客部署在CF的CDN里加速，但是你也可以直接使用GitHub.io分配的域名）

电脑软件支持

Node（必须）
Git（必须）
VSCode（非必须，这是一款轻量型的代码编辑器，可以帮助你养成一个很好的编程习惯）

安装Node

打开Node官网，下载和自己系统相配的Node的安装程序，否则会出现安装问题。下载地址，在打开的Download Node.js页面，点击tab选择卡的第二项预构建安装程序，我需要用于选择框：选择你的系统平台，选择node的版本，我的下的是v20.18.0(LTS)版本。
安装。下载后安装，安装的目录可以使用默认目录C:/Program Files/nodejs/
检验安装。安装完成后，检查是否安装成功。在键盘按下win + R键，输入CMD，然后回车，打开CMD窗口，执行node -v命令，如能看到v20.18.0版本信息，则说明安装成功。
修改npm源。npm下载各种模块，默认是从国处服务器下载，速度较慢，建议配置成华为云镜像源。打开CMD窗口，运行如下命令:
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
当配置成功后，可通过 get 命令可查看npm源：
npm config get registry

安装 Git

进入官网下载适合你当前系统的 Git： win下载： Git - Downloading Package (git-scm.com)，在打开的Download for Windows页面，选择64-bit Git for Windows Setup。

下载后傻瓜式安装Git即可，安装的目录最好使用默认目录C:/Program Files/Git

安装完成后，点击电脑左下角开始即可看见Git CMD、Git Bash、Git GUI。

Git CMD 是windows 命令行的指令风格
Git Bash 是linux系统的指令风格（建议使用）
Git GUI是图形化界面（新手学习不建议使用）

配置 Git 密钥并连接至 Github

常用 Git 命令:

git config -l  //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户（全局）配置

配置用户名和邮箱

全局配置用户名和邮箱，在桌面打开bash命令窗口输入以下命令。

git config --global user.name "j26"
git config --global user.email "[email protected]"

通过git config -l 和git config –global –list都可以检查是否配置成功。也可以查看路径C:\Users\Administrator下的.gitconfig文件。在.gitconfig`文件里存放有刚才设置的用户名和邮箱。

Administrator@DESKTOP-O7B3NJL MINGW64 ~/Desktop
$ git config -l
diff.astextplain.textconv=astextplain
filter.lfs.clean=git-lfs clean -- %f
filter.lfs.smudge=git-lfs smudge -- %f
filter.lfs.process=git-lfs filter-process
filter.lfs.required=true
http.sslbackend=openssl
http.sslcainfo=C:/Git/mingw64/etc/ssl/certs/ca-bundle.crt
core.autocrlf=true
core.fscache=true
core.symlinks=false
pull.rebase=false
credential.helper=manager
credential.https://dev.azure.com.usehttppath=true
init.defaultbranch=master
user.name=ji
[email protected]

Administrator@DESKTOP-O7B3NJL MINGW64 ~/Desktop
$ git config --global --list
user.name=ji
[email protected]

在本地生成连接GitHub的公钥

执行ssh-keygen -t rsa -C "你的邮箱"命令生成ssh公钥，此公钥用于你的计算机连接Github。
提示Enter file in which to save the key直接一路回车即可，新手小白不推荐设置密钥。
终端窗口中输入：cat ~/.ssh/id_rsa.pub就可以在显示出来公钥。
也可以输入命令： clip < ~/.ssh/id_rsa.pub 直接把ssh密钥复制到粘贴板上。
也可以直接打开C盘下用户文件夹下的**.ssh的文件夹（C:\Users\Administrator\.ssh），会看到id_rsa 和 id_rsa.pub这2个文件，id_rsa 是私钥，id_rsa.pub是公钥**。
用记事本打开上述图片中的公钥id_rsa.pub，复制里面的内容，然后开始在github中配置ssh密钥。

将 SSH KEY 公钥配置到 GitHub

进入github，点击右上角头像选择settings，进入设置页后，在左边的菜单栏中点击 SSH and GPG keys，打开新的页面。点击New SSH Key。在打开的Add new SSH Key页面上，Title框中随便写个名字，Key type选择框选择Authentication Key(默认就是这一项)，Key大框中填入复制的公钥。

测试连接，输入以下命令：ssh -T [email protected]

第一次连接会提示Are you sure you want to continue connecting (yes/no/[fingerprint])?，输入yes即可。出现连接到账户的信息，说明已经大功告成，至此完成了环境准备工作。

第二次连接会显示：

Administrator@DESKTOP-O7B3NJL MINGW64 ~/Desktop
$ ssh -T [email protected]
Hi ji! You've successfully authenticated, but GitHub does not provide shell access.

创建GitHub.io仓库

进入github，点击右上角的+按钮，选择New repository，创建一个<用户名>.github.io的仓库。
仓库名字的格式必须为：<用户名>.github.io (注意：前缀必须为用户名，此为预览博客需要，后期可修改仓库名)
可见性必须选择Public方便第一次部署检查问题，点击Creat repository进行创建即可。

初始化 `Hexo`博客

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

在Git BASH输入npm install -g hexo-cli && hexo -v命令安装 Hexo。

Administrator@DESKTOP-O7B3NJL MINGW64 /d/Hexo-test
$ npm install -g hexo-cli && hexo -v

changed 53 packages in 28s

14 packages are looking for funding
  run `npm fund` for details
hexo-cli: 4.3.2
os: win32 10.0.19045 undefined
node: 20.18.0
acorn: 8.12.1
ada: 2.9.0
ares: 1.33.1
base64: 0.5.2
brotli: 1.1.0
cjs_module_lexer: 1.4.1
cldr: 45.0
icu: 75.1
llhttp: 8.1.2
modules: 115
napi: 9
nghttp2: 1.61.0
nghttp3: 0.7.0
ngtcp2: 1.1.0
openssl: 3.0.13+quic
simdutf: 5.5.0
tz: 2024a
undici: 6.19.8
unicode: 15.1
uv: 1.46.0
uvwasi: 0.0.21
v8: 11.3.244.8-node.23
zlib: 1.3.0.1-motley-71660e1

初始化Hexo项目安装相关依赖。

//初始化Hexo 会在 Hexo-Blog 文件夹内生成一个 blog-demo 文件夹
hexo init blog-demo
cd blog-demo
// npm i 是一个在命令行界面（CLI）中使用的命令，用于安装 Node.js 项目的依赖项。
//它是 npm install 的简写形式。
npm i

Administrator@DESKTOP-O7B3NJL MINGW64 /d/Hexo-test
$ hexo init blog-test
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFO  Start blogging with Hexo!

Administrator@DESKTOP-O7B3NJL MINGW64 /d/Hexo-test
$ cd blog-test

Administrator@DESKTOP-O7B3NJL MINGW64 /d/Hexo-test/blog-test
$ npm i
added 2 packages in 1s
23 packages are looking for funding
  run `npm fund` for details

初始化项目后，blog-demo有如下结构：
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
- node_modules：依赖包
- scaffolds：模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来创建文件。
- source：用来存放你的文章
- themes：主题
- .npmignore：发布时忽略的文件（可忽略）
- _config.landscape.yml：主题的配置文件
- config.yml：博客的配置文件
- package.json：项目名称、描述、版本、运行和开发等信
在博客根目录blog-demo打开Open Git Bash here输入hexo cl && hexo s启动项目。
打开浏览器，输入地址：http://localhost:4000 ，看到Hello World的网页，说明你的博客已经构建成功了。

部署`hexo`博客到GitHub Pages

安装部署插件hexo-deployer-git

npm install hexo-deployer-git --save 命令后面带--save才能把这个命令保存到package.json文件里。具体请查看官网

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^7.3.0",
    "hexo-deployer-git": "^4.0.0",   # 这是带 -- save 保存的
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-category": "^2.0.0",
    "hexo-generator-index": "^4.0.0",
    "hexo-generator-tag": "^2.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^6.3.0",
    "hexo-renderer-stylus": "^3.0.1",
    "hexo-server": "^3.0.0",
    "hexo-theme-landscape": "^1.0.0"
  }
}

编辑站点配置文件`_config.yml`

deploy:
  - type: git
    repository: [email protected]:jinwei26/jinwei26.github.io.git   # 目标存储库的 URL
    branch: main  # 分支名
    message: [message]  # 自定义提交信息 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}
  #- type: baidu_url_submitter # 百度

Github中的自定义域名

如果您的 Github Pages 需要使用 CNAME 文件自定义域名，请将 CNAME 文件置于 source 目录下，只有这样 hexo deploy 才能将 CNAME 文件一并推送至部署分支。

部署到GitHubPages

在网站根目录Hexo-Blog文件夹内右键鼠标，选择Open Git Bash here，输入：
hexo clean && hexo generate && hexo deploy

hexo clean：删除之前生成的文件，可以用hexo cl缩写。
hexo generate：生成静态文章，可以用hexo g缩写
hexo deploy：部署文章，可以用hexo d缩写
注意：deploy时可能要你输入 username 和 password。
如果出现 Deploy done，则说明部署成功了。
稍等两分钟，打开浏览器访问：https://<用户名>.github.io ，这时候我们就可以看到博客内容了。

将静态博客挂载到 Cloudflare Pages

打开并登录到Cloudflare Pages网站，在网页的左边菜单栏中选择Workers 和 Pages点击创建选择Pages选项卡，选择下方的通过导入现有Git存储库创建中的连接到Git点击。下拉框中选择你的Github帐户，如果没有，就需要登录你Blog仓库对应的GitHub帐号，选择你存放博客的存储库，点击下方的开始设置，接下来在设置构建和部署页面，查看一下项目名称，这个项目名称是可以修改的，你可以取一个你喜欢的英文名字，查看一下生产分支对不对，下面的都不要动，直接点击下面的保存并部署后等待部署完成即可。

提示成功！您的项目已部署到以下区域：全球后，浏览器访问：https://cmliussss2024-github-io.pages.dev ，这时候我们就可以看到博客内容了。

这时你也就可以加到Github将你的<用户名>.github.io的仓库设置为Private私库了。

如果你有自己的域名，你可以在这里绑定你自己的自定义域，即可。

在子目录创建文章

在_post文件夹下随便新建2个文件夹，一个diaries，一个posts，原来应当是是所有的文章都在 /_post目录下，新增了diaries文件夹和posts文件夹后，就可以把文章有序的放在不同的文件夹里了。但是，当hexo new 文章时，创建的文章依然在/_posts 目录下，想要直接在/_posts/diaries目录下直接创建文章的话，应当执行：

hexo new post -p diaries/test
//test 就是文章名字

hexo所包更新

定位到hexo博客根目录下, 运行 hexo -v`, 查看当前版本。

npm install -g npm-check, 安装 npm-check，

npm-check, 检查系统插件是否需要升级，

npm install -g npm-upgrade, 安装 npm-upgrade，

npm-upgrade, 更新 package.json

npm update –save，升级系统项，也就是升级hexo版本，

npm update hexo-theme-next –save, 升级主题，运行 hexo server，查看你的博客

VSCODE 终端首次执行报错

使用管理员身份打开 powershell ,输入以下命令：

Set-ExecutionPolicy RemoteSigned