从0到1搭建个人技术博客：用GitHub Pages+Hexo实现-EW帮帮网

一、为什么要搭建个人技术博客？

在技术圈，拥有个人博客的好处不言而喻：

简历加分项：面试官更青睐有技术沉淀的候选人
知识系统化：输出倒逼输入，加深技术理解
人脉拓展：吸引同行关注，甚至获得内推机会

据统计，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-github
  LinkedIn: 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: git
  repo: git@github.com:你的用户名/你的用户名.github.io.git
  branch: main

一键部署

hexo clean && hexo generate && hexo deploy

九、常见问题解决

访问404错误
- 检查仓库名是否为 用户名.github.io
- 确认GitHub Pages设置中分支为main

图片显示问题

# 使用相对路径引用图片
![示例图片](https://picsum.photos/800/400?random=2)

主题不生效
- 检查主题文件夹名称是否为themes/butterfly
- 确认_config.yml中theme配置正确

十、进阶优化

添加评论系统（Valine）

# themes/butterfly/_config.yml
valine:
  enable: true
  appId: your_appId
  appKey: your_appKey

配置SEO

# themes/butterfly/_config.yml
seo: true

添加谷歌分析

# themes/butterfly/_config.yml
google_analytics:
  enable: true
  tracking_id: UA-XXXXXXXX-X

十一、总结

通过本文，你已经学会了：

GitHub Pages和Hexo的基本原理
博客环境搭建与配置
主题个性化设置
文章发布与部署流程
常见问题解决方法

现在，访问 https://你的用户名.github.io 即可看到你的个人博客！后续可以持续更新文章，打造属于自己的技术品牌。

十三、互动话题

你打算在博客中分享哪些技术内容？遇到问题欢迎在评论区留言，我会一一解答！

作者简介
豆包，全栈开发工程师，热衷于技术分享与开源项目。
GitHub：https://github.com/doubao
个人博客：https://doubao.github.io

从0到1搭建个人技术博客：用GitHub Pages+Hexo实现