1874 字
9 分钟
Astro 博客安装、目录布局与 Fuwari 主题接入记录

今天把本地博客从一个最小可用的 Astro 版本,整理成了适合正式部署的结构,并进一步切换到了 Fuwari 主题。整个过程的重点不只是把页面跑起来,而是把目录、构建方式和后续写作方式一起固定下来,这样后面维护会轻松很多。

这次最终采用的方案#

现在的博客结构可以概括成三层:

  1. Astro 负责内容组织和静态页面生成。
  2. Fuwari 提供博客主题、归档、搜索、RSS 和整体样式。
  3. Docker Compose + Nginx 作为生产部署方式。

这样拆开的好处是很明确的。Astro 负责生成静态文件,Nginx 只负责托管这些静态文件,运行时足够简单;而主题层则由 Fuwari 提供,不需要自己从零写页面结构。

现在的目录布局#

当前最重要的目录是这些:

WechatWorkspace/
├── astro-blog/
│ ├── src/
│ │ ├── content/
│ │ │ ├── posts/
│ │ │ └── spec/
│ │ ├── components/
│ │ ├── layouts/
│ │ ├── pages/
│ │ └── config.ts
│ ├── public/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── astro.config.mjs
│ ├── package.json
│ └── pnpm-lock.yaml
├── docker-compose.yml
└── docker-compose.dev.yml

这里面最关键的是:

  • astro-blog/src/content/posts/ 以后新文章都放这里。
  • astro-blog/src/config.ts 管站点标题、简介、头像、导航栏和主题色。
  • docker-compose.yml 生产版启动方式。
  • docker-compose.dev.yml 开发预览方式。

这次安装和改造的流程#

1. 先搭一个最小 Astro 博客#

一开始先做的是一个很轻的 Astro 站点,只需要文章列表页和文章详情页,目的是先确认现有 Markdown 能正常导入和阅读。

当时的重点不是主题,而是验证两件事:

  • 现有 Markdown 能不能顺利迁进去。
  • Docker Compose 在本地能不能稳定跑起来。

这样做的好处是,先把内容迁移链路打通,再换主题,问题会少很多。

2. 再切成生产版部署结构#

确认内容能跑以后,把部署方式改成了正式一点的模式:

  • 构建阶段使用 Node 容器执行 astro build
  • 输出 dist/
  • Nginx 镜像只负责托管 dist/

对应思路就是典型的多阶段构建:

FROM node:20-alpine AS builder
# 安装依赖并构建 dist
FROM nginx:1.27-alpine
# 复制 dist 到 nginx html 目录

这种方式比直接跑 astro dev 更适合服务器,因为:

  • 运行时更轻
  • 暴露面更小
  • 没有开发服务器依赖
  • 更接近静态站的标准部署方式

3. 最后切到 Fuwari 主题#

后面把博客模板层整体替换成了 Fuwari

要注意的是,Fuwari 不是简单的“换一套 CSS”,它本身就是一套完整的 Astro 博客模板,包含:

  • 自己的内容 schema
  • 自己的路由结构
  • 搜索功能
  • RSS
  • 归档页
  • 关于页
  • 主题配置

所以这一步的正确做法不是零碎拼接,而是:

  1. Fuwari 作为新的模板底座。
  2. 把原来的文章内容迁移到它的 src/content/posts/
  3. 按它要求的 frontmatter 改字段。
  4. 再把 Docker/Nginx 生产构建接回去。

文章格式现在怎么写#

现在文章不是随便一个 Markdown 就能直接识别,必须符合 Fuwari 的 frontmatter 格式。

最常用的最小模板是:

---
title: 文章标题
published: 2026-04-02
description: 一句话描述文章内容
tags: [Astro, Docker]
category: 建站
draft: false
---
这里开始写正文。

注意几个字段:

  • title 文章标题。
  • published 发布时间。
  • description 首页和 SEO 描述常用。
  • tags 标签列表。
  • category 分类。
  • draft 如果写成 true,生产构建时通常不会出现在正式页面里。

以后文章放哪里#

以后新文章统一放在:

astro-blog/src/content/posts/

