快速部署指南：搭建一个 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 文件。

五、将本地项目上传至Github#

如果你是通过 HTTPS 克隆的可以通过 git set-url origin git@github.com:[你的仓库名称] 改成 SSH

然后，正常的提交推送就好啦~（依次运行下面的代码）

1
git add .
2
git commit -m "[对提交的描述]"
3
git push

这样你的文章就推送到远程仓库啦~

六、部署到CloudFlare#

在 Cloudflare - Workers - Workers 和 Pages - 创建，创建一个 Page
关联你之前 Fork 来的 Github 仓库。
设置 构建指令 为 pnpm build，构建输出目录 为 `dist
绑定自定义域名(可选)，这样访问你绑定的域名就可以访问你的博客啦！

你只需要重复之前的写文章和提交操作，你的文章就会被自动部署到 Cloudflare！

七、后续文章撰写与维护#

如果嫌麻烦的话还可以试试我写的一个简单的脚本，只要在根目录创建一个 bat 后缀的文件写入以下内容，以后每次要写文章只需要运行此脚本跟着提示做就可以实现半自动创建文章并提交(～￣▽￣)～（仅Windows）

1
@echo off
2
git pull
3

4
:: Create
5
set /p mark="Press article keywords("-^" to link): "
6
echo Run it by yourself: pnpm new-post %mark%
7
echo Then press enter to open the blog with default method.
8

9
pause > nul
10

11
explorer ".\src\content\posts\%mark%.md"
12

13
echo Press enter to submit the blog.
14
pause > nul
15

16
:: Commit
17
git add .
18
git commit -m "Update %mark%"
19
git push
20

21
echo Press enter to end.
22
pause > nul

八、文章的 Front-matter（前置参数）#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
description: 这是我的新 Astro 博客的第一篇文章。
5
image: ./cover.jpg
6
tags: [ Foo, Bar ]
7
category: 前端
8
draft: false
9
---

属性	描述
title	文章的标题。
published	文章的发布日期。
description	文章的简短描述，显示在首页。
image	文章封面图路径。 1. 以 `http://` 或 `https://` 开头：使用网络图片。 2. 以 `/` 开头：使用 `public` 目录下的图片。 3. 无前缀：相对于 Markdown 文件的相对路径。
tags	文章的标签。
category	文章的分类。
draft	如果设为 `true`，则该文章为草稿，不会被显示。

九、文章文件存放位置#

您的文章文件应放置在 src/content/posts/ 目录下。您还可以创建子目录来更好地组织文章和资源文件。

1
src/content/posts/
2
├── post-1.md
3
└── post-2/
4
    ├── cover.png
5
    └── index.md

十、结语#

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

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