这篇文章记录我搭建这个个人博客网站的完整过程。

技术栈

  • GitHub Pages：免费的静态网站托管服务，直接与 GitHub 仓库集成
  • Hexo：基于 Node.js 的快速、简洁且高效的静态博客框架
  • Butterfly：一款简洁美观的 Hexo 主题

搭建步骤

1. 环境准备

确保已安装 Node.js 和 Git，然后全局安装 Hexo：

1
npm install -g hexo-cli

2. 初始化博客项目

1
2
3
hexo init blog
cd blog
npm install

3. 安装 Butterfly 主题

1
npm install hexo-theme-butterfly

修改 _config.yml 中的主题配置：

1
theme: butterfly

4. 配置 Butterfly 主题

复制主题配置文件并进行个性化设置：

1
cp node_modules/hexo-theme-butterfly/_config.yml _config.butterfly.yml

主要配置项包括：

  • 网站标题、描述、作者信息
  • 导航菜单
  • 首页设置
  • 代码高亮样式
  • 评论系统（如 Giscus、Twikoo 等）
  • 社交链接

5. 部署到 GitHub Pages

安装部署插件：

1
npm install hexo-deployer-git --save

在 _config.yml 中添加部署配置：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: main

执行部署：

1
hexo clean && hexo generate && hexo deploy

6. 日常写作流程

创建新文章：

1
hexo new post "文章标题"

本地预览：

1
hexo server

总结

通过 GitHub Pages + Hexo + Butterfly 的组合，可以快速搭建一个美观且免费的个人博客。Hexo 提供了简洁的写作体验，Butterfly 主题则让博客拥有现代化的界面设计，而 GitHub Pages 的自动化部署让发布变得非常简单。