博客快捷键

按住 Shift 键查看可用快捷键

ShiftK

开启/关闭快捷键功能

ShiftA

打开/关闭中控台

ShiftD

深色/浅色显示模式

ShiftS

站内搜索

ShiftR

随机访问

ShiftH

返回首页

ShiftL

友链页面

ShiftP

关于本站

ShiftI

原版/本站右键菜单

松开 Shift 键或点击外部区域关闭

文章详情

互动

Hexo + GitHub Pages + Cloudflare Pages 搭建博客教程

222412分钟2025-08-08232未知0

文章摘要

篇文章详细介绍了如何使用Hexo框架搭建一个个人博客，并将其部署到GitHub Pages和Cloudflare Pages上。文章首先概述了使用Hexo、GitHub和Cloudflare的免费服务可以轻松创建一个高效、简洁的博客网站。接着，文章逐步介绍了环境准备、软件支持、配置Git密钥、创建GitHub.io仓库、初始化Hexo项目、部署到GitHub Pages以及部署到Cloudflare Pages的具体步骤。此外，还提供了基本使用方法，包括创建新文章、本地预览和发布更新。文章适合想要快速搭建个人博客的用户。

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

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

这个教程适合那些想要快速搭建个人博客，但又不想花费太多成本的人。通过使用Hexo、GitHub和Cloudflare的免费服务，您可以轻松创建一个高效、简洁的博客网站。

1. 准备工作

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

2. 软件支持

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

3. 安装Node

打开Node官网，下载和自己系统相配的Node的安装程序，否则会出现安装问题。下载地址：https://nodejs.org/en
下载后安装，安装的目录可以使用默认目录 C:/Program Files/nodejs/
安装完成后，检查是否安装成功。在键盘按下Win + R键，输入CMD，然后回车，打开CMD窗口，执行 node -v 命令，看到版本信息，则说明安装成功。

修改npm源。npm下载各种模块，默认是从国外服务器下载，速度较慢，建议配置成华为云镜像。打开CMD窗口，运行如下命令：

CMD

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

4. 安装Git

进入官网下载适合你当前系统的 Git：https://git-scm.com/downloads

下载后安装Git即可，安装的目录最好使用默认目录C:/Program Files/Git
点击电脑左下角开始即可看见Git CMD、Git Bash、Git GUI。

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

5. 配置 Git 密钥并连接至 Github

常用 Git 命令

BASH

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

6. 配置用户名和邮箱

BASH

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

通过git config -l 检查是否配置成功。

7. 配置公钥连接Github

执行以下命令生成ssh公钥，此公钥用于你的计算机连接Github

BASH

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

提示Enter file in which to save the key直接一路回车即可，新手小白不推荐设置密钥

之后打开C盘下用户文件夹下的ssh的文件夹，会看到二个文件
id_rsa私钥
id_rsa.pub公钥

用记事本打开id_rsa.pub中的公钥，复制里面的内容，然后开始在github中配置ssh密钥。

将 SSH KEY 配置到 GitHub
进入github，点击右上角头像选择settings，进入设置页后选择 SSH and GPG keys，名字随便起，公钥填到Key那一栏。

测试连接，输入以下命令

BASH

ssh -T [email protected]

第一次连接会提示Are you sure you want to continue connecting (yes/no/[fingerprint])?，输入yes即可

出现连接到账户的信息，说明已经大功告成，至此完成了环境准备工作。

8. 创建GitHub.io仓库

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

9. 初始化 Hexo 博客

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

在Git BASH输入如下命令安装 Hexo

BASH

npm install -g hexo-cli && hexo -v

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

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

BASH

hexo init blog-demo
cd blog-demo
npm i

初始化项目后，打开blog-demo有如下结构

文件名	解释
node_modules	依赖包
scaffolds	生成文章的一些模板
source	用来存放你的文章
themes	主题
.npmignore	发布时忽略的文件（可忽略）
_config.landscape.yml	主题的配置文件
config.yml	博客的配置文件
package.json	项目名称、描述、版本、运行和开发等信

打开Open Git Bash here输入hexo cl && hexo s启动项目
打开浏览器，输入地址：http://localhost:4000/ ，看到视频里的效果，说明你的博客已经构建成功了。

10. 将静态博客挂载到 GitHub Pages

安装 hexo-deployer-git

BASH

npm install hexo-deployer-git --save

