1. 为什么选择Hexo + GitHub Pages搭建个人博客
十年前我第一次接触独立博客时,用的是WordPress,需要自己租服务器、配置数据库、处理各种插件兼容问题。直到2016年发现Hexo这个静态博客框架,配合GitHub Pages的免费托管服务,才真正找到了轻量高效的解决方案。这套组合有三大不可替代的优势:
首先是零成本。GitHub Pages提供免费的静态网站托管服务,不需要自己购买服务器。我测试过,即使日PV过万的博客也能稳定运行(当然前提是没被爬虫疯狂抓取)。对于刚起步的创作者来说,这能省下每年几百到几千的服务器费用。
其次是极简工作流。Hexo基于Node.js开发,用Markdown写文章,生成静态HTML文件。我现在的写作流程是:用VS Code写Markdown → 本地预览 → hexo deploy一键部署。整个过程不需要打开浏览器操作后台,专注写作本身。
最后是高度可定制。Hexo有近800个主题和200多个插件,能实现从技术文档到摄影作品集等各种风格的站点。我的博客就基于NexT主题魔改过多次,加入了目录导航、数学公式支持等实用功能。
提示:虽然WordPress有更丰富的插件生态,但对于以写作为主的个人博客,静态站点的安全性和性能优势明显。我的WordPress站点曾经一个月被攻击3次,转用Hexo后再没遇到过安全问题。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境准备与Hexo安装
2.1 基础软件安装
在开始前需要准备以下环境(以Windows系统为例):
-
Node.js:Hexo的运行环境。建议安装LTS版本(当前是18.x),安装时勾选"Automatically install the necessary tools"选项。安装完成后在命令行验证:
bash复制node -v # 应显示类似v18.16.0 npm -v # 应显示类似9.5.1 -
Git:版本控制和部署工具。安装时选择"Use Visual Studio Code as Git's default editor",其他选项保持默认。安装后需要配置用户信息:
bash复制git config --global user.name "你的GitHub用户名" git config --global user.email "你的GitHub注册邮箱" -
VS Code(可选但推荐):最佳Markdown编辑器之一。安装后建议添加以下插件:
- Markdown All in One:快捷键和语法支持
- Markdown Preview Enhanced:实时预览
- Paste Image:直接粘贴图片到Markdown
2.2 Hexo初始化
打开命令行工具(建议用Windows Terminal或Git Bash),执行以下命令:
bash复制npm install -g hexo-cli # 全局安装Hexo命令行工具
hexo init myblog # 初始化博客项目
cd myblog # 进入项目目录
npm install # 安装依赖
此时目录结构如下:
code复制myblog
├── _config.yml # 全局配置文件
├── package.json # 项目依赖配置
├── scaffolds/ # 模板文件夹
├── source/ # 文章和静态资源
└── themes/ # 主题文件夹
启动本地服务器测试:
bash复制hexo server
浏览器打开http://localhost:4000 就能看到默认的Landscape主题博客。
3. 主题配置与个性化
3.1 安装NexT主题
Hexo默认主题比较简陋,我推荐使用NexT主题。在博客目录下执行:
bash复制git clone https://github.com/next-theme/hexo-theme-next themes/next
然后修改_config.yml中的主题配置:
yaml复制theme: next
NexT主题有独立的配置文件themes/next/_config.yml,建议先备份原始文件再修改。几个关键配置项:
yaml复制# 选择风格
scheme: Muse # 可选Muse/Mist/Pisces/Gemini
# 菜单配置
menu:
home: / || fa fa-home
archives: /archives/ || fa fa-archive
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
# 社交链接
social:
GitHub: https://github.com/yourname || fab fa-github
Twitter: https://twitter.com/yourname || fab fa-twitter
3.2 实用功能扩展
通过安装插件可以增强博客功能:
-
文章加密(适合技术笔记):
bash复制
npm install --save hexo-blog-encrypt在文章头部添加:
markdown复制--- title: 加密文章示例 password: 123456 --- -
数学公式支持:
bash复制
npm install hexo-filter-mathjax在
_config.yml中添加:yaml复制mathjax: enable: true per_page: true -
本地搜索:
bash复制
npm install hexo-generator-searchdb配置:
yaml复制search: path: search.xml field: post format: html limit: 10000
4. GitHub Pages部署实战
4.1 仓库创建与配置
-
在GitHub新建仓库,命名格式必须为
用户名.github.io(例如我的仓库是tech-blog.github.io) -
在博客目录安装部署插件:
bash复制
npm install hexo-deployer-git --save -
修改
_config.yml的部署配置:yaml复制deploy: type: git repo: https://github.com/用户名/用户名.github.io.git branch: main message: "Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"
4.2 自动化部署优化
手动执行hexo deploy每次都需要重新生成静态文件,可以通过GitHub Actions实现自动部署:
-
在博客根目录创建
.github/workflows/deploy.yml文件:yaml复制name: Deploy Blog on: [push] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Use Node.js uses: actions/setup-node@v3 with: node-version: '18' - name: Install Dependencies run: | npm install npm install hexo-cli -g - name: Deploy run: | hexo clean hexo deploy -
配置GitHub Pages源:
- 进入仓库Settings → Pages
- Branch选择
main,目录选择/(root)
踩坑记录:第一次部署后访问出现404,是因为GitHub Pages默认使用Jekyll构建,需要在仓库根目录添加
.nojekyll空文件。
5. 内容管理与写作技巧
5.1 Markdown高效写作
Hexo支持标准的Markdown语法,推荐使用Typora或VS Code写作。几个实用技巧:
-
Front-matter:每篇文章开头的YAML配置区域,常用字段:
markdown复制--- title: 文章标题 date: 2023-07-20 14:00:00 tags: [Hexo, GitHub] categories: 技术 cover: /images/cover.jpg # 封面图 --- -
图床方案:
- 免费方案:PicGo + GitHub仓库
- 付费推荐:七牛云OSS(10GB存储约5元/年)
- 本地引用:图片放在
source/images目录,用引用
-
高级语法:
markdown复制<!-- 注脚 --> 这是一个注脚示例[^1] [^1]: 这里是注脚内容 <!-- 任务列表 --> - [x] 已完成任务 - [ ] 待办事项 <!-- 流程图(需要安装mermaid插件) --> ```mermaid graph TD A[开始] --> B{条件} B -->|是| C[执行] B -->|否| D[结束]code复制
5.2 文章组织策略
我的博客目录结构如下,供参考:
code复制source
├── _drafts # 草稿
├── _posts # 正式文章
│ ├── 2023-01-01-hello-world.md
│ └── tech # 技术分类
│ └── 2023-02-01-hexo-guide.md
└── images # 图片资源
建议的命名规范:
- 文章文件名:
YYYY-MM-DD-标题英文.md - 图片文件:
/images/文章标题/xxx.png
6. 常见问题解决方案
6.1 部署失败排查
问题现象:hexo deploy报错ERROR Deployer not found: git
- 原因:未安装hexo-deployer-git插件
- 解决:
bash复制
npm install hexo-deployer-git --save
问题现象:部署后CSS样式丢失
- 原因:主题配置文件
_config.yml中url未正确设置 - 解决:
yaml复制url: https://用户名.github.io root: /
6.2 图片显示问题
本地开发正常但部署后图片404:
- 检查图片路径是否以
/开头(如/images/xxx.png) - 确保图片在
source目录下 - 如果使用CDN,需要修改主题配置中的图片路径前缀
6.3 中文搜索失效
现象:搜索框输入中文无结果
- 解决:修改搜索插件配置
yaml复制然后执行:search: path: search.xml field: post format: html limit: 10000 content: true # 添加这行bash复制
hexo clean && hexo generate
7. 进阶优化建议
7.1 性能优化
-
图片压缩:
bash复制
npm install hexo-image-min --save自动压缩
source/images下的图片 -
CDN加速:
- 在
_config.yml中配置:yaml复制jsdelivr: enable: true repo: 用户名/用户名.github.io@main - 修改资源引用路径为:
html复制
https://cdn.jsdelivr.net/gh/用户名/用户名.github.io@main/images/xxx.png
- 在
7.2 数据备份
虽然GitHub会保存所有提交记录,但仍建议:
- 定期导出
source/_posts目录下的Markdown文件 - 使用GitHub的Repository → Settings → Backup功能
- 重要图片资源同步到其他云存储
7.3 访问统计
推荐使用不依赖Cookie的统计工具:
-
Umami:自建开源统计
yaml复制# 在主题配置中添加 umami: enable: true website_id: your-id js_url: https://your-umami-instance.com/script.js -
Cloudflare Analytics:无需JS的隐私友好统计
这套Hexo + GitHub Pages方案我已经使用了7年,期间经历过3次大版本升级。最大的体会是:技术方案越简单,越能专注于内容创作本身。现在我的博客日均访问量约2000PV,从未出现过性能问题。如果你在搭建过程中遇到任何问题,欢迎在评论区交流讨论。
