一、為什么要搭建個人技術博客？
在技術圈，擁有個人博客的好處不言而喻：
- 簡歷加分項：面試官更青睞有技術沉淀的候選人
- 知識系統化：輸出倒逼輸入，加深技術理解
- 人脈拓展：吸引同行關注，甚至獲得內推機會
據統計，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
