搭建个人博客的全流程技术方案

搭建个人博客的全流程技术方案

搭建一个个人博客并不复杂，但想搭得舒服、用得顺手，还要兼顾管理、写作体验和自动部署，就需要一套清晰完整的技术方案。本文结合我自己从 0 到 1 的博客搭建经验，记录一次完整的静态博客搭建过程，包括选型、部署、自动化和写作体验优化等内容，简单写写供大家参考。

1. 博客系统选型

静态博客生成器有很多选择，比如：

  • Hexo（我选用的）
  • Hugo
  • Jekyll
  • Astro（新潮但稍重）

我最终选择了 Hexo，原因主要是：

  • 生态成熟，插件多，主题丰富
  • 上手门槛不高，Node.js 技术栈也比较熟
  • 与 GitHub Pages 配合流畅

2. 基础环境准备

安装依赖工具

1
2
3
4
5
# 安装 Node.js（推荐使用 nvm 管理）
nvm install 18

# 安装 hexo-cli
npm install -g hexo-cli

3. 初始化博客项目

1
2
3
hexo init my-blog
cd my-blog
npm install

初始化后，目录结构如下：

1
2
3
4
5
my-blog/
├── _config.yml         # 全局配置
├── source/             # 存放文章与页面内容
├── themes/             # 主题目录
└── public/             # 生成后的静态页面

4. 主题选择与美化

我选用了 Butterfly 主题，颜值高且功能强。

1
2
cd themes/
git clone https://github.com/jerryc127/hexo-theme-butterfly.git butterfly

然后在 _config.yml 里设置 theme: butterfly。

接着根据主题文档配置菜单、社交图标、评论、代码高亮、暗色模式等内容。

5. 本地预览与发布

1
2
3
4
5
# 本地预览
hexo s

# 生成静态页面
hexo g

生成的页面会放在 public/ 目录下。

6. GitHub 仓库部署

我建立了两个仓库：

  • hexo-source: 博客源码，包括 markdown、配置、主题等
  • hexo-blog: 用于部署静态页面（GitHub Pages）

配置 Hexo 部署目标

在 _config.yml 中添加：

1
2
3
4
deploy:
  type: git
  repo: [email protected]:yourname/hexo-blog.git
  branch: main

并安装部署插件：

1
npm install hexo-deployer-git --save

之后运行：

1
hexo g && hexo d

即可将生成的静态页面推送到部署仓库。

7. 自动部署流程（可选但强烈推荐）

如果你懒得每次都本地运行 hexo d，可以配置 GitHub Actions，实现自动部署。

详见我另一篇文章：用 GitHub Actions 实现自动部署流程：我的博客是怎么部署的。

8. 写作体验优化

我做了以下几点提升写作体验：

  • 使用 Typora 写 Markdown。
  • 使用标签和分类系统方便归类
  • 加入搜索插件、阅读进度条、站内跳转优化

9. Qexo 管理面板（可选）

为了更方便地在线发布和管理文章，我接入了 Qexo 面板系统：

  • 前端通过 API 拉取文章内容
  • 后端使用 GitHub Token 更新源码仓库
  • 配合 Webhook 触发自动部署

这样我可以在手机上写博客、发文章，几乎完全摆脱了本地流程。

10. 小结

搭建博客最开始确实有些繁琐，但一旦流程通畅，就会觉得非常值得。你掌握了整个建站的技术链条，还能随心扩展功能，远比依赖平台的博客系统灵活。

如果你也想搭一个属于自己的博客，希望这篇文章能帮你少走些弯路。