构建个人博客

一直想有一个轻量、可控、方便维护的个人博客,用来记录技术学习、项目实践和一些阶段性的思考。这次选择了 Hexo 作为静态博客框架,配合 Icarus 主题和 GitHub Pages 完成部署。

技术选型

这个博客的核心目标很简单:写作体验要轻,部署流程要稳定,后续维护成本要低。

因此整体方案采用:

  • Hexo:负责将 Markdown 文章生成静态页面
  • Icarus:提供博客主题、侧边栏、导航和文章布局
  • GitHub Pages:托管生成后的静态站点
  • GitHub Actions:在推送代码后自动构建并发布

这种方式不需要单独购买服务器,也不需要维护数据库。文章以 Markdown 文件保存,版本记录由 Git 管理,迁移和备份都比较直接。

搭建过程

项目初始化后,主要完成了站点基础配置、主题配置和线上发布流程。

站点配置中设置了博客标题、作者、语言、站点地址和文章链接格式。主题配置中调整了导航栏、个人资料卡片、社交链接和侧边栏组件,让页面更接近个人博客的实际使用场景。

头像使用 GitHub 用户头像:

1
2
avatar: https://github.com/FishMoun.png
avatar_rounded: true

这样 GitHub 头像更新后,博客侧边栏也会跟着使用最新头像。

清理默认组件

Icarus 主题默认包含一些可选组件,例如 AdSense 广告位、FeedBurner 邮件订阅和 follow.it 订阅框。如果这些服务没有配置完整,页面上会出现无效提示或空表单。

这次将未使用的广告位和邮件订阅组件去掉,只保留 GitHub 链接和 RSS 订阅入口。这样页面更简洁,也避免读者看到不可用的功能。

文章分类

博客已经支持分类功能。文章只需要在 Front Matter 中加入 categories 字段,就会自动出现在分类页面中。

例如本文的分类配置:

1
2
categories:
- 个人项目

后续如果继续记录项目搭建、工具使用或实践复盘,可以按照主题拆分为不同分类,方便长期整理。

本地开发与线上部署

本地开发时可以先启动预览服务:

1
npm run server

访问 http://localhost:4000/ 就可以查看效果。主题配置修改后,如果页面没有变化,通常需要重启 Hexo 服务,或者在浏览器中强制刷新。

确认无误后,再将改动提交并推送到 GitHub。GitHub Actions 会自动执行构建,将 public 目录中的静态页面发布到 GitHub Pages。

小结

这次博客搭建完成了从本地配置、主题调整、头像替换、组件清理到线上部署的完整流程。后续重点会放在内容本身:持续记录项目实践,把零散经验沉淀成可回顾、可复用的文章。