Hexo + GitHub + Cloudflare Pages + AnZhiYu主题 完整搭建使用教程

前言

经过一番折腾，终于搭建好了个人静态博客，整体技术栈选择 Hexo静态博客框架 + GitHub源码托管 + Cloudflare Pages自动部署 + AnZhiYu主题。
这套方案全程免费、无需服务器、自带全球CDN加速，搭配AnZhiYu简约精致的主题，写作、展示体验都很不错。本篇记录完整搭建流程与日常使用方法，既是第一篇博客，也当作自己的建站备忘录。

一、技术栈简单介绍

1. Hexo：基于Node.js的静态博客框架，使用Markdown撰写文章，本地编译生成HTML静态文件，无后端数据库，轻量化、访问速度快；
2. GitHub：存放Hexo博客完整源码，作为代码仓库管理文章、主题、配置文件；
3. Cloudflare Pages：绑定GitHub仓库实现代码提交后自动构建部署，提供免费SSL证书、全球CDN，优化国内外访问体验；
4. AnZhiYu：一款适配Hexo的轻量化简约主题，界面清爽，配置灵活，支持暗黑模式、侧边栏、友链、相册、评论等常用拓展功能。

二、前期本地环境依赖

搭建Hexo前必须提前安装两个基础软件，Windows、Mac系统都适用：

1. Node.js：Hexo运行依赖环境，安装LTS长期支持版即可，安装完成打开终端校验版本：

node -v
npm -v
 
 
2. Git：用于代码拉取、推送至GitHub仓库，校验命令：
 
bash
  
git --version
 
 
环境准备完成后，全局安装Hexo脚手架：
 
bash
  
npm install -g hexo-cli
# 查看Hexo版本，验证是否安装成功
hexo -v
 
 
三、Hexo项目初始化基础操作
 
1. 初始化博客项目
 
打开终端，进入想要存放博客的文件夹，依次执行命令：
 
bash
  
# 初始化名为blog的博客项目
hexo init blog
# 进入博客项目根目录
cd blog
# 安装项目依赖包
npm install
 
 
2. 本地预览默认站点
 
bash
  
# 启动本地服务，默认访问地址：http://localhost:4000
hexo s
 
 
浏览器打开对应地址，能看到Hexo默认页面，代表基础项目初始化成功， Ctrl + C  可终止本地服务。
 
四、更换AnZhiYu主题
 
Hexo默认主题样式比较朴素，本博客使用AnZhiYu主题，更换步骤如下：
 
1. 进入博客根目录下的  themes  文件夹，克隆AnZhiYu主题源码：
 
bash
  
git clone https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
 
 
2. 修改博客根目录配置文件  _config.yml ，找到  theme  配置项，修改为：
 
yaml
  
theme: anzhiyu
 
 
3. 重启本地预览服务  hexo s ，刷新页面即可看到AnZhiYu主题生效，后续主题自定义配置，可在主题目录内的  _config.yml  中修改。
 
五、Hexo日常核心使用命令（写作必备）
 
日常写博客只需要记住这几组核心命令，覆盖90%使用场景：
 
bash
  
# 新建一篇文章，引号内为文章标题
hexo new "文章标题"

# 本地启动服务，实时预览文章、主题修改效果
hexo server
# 简写形式
hexo s

# 清理旧缓存与静态文件
hexo clean

# 编译生成public静态站点文件
hexo generate
# 简写形式
hexo g

# 清理+生成 组合常用命令（推荐写完文章必执行）
hexo clean && hexo g
 
 
六、GitHub + Cloudflare Pages 部署流程
 
1. 本地源码推送到GitHub仓库
 
1. 前往GitHub新建一个空仓库，不要勾选初始化README、license等选项；
2. 博客项目根目录执行Git命令关联远程仓库并推送源码：
 
bash
  
git init
git add .
git commit -m "初始化Hexo博客源码"
git branch -M main
# 替换为你自己的GitHub仓库地址
git remote add origin https://github.com/你的用户名/你的仓库名.git
git push -u origin main
 
 
2. Cloudflare Pages绑定仓库自动部署
 
1. 登录Cloudflare后台，进入  Pages  面板，点击创建项目，授权绑定对应的GitHub博客源码仓库；
2. 配置构建参数：
 
- 构建命令： npm install && npx hexo clean && npx hexo generate 
- 构建输出目录： public 
 
3. 保存配置，Cloudflare会自动执行首次构建部署，部署完成后会分配默认pages域名，也可以后续绑定自己的自定义域名。
 
后续写作流程：本地写完文章 → Git提交推送GitHub仓库 → Cloudflare Pages自动拉取代码重新构建，线上博客自动更新，无需手动上传静态文件。
 
七、基础站点配置（根目录_config.yml）
 
打开博客根目录的  _config.yml ，修改基础网站信息，示例参考：
 
yaml
  
# 网站标题
title: 个人技术小站
# 网站副标题
subtitle: 温故而知新
# 网站描述
description: 记录学习、踩坑、技术笔记
# 作者名称
author: 你的昵称
# 网站语言
language: zh-CN
# 时区
timezone: Asia/Shanghai

# 文章永久链接格式，固定文章路径，利于SEO
permalink: :year/:month/:day/:title/
 
 
八、常见问题小总结
 
1. 修改配置/文章后线上页面不更新
优先本地执行  hexo clean && hexo g  清理缓存再推送代码，Cloudflare端可清除对应域名CDN缓存；
2. Cloudflare构建提示 hexo: command not found
构建命令使用  npx hexo  调用，不要依赖本地全局Hexo环境；
3. 博客图片加载缓慢
建议使用图床托管图片（PicGo+Gitee/阿里云OSS等），文章中引用图床网络地址，减少本地静态资源体积。
 
结语
 
至此，整套Hexo博客基础搭建流程全部完成，往后就可以用Markdown自由记录笔记、分享内容啦。后续会慢慢折腾主题美化、评论系统、站内搜索、访问统计等拓展功能，持续完善个人小站。
 
  
使用说明：
1. 把上面全部内容复制，新建md文章，头部frontmatter格式完全贴合你要求的样式；
2. `cover: 后面的链接` 替换成你自己的封面图床链接，不需要封面可以直接删掉这一行；
3. 文中仓库地址、昵称、站点标题等占位内容，自行修改成你的个人信息即可；
4. 执行 `hexo new "Hexo + GitHub + Cloudflare Pages + AnZhiYu主题 完整搭建使用教程"` 新建文章，粘贴正文进去就能直接用。