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

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

1. 博客系统选型静态博客生成器有很多选择，比如：

Hexo（我选用的）

Hugo

Jekyll

Astro（新潮但稍重）

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

生态成熟，插件多，主题丰富

上手门槛不高，Node.js 技术栈也比较熟

与 GitHub Pages 配合流畅

2. 基础环境准备安装依赖工具12345# 安装 Node.js（推荐使用 nvm 管理）nvm install 18# 安装 hexo-clinpm install -g hexo-cli

3. 初始化博客项目123hexo init my-blogcd my-blognpm install

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

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

4. 主题选择与美化我选用了 Butterfly 主题，颜值高且功能强。

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

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

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

5. 本地预览与发布12345# 本地预览hexo s# 生成静态页面hexo g

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

6. GitHub 仓库部署我建立了两个仓库：

hexo-source: 博客源码，包括 markdown、配置、主题等

hexo-blog: 用于部署静态页面（GitHub Pages）

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

1234deploy: type: git repo: git@github.com:yourname/hexo-blog.git branch: main

并安装部署插件：

1npm install hexo-deployer-git --save

之后运行：

1hexo g && hexo d

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

7. 自动部署流程（可选但强烈推荐）如果你懒得每次都本地运行 hexo d，可以配置 GitHub Actions，实现自动部署。

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

8. 写作体验优化我做了以下几点提升写作体验：

使用 Typora 写 Markdown。

使用标签和分类系统方便归类

加入搜索插件、阅读进度条、站内跳转优化

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

前端通过 API 拉取文章内容

后端使用 GitHub Token 更新源码仓库

配合 Webhook 触发自动部署

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

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

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