修改 _config.yml 文件
在blog-demo目录下的_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。
修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支（注意缩进）

YAML

deploy:type: gitrepository: [email protected]:你的Github名/你的Github名.github.io.gitbranch: main

修改好配置后，运行如下命令，将代码部署到 GitHub（Hexo三连）。

BASH

// Git BASH终端
hexo clean && hexo generate && hexo deploy  

// 或者

// VSCODE终端
hexo cl; hexo g; hexo d

hexo clean：删除之前生成的文件，可以用hexo cl缩写。
hexo generate：生成静态文章，可以用hexo g缩写
hexo deploy：部署文章，可以用hexo d缩写

注意：deploy时可能要你输入 username 和 password。
如果出现Deploy done，则说明部署成功了。

稍等两分钟，打开浏览器访问：https://你Github的用户名.github.io ，这时候我们就可以看到博客内容了。

12. 将静态博客挂载到 Cloudflare Pages

在 Workers 和 Pages 中选择 Pages 的连接到 Git

然后登录你Blog仓库对应的GitHub帐号

点击保存并部署后等待部署完成。
提示成功！您的项目已部署到以下区域：全球后，浏览器访问：Cloudflare Pages 分配的域名，这时候我们就可以看到博客内容了。
当然也可以添加自己的自定义域名

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

13. 如何使用

新建一篇博文

BASH

hexo new 这是一篇新的博文

然后用文本编辑器去编辑_posts/这是一篇新的博文.md里的内容即可，注意要使用Markdown格式书写。
详细使用方法可以查阅 https://hexo.io/zh-cn/docs/writing
编辑完文章保存后可以使用如下命令，生成本地页面 http://localhost:4000/ ，进行预览

BASH

// Git BASH终端
hexo cl && hexo s

// 或者

// VSCODE终端
hexo cl; hexo s

确认无误后使用以下命令，将本地文章推送至GitHub仓库即可

BASH

// Git BASH终端
hexo cl && hexo g && hexo d

// 或者

// VSCODE终端
hexo cl; hexo g; hexo d

VSCODE 终端首次执行报错使用管理员身份打开 `powershell` ,输入以下命令

POWERSHELL

Set-ExecutionPolicy RemoteSigned

Hexo 部分数据无法更新，或者新生成的文件与上一版本完全相同，请清理缓存后重试。

SHELL

  hexo clean

本博文转载自,CM喂饭大佬

CM大佬 : Blog https://blog.cmliussss.com

CM大佬 : YouTobe https://www.youtube.com/@CMLiussss

项目地址 : Hexo https://github.com/hexojs/hexo

BiuXin

生活明朗，万物可爱

本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自 BiuXin

Cloudflare-Pages1 GitHub-Pages1 Hexo3

喜欢这篇文章的人也看了

随便逛逛

美化你的博客RSS订阅地址

使用带有PHP的主机 + Cloudflare + Worker 搭建一个Umami API

隐私政策

评论内容

0/500

昵称

邮箱

网址

滚动到此处加载评论...

安知鱼

来自安知鱼最新设计与科技的文章

查看全部

文章详情

互动

Hexo + GitHub Pages + Cloudflare Pages 搭建博客教程

222412分钟2025-08-08232未知0

文章摘要

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

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

这个教程适合那些想要快速搭建个人博客，但又不想花费太多成本的人。通过使用Hexo、GitHub和Cloudflare的免费服务，您可以轻松创建一个高效、简洁的博客网站。

1. 准备工作

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

2. 软件支持

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

3. 安装Node

打开Node官网，下载和自己系统相配的Node的安装程序，否则会出现安装问题。下载地址：https://nodejs.org/en
下载后安装，安装的目录可以使用默认目录 C:/Program Files/nodejs/
安装完成后，检查是否安装成功。在键盘按下Win + R键，输入CMD，然后回车，打开CMD窗口，执行 node -v 命令，看到版本信息，则说明安装成功。

修改npm源。npm下载各种模块，默认是从国外服务器下载，速度较慢，建议配置成华为云镜像。打开CMD窗口，运行如下命令：

CMD

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

4. 安装Git

进入官网下载适合你当前系统的 Git：https://git-scm.com/downloads

下载后安装Git即可，安装的目录最好使用默认目录C:/Program Files/Git
点击电脑左下角开始即可看见Git CMD、Git Bash、Git GUI。

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

