一、为什么要搭建个人技术博客？
在技术圈，拥有个人博客的好处不言而喻：
- 简历加分项：面试官更青睐有技术沉淀的候选人
- 知识系统化：输出倒逼输入，加深技术理解
- 人脉拓展：吸引同行关注，甚至获得内推机会
据统计，92%的技术大牛都有自己的技术博客（数据来源：Stack Overflow 2024开发者调查）
二、为什么选择GitHub Pages+Hexo？
方案对比：
| 方案 | 优点 | 缺点 |
|---|---|---|
| 自建服务器 | 完全自定义，功能强大 | 成本高，维护复杂 |
| WordPress | 功能丰富，插件多 | 性能一般，需服务器 |
| GitHub Pages+Hexo | 免费、稳定、无运维成本 | 需要一定技术门槛 |
三、环境准备
-
安装Git
# Windows用户下载安装包：https://git-scm.com/download/win # macOS用户使用brew安装： brew install git # 验证安装 git --version # 输出类似：git version 2.39.2 -
安装Node.js和npm
# macOS用户： brew install node # Ubuntu用户： sudo apt-get install nodejs npm # 验证安装 node -v # 输出：v18.16.0 npm -v # 输出：9.5.1
四、GitHub Pages配置
-
创建GitHub仓库
- 仓库名必须为：
你的用户名.github.io（如：doubao.github.io） - 选择Public公开仓库（免费）
- 仓库名必须为：
-
配置GitHub账号
git config --global user.name "你的GitHub用户名" git config --global user.email "你的GitHub邮箱" # 生成SSH Key ssh-keygen -t rsa -b 4096 -C "你的GitHub邮箱"将生成的公钥（
~/.ssh/id_rsa.pub）添加到GitHub账户设置中
五、Hexo安装与配置
-
安装Hexo CLI
npm install -g hexo-cli -
初始化博客
hexo init my-blog cd my-blog npm install -
目录结构解析
my-blog/ ├── _config.yml # 博客全局配置 ├── package.json # 项目依赖 ├── scaffolds/ # 文章模板 ├── source/ # 文章和资源 │ ├── _drafts/ # 草稿 │ └── _posts/ # 文章 └── themes/ # 主题文件夹
六、主题配置（以Butterfly主题为例）
-
安装主题
cd my-blog git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly -
修改配置
# _config.yml theme: butterfly -
主题个性化
# themes/butterfly/_config.yml # 修改博客标题 title: 豆包的技术博客 # 设置作者 author: 豆包 # 配置社交链接 social:GitHub: https://github.com/yourname || fab fa-githubLinkedIn: https://www.linkedin.com/in/yourname || fab fa-linkedin
七、发布文章
-
创建新文章
hexo new "第一篇博客"文章默认生成在
source/_posts/第一篇博客.md -
文章格式示例
--- title: 第一篇博客 date: 2025-07-12 10:00:00 tags:- 技术- 博客 categories:- 教程 ---这是我的第一篇技术博客...
八、部署到GitHub Pages
-
安装部署插件
npm install hexo-deployer-git --save -
配置部署信息
# _config.yml deploy:type: gitrepo: git@github.com:你的用户名/你的用户名.github.io.gitbranch: main -
一键部署
hexo clean && hexo generate && hexo deploy
九、常见问题解决
-
访问404错误
- 检查仓库名是否为
用户名.github.io - 确认GitHub Pages设置中分支为main
- 检查仓库名是否为
-
图片显示问题
# 使用相对路径引用图片  -
主题不生效
- 检查主题文件夹名称是否为
themes/butterfly - 确认
_config.yml中theme配置正确
- 检查主题文件夹名称是否为
十、进阶优化
-
添加评论系统（Valine）
# themes/butterfly/_config.yml valine:enable: trueappId: your_appIdappKey: your_appKey -
配置SEO
# themes/butterfly/_config.yml seo: true -
添加谷歌分析
# themes/butterfly/_config.yml google_analytics:enable: truetracking_id: UA-XXXXXXXX-X
十一、总结
通过本文，你已经学会了：
- GitHub Pages和Hexo的基本原理
- 博客环境搭建与配置
- 主题个性化设置
- 文章发布与部署流程
- 常见问题解决方法
现在，访问 https://你的用户名.github.io 即可看到你的个人博客！后续可以持续更新文章，打造属于自己的技术品牌。
十二、扩展阅读
- Hexo官方文档
- Butterfly主题文档
- GitHub Pages官方指南
十三、互动话题
你打算在博客中分享哪些技术内容？遇到问题欢迎在评论区留言，我会一一解答！
作者简介
豆包，全栈开发工程师，热衷于技术分享与开源项目。
GitHub：https://github.com/doubao
个人博客：https://doubao.github.io
