Hexo博客搭建教程：从零开始搭建个人博客，Hexo + GitHub Pages + Cloudflare Pages 完整指南

前言

Hexo 是一个快速、简洁且高效的博客框架，基于 Node.js，支持 Markdown 语法。搭配 GitHub Pages 或 Cloudflare Pages 可以实现零成本搭建个人博客。

本教程将从零开始，教你搭建一个属于自己的个人博客网站。

1. 准备工作

1.1. 需要准备的东西

  • GitHub 账号：用于托管博客代码（必须）
  • 域名：非必须，可使用 GitHub 提供的 <用户名>.github.io 免费域名
  • Cloudflare 账号：非必须，用于 CDN 加速和绑定自定义域名

1.2. 安装 Node.js

Hexo 基于 Node.js，需要先安装 Node.js 环境。

  1. 访问 Node.js 官网 下载 LTS 版本
  2. 安装完成后，打开命令行验证：
1
2
node -v
npm -v

配置 npm 镜像源（国内加速）：

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

1.3. 安装 Git

下载并安装 Git，推荐使用 Git Bash（Linux 风格命令行）。

2. 配置 Git 并连接 GitHub

2.1. 配置用户名和邮箱

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

2.2. 配置 SSH 密钥连接 GitHub

1
2
3
# 生成 SSH 密钥
ssh-keygen -t rsa -C "你的邮箱"
# 一路回车即可

查看并复制公钥：

1
cat ~/.ssh/id_rsa.pub

登录 GitHub → Settings → SSH and GPG keys → 点击 New SSH key，将公钥粘贴保存。

测试连接：

1
2
ssh -T git@github.com
# 首次连接输入 yes 确认

2.3. 创建 GitHub 仓库

在 GitHub 上创建一个新仓库，命名为 <你的用户名>.github.io，设置为 Public。

3. 初始化 Hexo 博客

3.1. 安装 Hexo

1
2
npm install -g hexo-cli
hexo -v

3.2. 初始化项目

创建一个文件夹用于存放博客项目：

1
2
3
4
mkdir my-blog
cd my-blog
hexo init
npm install

3.3. 本地预览

1
hexo clean && hexo server

打开浏览器访问 http://localhost:4000 即可看到默认的 Hexo 博客页面。

4. 部署到 GitHub Pages

4.1. 安装部署插件

1
npm install hexo-deployer-git --save

4.2. 配置部署信息

修改 _config.yml 文件，找到 deploy 配置项：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:你的用户名/你的用户名.github.io.git
  branch: main

4.3. 部署命令

1
hexo clean && hexo generate && hexo deploy

简写形式：

1
hexo cl && hexo g && hexo d

部署完成后，访问 https://你的用户名.github.io 即可看到你的博客。

5. 部署到 Cloudflare Pages

5.1. 在 Cloudflare 中连接 GitHub

  1. 登录 Cloudflare Dashboard
  2. 进入 Workers 和 Pages → Pages → 连接到 Git
  3. 授权 Cloudflare 访问你的 GitHub 仓库
  4. 选择你的博客仓库

5.2. 配置构建信息

  • 框架预设：选择 Hexo
  • 构建命令：hexo generate
  • 构建输出目录：public

5.3. 部署

点击”保存并部署”，等待构建完成即可。

部署成功后，可以在 Cloudflare Pages 中绑定自定义域名，启用 HTTPS 等。

6. 基本使用方法

6.1. 新建文章

1
hexo new "文章标题"

在 source/_posts/ 目录下会生成一个 Markdown 文件，用编辑器打开即可撰写内容。

6.2. 编辑后本地预览

1
hexo clean && hexo server

6.3. 确认无误后部署

1
hexo clean && hexo generate && hexo deploy

参考资料

下一篇：hexo博客美化 — 教你安装和配置安知鱼主题，美化你的博客。