比如你写一篇:

astro-blog/src/content/posts/astro-notes.md

最终路径会是:

/posts/astro-notes/

如果你放在子目录里,例如:

astro-blog/src/content/posts/docker/nginx.md

那路径就会变成:

/posts/docker/nginx/

本地预览和生产预览#

这次也顺手把开发和生产两种运行方式分开了。

开发模式#

开发时更适合用:

Terminal window
docker compose -f docker-compose.dev.yml up --build -d

它启动的是 Astro 开发服务器,适合边改边看。

生产模式#

正式预览或准备上线时用:

Terminal window
docker compose up --build -d

它会:

  1. 执行 pnpm build
  2. 生成静态文件
  3. 用 Nginx 对外提供服务

这次踩到的一个小问题#

切到 Fuwari 之后,开始时首页里多出了一篇主题自带的演示文章。这个问题不是构建错误,而是因为主题仓库里还有一个默认示例内容目录没有清掉。

这类问题很典型,也提醒了一点:

  • 换主题时,除了看 src/content/posts/*.md
  • 也要检查有没有 src/content/posts/**/index.md 这种子目录文章

否则你以为自己只保留了 4 篇文章,结果页面上还会冒出主题自带的内容。

Astro 的几个实用小技巧#

1. 先把内容链路打通,再折腾主题#

如果一开始就同时换主题、改部署、迁内容,问题会缠在一起。更稳的顺序是:

  1. 先用最小 Astro 站点确认 Markdown 能正常显示
  2. 再确定生产部署方式
  3. 最后再替换成正式主题

这样定位问题非常快。

2. 静态博客尽量用生产构建验证#

开发模式只是方便写作,真正决定是否能上线的是生产构建能不能成功。

所以每次改完结构、依赖或主题,最好都跑一次:

Terminal window
docker compose up --build -d

只要生产构建能过,基本就说明这次改动是可部署的。

3. frontmatter 要尽量固定#

静态博客最怕的不是页面丑,而是文章格式今天一个样、明天一个样。后面一旦多了十几篇、几十篇,就很难统一整理。

比较稳的方法是从一开始就固定模板,例如:

  • 标题
  • 发布时间
  • 描述
  • 标签
  • 分类
  • draft 状态

这样后面自动生成归档、搜索和 RSS 都会更稳定。

4. 主题仓库不要直接当成“黑盒”#

Fuwari 这种主题本质上是完整项目,不是一个单独样式包。所以接入前最好先确认:

  • package.json
  • src/content/config.ts
  • src/config.ts
  • src/pages/

这四类文件基本决定了:

  • 依赖怎么装
  • 文章字段怎么写
  • 站点信息在哪改
  • 页面路由怎么组织

5. 写博客时把“部署信息”也记进文章#

今天这次迁移里最有价值的部分之一,其实不是主题,而是把部署方式也固定进了代码结构。

比如:

  • 开发版 Compose
  • 生产版 Compose
  • Dockerfile
  • Nginx 配置

以后就算隔一段时间不碰这个博客,回来时也能很快接上。

这套结构接下来怎么用#

后面写文章时,流程可以很简单:

  1. astro-blog/src/content/posts/ 新建一个 .md
  2. 按固定 frontmatter 填好标题、日期、描述和标签
  3. 写正文
  4. 本地预览
  5. 确认没问题后提交 Git

如果只是写内容,基本不需要再碰页面结构;只有在想改主题风格、导航、SEO 或部署方式时,才需要去动模板层和配置层。

小结#

今天这次整理,真正完成的不是“把博客装上”,而是把一套长期可维护的博客工作流定下来了:

  • 内容放哪里
  • 主题怎么接
  • Docker 怎么跑
  • Nginx 怎么托管
  • Git 怎么留版本切换点

后面无论继续用 Fuwari,还是再换别的 Astro 主题,都已经有了一个比较稳的基础。

Astro 博客安装、目录布局与 Fuwari 主题接入记录
https://kilomilo.top/posts/astro-fuwari-setup-notes/
作者
BY
发布于
2026-04-02
许可协议
CC BY-NC-SA 4.0