你好，博客
2025-02-18·4分钟阅读·1354 字
今天，我的个人博客终于上线了。
这不是我第一次尝试搭建博客。从 WordPress 到 Hexo，从 Ghost 到自建系统，每次都因为各种原因半途而废。但这次不一样——这是一个完全由我和我的 AI 助手 Coder 共同构建的系统。
技术栈
这个博客基于以下技术构建：
- Next.js 15 - React 全栈框架，支持 SSR 和静态生成
- TypeScript - 类型安全，减少运行时错误
- Tailwind CSS - 原子化 CSS，快速构建界面
- Markdown - 内容写作，专注内容本身
- PM2 - 进程管理，保持服务稳定运行
功能特性
内容管理
- Markdown 写作 - 使用 frontmatter 管理文章元数据
- 标签分类 - 支持自动分类和手动指定分类
- 相关文章 - 基于标签推荐相关内容
- 阅读统计 - 显示阅读时间和字数
阅读体验
- 响应式设计 - 移动端优先，适配各种设备
- 暗色模式 - 保护眼睛，自动跟随系统设置
- 代码高亮 - GitHub Dark 主题，支持多种语言
- 目录导航 - 侧边栏显示文章结构
- 返回顶部 - 快速回到文章开头
搜索和导航
- 全文搜索 - 搜索标题、摘要和标签
- 标签云 - 按热门程度和分类展示标签
- 面包屑导航 - 清晰展示当前位置
- RSS 订阅 - 支持标准 RSS 订阅
内容协商
支持通过 HTTP 请求头获取不同格式的内容：
# 获取 HTML 页面（默认）
curl https://blog.example.com/posts/hello-blog
# 获取 Markdown 源文件
curl -H "Accept: text/markdown" https://blog.example.com/posts/hello-blog
设计理念
简洁至上
这个系统没有复杂的后台管理界面，没有数据库，没有用户认证。所有内容都是纯 Markdown 文件，存储在文件系统中。简单意味着：
- 易于备份 - 复制文件夹即可
- 易于迁移 - 没有数据库依赖
- 易于版本控制 - Git 管理一切
- 易于理解 - 代码即文档
移动优先
在这个手机优先的时代，博客的移动端体验至关重要。设计时采用"移动端平铺，PC端卡片"的策略：
- 移动端：简洁的平铺列表，减少视觉干扰
- PC端：卡片式布局，充分利用屏幕空间
渐进增强
系统采用渐进增强的设计：
- 基础层 - 静态 HTML，确保可访问性
- 增强层 - JavaScript 增强交互体验
- 优化层 - 按需加载，性能优化
构建过程
这个项目我和 Coder 一起开发了大约 4 个小时。整个过程是这样的：
阶段一：基础结构（1小时）
- 初始化 Next.js 项目
- 配置 TypeScript 和 Tailwind CSS
- 设计文章数据结构
- 实现 Markdown 解析
阶段二：核心功能（1小时）
- 文章列表页
- 文章详情页
- 标签页
- 搜索功能
阶段三：增强功能（1小时）
- RSS 订阅
- 代码高亮
- 暗色模式
- 阅读时间和字数统计
阶段四：细节优化（1小时）
- 响应式布局调整
- 标签分类系统
- 相关文章推荐
- 目录导航
技术亮点
中文友好
系统对中文内容做了特别优化：
- 支持 URL 编码的中文文件名
- 中文标签的 URL 编码处理
- 中文内容的阅读时间计算
标签分类
标签采用混合分类方案：
- 手动指定 - 在文章 frontmatter 中指定标签分类
- 自动匹配 - 基于关键词自动分类
- 兜底方案 - 未分类的归入"其他"
---
tags:
- React
- 性能优化
tagCategories:
React: frontend
性能优化: frontend
---
模板系统
支持多种展示模板：
default- 经典风格minimal- 极简风格magazine- 杂志风格（当前使用）
通过配置文件一键切换：
// src/blog.config.ts
export const siteConfig = {
template: "magazine",
// ...
};
未来计划
虽然系统已经可以正常运行，但还有很多可以改进的地方：
短期目标
- 修复搜索功能的中文支持问题
- 添加文章归档页面（按年月）
- 优化图片加载（懒加载、响应式图片）
- 添加访问统计（不依赖第三方服务）
中期目标
- 评论系统（可能使用 GitHub Issues）
- 文章系列功能（教程、系列文章）
- 全文搜索（服务端搜索）
- 文章推荐算法优化
长期目标
- 多语言支持
- 多作者支持
- 后台管理界面
- 插件系统
写在最后
这个博客不仅仅是一个技术项目，更是我和 AI 协作的实验。在整个开发过程中，Coder 承担了：
- 架构设计 - 提供技术选型建议
- 代码实现 - 编写大部分代码
- 问题排查 - 快速定位和修复 bug
- 文档编写 - 自动生成技术文档
这种协作模式让开发效率提升了至少 3 倍。当然，AI 还不能完全替代人类的创造力和判断力，但它确实是一个强大的助手。
如果你也想搭建自己的博客，欢迎参考这个项目。代码已经开源（如果有一天我开源的话），或者你可以直接联系我获取。
这是第一篇文章，以后会在这里分享技术笔记、项目经验、读书心得等内容。希望这个博客能成为我的知识库，也希望能帮到有需要的人。
欢迎来到我的博客！