Hermes 网站搭建记录

这篇文章记录了 hermes.heqing.space 从零到上线的全过程。

1. 项目初始化

使用 create-next-app 初始化项目，选择 App Router + Tailwind CSS + TypeScript。

pnpm create next-app@latest hermes.heqing.space

2. 核心配置

静态导出

Next.js 支持静态导出，构建后生成纯 HTML/CSS/JS 文件：

// next.config.ts
const nextConfig: NextConfig = {
  output: "export",
  images: { unoptimized: true },
};

Markdown 博客系统

文章存放在 content/posts/ 目录，使用 gray-matter 解析 frontmatter，remark 渲染正文。

每篇文章的结构：

---
title: "文章标题"
date: "2026-04-22"
tags: ["标签"]
summary: "摘要"
---
正文内容...

三种主题

网站支持三种视觉主题：

| 主题 | 风格 | |------|------| | Light | 白色背景，干净简约 | | Dark | 深色背景，冷绿色强调，终端科技感 | | Color | 深色背景，橙色暖调，活力感 |

3. 部署方案

使用 GitHub Actions 自动部署：

1. push 到 main 分支触发
2. GitHub Actions 执行 pnpm build
3. rsync 将 out/ 目录同步到服务器

4. 遇到的坑

Tailwind CSS v4 变化

Tailwind v4 使用了新的配置方式，@theme inline 替代了原来的 tailwind.config.ts 主题扩展。

静态导出限制

静态导出模式下：

• 不支持 Next.js 图片优化（需 unoptimized: true）
• 不支持 API Routes
• 不支持动态服务端渲染

总结

整个搭建过程比较顺利，Next.js 的静态导出功能对个人博客来说完全够用。Markdown 文件管理简单直接，配合 Git 版本控制非常方便。