5. 配置 Git 密钥并连接至 Github

常用 Git 命令

BASH

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

6. 配置用户名和邮箱

BASH

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

通过git config -l 检查是否配置成功。

7. 配置公钥连接Github

执行以下命令生成ssh公钥，此公钥用于你的计算机连接Github

BASH

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

提示Enter file in which to save the key直接一路回车即可，新手小白不推荐设置密钥

之后打开C盘下用户文件夹下的ssh的文件夹，会看到二个文件
id_rsa私钥
id_rsa.pub公钥

用记事本打开id_rsa.pub中的公钥，复制里面的内容，然后开始在github中配置ssh密钥。

将 SSH KEY 配置到 GitHub
进入github，点击右上角头像选择settings，进入设置页后选择 SSH and GPG keys，名字随便起，公钥填到Key那一栏。

测试连接，输入以下命令

BASH

ssh -T [email protected]

第一次连接会提示Are you sure you want to continue connecting (yes/no/[fingerprint])?，输入yes即可

出现连接到账户的信息，说明已经大功告成，至此完成了环境准备工作。

8. 创建GitHub.io仓库

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

9. 初始化 Hexo 博客

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

在Git BASH输入如下命令安装 Hexo

BASH

npm install -g hexo-cli && hexo -v

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

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

BASH

hexo init blog-demo
cd blog-demo
npm i

初始化项目后，打开blog-demo有如下结构

文件名	解释
node_modules	依赖包
scaffolds	生成文章的一些模板
source	用来存放你的文章
themes	主题
.npmignore	发布时忽略的文件（可忽略）
_config.landscape.yml	主题的配置文件
config.yml	博客的配置文件
package.json	项目名称、描述、版本、运行和开发等信

打开Open Git Bash here输入hexo cl && hexo s启动项目
打开浏览器，输入地址：http://localhost:4000/ ，看到视频里的效果，说明你的博客已经构建成功了。

10. 将静态博客挂载到 GitHub Pages

安装 hexo-deployer-git

BASH

npm install hexo-deployer-git --save

修改 _config.yml 文件
在blog-demo目录下的_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。
修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支（注意缩进）

YAML

deploy:type: gitrepository: [email protected]:你的Github名/你的Github名.github.io.gitbranch: main

修改好配置后，运行如下命令，将代码部署到 GitHub（Hexo三连）。

BASH

// Git BASH终端
hexo clean && hexo generate && hexo deploy  

// 或者

// VSCODE终端
hexo cl; hexo g; hexo d

hexo clean：删除之前生成的文件，可以用hexo cl缩写。
hexo generate：生成静态文章，可以用hexo g缩写
hexo deploy：部署文章，可以用hexo d缩写

注意：deploy时可能要你输入 username 和 password。
如果出现Deploy done，则说明部署成功了。

稍等两分钟，打开浏览器访问：https://你Github的用户名.github.io ，这时候我们就可以看到博客内容了。

12. 将静态博客挂载到 Cloudflare Pages

在 Workers 和 Pages 中选择 Pages 的连接到 Git

然后登录你Blog仓库对应的GitHub帐号

点击保存并部署后等待部署完成。
提示成功！您的项目已部署到以下区域：全球后，浏览器访问：Cloudflare Pages 分配的域名，这时候我们就可以看到博客内容了。
当然也可以添加自己的自定义域名

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

13. 如何使用

新建一篇博文

BASH

hexo new 这是一篇新的博文

然后用文本编辑器去编辑_posts/这是一篇新的博文.md里的内容即可，注意要使用Markdown格式书写。
详细使用方法可以查阅 https://hexo.io/zh-cn/docs/writing
编辑完文章保存后可以使用如下命令，生成本地页面 http://localhost:4000/ ，进行预览

BASH

// Git BASH终端
hexo cl && hexo s

// 或者

// VSCODE终端
hexo cl; hexo s

确认无误后使用以下命令，将本地文章推送至GitHub仓库即可

BASH

// Git BASH终端
hexo cl && hexo g && hexo d

// 或者

// VSCODE终端
hexo cl; hexo g; hexo d

VSCODE 终端首次执行报错使用管理员身份打开 `powershell` ,输入以下命令

POWERSHELL

Set-ExecutionPolicy RemoteSigned

Hexo 部分数据无法更新，或者新生成的文件与上一版本完全相同，请清理缓存后重试。

