搭建一个 Fuwari 博客（一）：快速部署与基本配置

一、准备工作#

在开始之前，请确保你的开发环境已安装以下工具：

Node.js（建议使用最新 LTS 版本，如 v18 或 v20）
包管理工具（推荐使用 pnpm，本文将基于它进行操作）
代码编辑器（推荐使用 VS Code）
Git（可选）

你可以通过以下命令检查是否已安装 Node.js 和 npm：

1
node -v
2
npm -v

如果尚未安装，请前往 Node.js 官网下载并安装。

二、创建你的 Fuwari 博客#

打开终端（命令行工具），选择一个工作目录，执行以下命令来全局安装 pnpm 和 Netlify CLI：

1
npm install -g pnpm
2
npm install -g netlify-cli

💡 提示：-g 表示全局安装，确保命令可在任意目录下使用。

接下来，使用 Astro 的官方创建工具初始化一个 Fuwari 博客项目：

1
pnpm create fuwari@latest

系统会提示你输入项目名称，然后自动拉取模板并安装依赖。

进入项目目录：

1
cd my-fuwari-blog

启动本地开发服务器：

1
pnpm dev

浏览器会自动打开 http://localhost:4321，你将看到一个简洁优雅的博客首页，说明项目已成功运行。

三、自定义你的博客#

Fuwari 的配置文件位于根目录下的 src/config.ts，你可以在这里修改：

博客标题（title）
博客副标题（subtitle）
语言(lang)
博客横幅（banner）
站点 URL 等

例如：

1
export const siteConfig: SiteConfig = {
2
  title: "晓正杨博客",
3
  subtitle: "",
4
  lang: "zh_CN", // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th'
5
  themeColor: {
6
    hue: 250, // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
7
    fixed: false, // Hide the theme color picker for visitors
8
  },
9
  banner: {
10
    enable: false,
11
    src: "https://cn.cravatar.com/avatar/422d385af346ddd0b23f81d704ecf1c6", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
12
    position: "center", // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
13
    credit: {
14
      enable: false, // Display the credit text of the banner image
15
      text: "", // Credit text to be displayed
16
      url: "", // (Optional) URL link to the original artwork or artist's page
17
    },
18
  },
19
  toc: {
20
    enable: true, // Display the table of contents on the right side of the post
21
    depth: 2, // Maximum heading depth to show in the table, from 1 to 3
22
  },
23
  favicon: [
24
    // Leave this array empty to use the default favicon
25
    // {
26
    //   src: '/favicon/icon.png',    // Path of the favicon, relative to the /public directory
27
    //   theme: 'light',              // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
28
    //   sizes: '32x32',              // (Optional) Size of the favicon, set only if you have favicons of different sizes
29
    // }
30
  ],
31
};

文章内容位于 src/content/posts/ 目录中，使用 Markdown 编写。你可以复制示例文章并新建自己的 .md 文件。

✅ 命名规范：建议使用小写字母、连字符命名，如 how-to-build-a-blog.md。

四、构建静态文件#

当你完成内容编辑后，使用以下命令生成静态页面：

1
pnpm build

构建完成后，会在项目根目录生成 dist/ 文件夹，其中包含所有可供部署的 HTML、CSS 和 JavaScript 文件。

五、部署到 Netlify#

使用 CLI 快速部署#

登录 Netlify CLI（会自动打开浏览器）：
Terminal window
```
1
netlify login
```
初始化项目：
Terminal window
```
1
netlify init
```
按提示创建新站点，并填写名称（可选）。
部署到生产环境：
Terminal window
```
1
netlify deploy --prod
```
首次部署完成后，你会获得一个类似 https://your-site-name.netlify.app 的访问地址。
获取 Site ID（用于自动化部署）
进入 Netlify 控制台，找到你的项目 → Settings > General > Site information，复制 Project ID（如 0de9c487-f4cc-4a66-8885-21cb7c8bf754）。
在项目根目录的 package.json 中添加一键部署脚本：
package.json
```
1
"scripts": {
2
  // 其他脚本...
3
  "deploy": "netlify deploy --prod --site 0de9c487-f4cc-4a66-8885-21cb7c8bf754"
4
}
```
💡 将上面的 Project ID 替换为你自己的。

之后只需运行 pnpm run deploy 即可一键构建并发布。

六、绑定自定义域名（可选）#

七、后续维护#

每次更新文章后，需运行pnpm run deploy
使用 Git 管理版本（推荐托管到 GitHub/GitLab），并开启 Netlify 的自动部署功能（连接仓库后，每次 push 自动构建）。

结语#

通过本文，你已经成功搭建并部署了一个基于 Fuwari + Astro 的极简静态博客。整个过程无需服务器、不涉及后端，安全、快速、免费。

Fuwari 的设计理念是“少即是多”，让写作者专注于内容本身。现在，是时候开始写下你的第一篇文章了！

🔗 项目地址：
https://github.com/saicaca/fuwari
欢迎 Star ⭐ 和贡献！

关键词： 静态博客、Markdown 博客、Astro 框架、免费博客、Netlify 部署、极简主题、Fuwari 主题

如果你希望将这篇文章发布到像 Vercel 或 GitHub Pages 上，也可以轻松适配，欢迎关注后续教程。

✅ 已完成： 本地开发 ✔️ 自定义配置 ✔️ 构建 ✔️ 部署 ✔️ 评论 ❌

下一期我们来解决评论

现在，去写点什么吧！