在互联网时代，拥有一个属于自己的个人博客不仅是技术能力的体现，更是分享知识、记录成长的重要平台。相比使用第三方博客服务，自建博客不仅能完全掌控内容与样式，还能深入理解Web开发的核心原理。本文将带领大家从零开始，使用Hexo 静态网站生成器与GitHub Pages免费托管服务，搭建一个功能完整、美观易用的个人博客。
一、为什么选择Hexo + GitHub Pages？
1.1 优势对比
- Hexo：基于Node.js的静态博客框架，支持Markdown语法、主题定制、插件扩展，生成速度快，适合技术类博客。
- GitHub Pages：GitHub提供的免费静态网站托管服务，支持自定义域名、HTTPS，与Git版本控制无缝集成。
对比其他方案：
| 方案 | 优点 | 缺点 |
|---|---|---|
| WordPress | 功能丰富，插件多 | 需要服务器，维护成本高 |
| 静态博客（Hexo等） | 免费、速度快、安全 | 动态功能需依赖第三方服务 |
| 第三方平台（CSDN等） | 零门槛，流量大 | 定制性差，广告多 |
1.2 适用场景
- 技术分享、学习笔记
- 个人作品展示
- 轻量级企业官网
二、环境准备
2.1 安装Node.js
Hexo基于Node.js，需先安装：
bash
`# 下载Node.js LTS版本（推荐）
# 官网：https://nodejs.org/
# 验证安装
node -v
npm -v`2.2 安装Git
用于版本控制与部署到GitHub：
bash
`# 下载Git
# 官网：https://git-scm.com/
# 验证安装
git --version`2.3 注册GitHub账号
- 访问GitHub官网注册账号
- 创建新仓库，命名为
username.github.io（username需替换为你的GitHub用户名）
三、Hexo博客搭建
3.1 初始化项目
bash
`# 全局安装Hexo
npm install -g hexo-cli
# 创建博客目录并初始化
hexo init my-blog
cd my-blog
npm install`3.2 生成静态文件并本地预览
bash
`hexo generate # 生成静态文件
hexo server # 启动本地服务器（默认地址：http://localhost:4000）`3.3 配置博客信息
编辑_config.yml文件，修改以下关键配置：
yaml
`# 网站信息
title: 我的个人博客
subtitle: 记录技术成长之路
description: 前端开发、后端实践、工具教程
keywords: 博客,技术,前端
author: 你的名字
language: zh-CN
timezone: Asia/Shanghai
# URL配置（部署到GitHub Pages时需修改）
url: https://username.github.io # 替换为你的GitHub Pages地址
root: /
# 部署配置（后文详细说明）
deploy:
type: git
repo: https://github.com/username/username.github.io.git
branch: main`四、主题选择与定制
4.1 安装主题
以流行的Next主题为例：
bash
`cd my-blog
git clone https://github.com/next-theme/hexo-theme-next themes/next`4.2 启用主题
修改_config.yml：
yaml
`theme: next`4.3 主题配置
编辑themes/next/_config.yml，自定义：
- 菜单项（导航栏）
- 社交链接（GitHub、微博等）
- 评论系统（如Disqus、Gitalk）
- 代码高亮样式
示例：添加GitHub链接
yaml
`social:
GitHub: https://github.com/username || github
Email: mailto:your@email.com || envelope`五、部署到GitHub Pages
5.1 安装部署插件
bash
`npm install hexo-deployer-git --save`5.2 配置SSH密钥（可选但推荐）
bash
`# 生成SSH密钥
ssh-keygen -t ed25519 -C "your_email@example.com"
# 将公钥添加到GitHub
# 1. 复制公钥内容：cat ~/.ssh/id_ed25519.pub
# 2. 进入GitHub设置 → SSH and GPG keys → New SSH key`5.3 部署博客
bash
`hexo clean # 清理缓存
hexo generate # 生成静态文件
hexo deploy # 部署到GitHub`部署成功后，访问https://username.github.io即可看到博客。
六、进阶功能
6.1 自定义域名
- 购买域名（如阿里云、腾讯云）
- 在GitHub仓库的
Settings→Pages中设置域名 - 在域名服务商处添加CNAME记录指向
username.github.io
6.2 添加评论系统（以Gitalk为例）
- 注册GitHub OAuth App获取
Client ID和Client Secret - 安装Gitalk插件：
bash
`npm install hexo-gitalk --save`- 配置
_config.yml：
yaml
`gitalk:
clientID: '你的Client ID'
clientSecret: '你的Client Secret'
repo: username.github.io # 仓库名
owner: username # GitHub用户名
admin: username # 管理员列表`6.3 添加SEO优化
yaml
`# _config.yml中配置
# SEO设置
seo:
title: 我的博客
description: 技术分享平台
keywords: 博客,技术,前端
# 安装hexo-generator-seo插件
npm install hexo-generator-seo --save`七、常见问题解决
7.1 部署失败：Permission denied (publickey)
- 确保已配置SSH密钥
- 检查GitHub仓库地址是否正确（HTTPS或SSH）
7.2 主题样式不生效
- 清除缓存：
hexo clean - 检查主题配置文件路径是否正确
7.3 自定义域名无法访问
- 检查DNS记录是否生效（通常需要24小时）
- 确保GitHub Pages设置中已启用自定义域名
八、总结
通过本文的步骤，你已成功搭建了一个基于Hexo + GitHub Pages的个人博客。接下来可以：
- 持续撰写高质量技术文章
- 探索更多Hexo插件（如搜索、阅读统计）
- 参与开源社区，贡献主题或插件
附：完整流程图
mermaid
`graph TD
A[安装Node.js和Git] --> B[初始化Hexo项目]
B --> C[选择并配置主题]
C --> D[本地预览]
D --> E{满意?}
E -- 是 --> F[部署到GitHub Pages]
E -- 否 --> C
F --> G[配置自定义域名]
G --> H[添加评论/SEO等插件]`资源推荐：
希望本文能帮助你开启博客之旅，欢迎在评论区分享你的博客链接或遇到的问题！