SHELL

  hexo clean

本博文转载自,CM喂饭大佬

CM大佬 : Blog https://blog.cmliussss.com

CM大佬 : YouTobe https://www.youtube.com/@CMLiussss

项目地址 : Hexo https://github.com/hexojs/hexo

参考资料

https://hexo.io/zh-cn/
https://www.fomal.cc/posts/e593433d.html
https://docs.anheyu.com/

主题美化

项目地址 : https://github.com/anzhiyu-c/hexo-theme-anzhiyu
官方文档 : https://docs.anheyu.com/initall.html

主题美化参考资料

BiuXin

生活明朗，万物可爱

本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自 BiuXin

Cloudflare-Pages1 GitHub-Pages1 Hexo3

喜欢这篇文章的人也看了

随便逛逛

美化你的博客RSS订阅地址

使用带有PHP的主机 + Cloudflare + Worker 搭建一个Umami API

隐私政策

评论内容

0/500

昵称

邮箱

网址

滚动到此处加载评论...

安知鱼

来自安知鱼最新设计与科技的文章

查看全部

Hexo + GitHub Pages + Cloudflare Pages 搭建博客教程

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

这个教程适合那些想要快速搭建个人博客，但又不想花费太多成本的人。通过使用Hexo、GitHub和Cloudflare的免费服务，您可以轻松创建一个高效、简洁的博客网站。

1. 准备工作

2. 软件支持

3. 安装Node

4. 安装Git

5. 配置 Git 密钥并连接至 Github

常用 Git 命令

6. 配置用户名和邮箱

7. 配置公钥连接Github

出现连接到账户的信息，说明已经大功告成，至此完成了环境准备工作。

8. 创建GitHub.io仓库

9. 初始化 Hexo 博客

10. 将静态博客挂载到 GitHub Pages

稍等两分钟，打开浏览器访问：https://你Github的用户名.github.io ，这时候我们就可以看到博客内容了。

12. 将静态博客挂载到 Cloudflare Pages

13. 如何使用

VSCODE 终端首次执行报错 使用管理员身份打开 powershell ,输入以下命令

Hexo 部分数据无法更新，或者新生成的文件与上一版本完全相同，请清理缓存后重试。

CM大佬 : Blog https://blog.cmliussss.com

CM大佬 : YouTobe https://www.youtube.com/@CMLiussss

项目地址 : Hexo https://github.com/hexojs/hexo

参考资料

主题美化

主题美化参考资料

喜欢这篇文章的人也看了

美化你的博客RSS订阅地址

使用带有PHP的主机 + Cloudflare + Worker 搭建一个Umami API

Hexo + GitHub Pages + Cloudflare Pages 搭建博客教程

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

这个教程适合那些想要快速搭建个人博客，但又不想花费太多成本的人。通过使用Hexo、GitHub和Cloudflare的免费服务，您可以轻松创建一个高效、简洁的博客网站。

1. 准备工作

2. 软件支持

3. 安装Node

4. 安装Git

5. 配置 Git 密钥并连接至 Github

常用 Git 命令

6. 配置用户名和邮箱

7. 配置公钥连接Github

出现连接到账户的信息，说明已经大功告成，至此完成了环境准备工作。

8. 创建GitHub.io仓库

9. 初始化 Hexo 博客

10. 将静态博客挂载到 GitHub Pages

稍等两分钟，打开浏览器访问：https://你Github的用户名.github.io ，这时候我们就可以看到博客内容了。

12. 将静态博客挂载到 Cloudflare Pages

13. 如何使用

VSCODE 终端首次执行报错 使用管理员身份打开 powershell ,输入以下命令

Hexo 部分数据无法更新，或者新生成的文件与上一版本完全相同，请清理缓存后重试。

CM大佬 : Blog https://blog.cmliussss.com

CM大佬 : YouTobe https://www.youtube.com/@CMLiussss

项目地址 : Hexo https://github.com/hexojs/hexo

参考资料

主题美化

主题美化参考资料

喜欢这篇文章的人也看了

美化你的博客RSS订阅地址

使用带有PHP的主机 + Cloudflare + Worker 搭建一个Umami API

VSCODE 终端首次执行报错使用管理员身份打开 `powershell` ,输入以下命令

VSCODE 终端首次执行报错使用管理员身份打开 `powershell` ,输入以下命令