关于 Fuwari#

Fuwari 由 saicaca 大佬（曾出品 Vivia）基于 Astro 彻底重写，不仅继承了 Vivia 的轻量基因，还在颜值与体验上全面进化（以下前2个的后半句纯属瞎编）：

• 界面更现代，移动端适配更细腻
• 内置搜索，文章秒级索引
• 渲染器贴近洛谷新渲染风格，代码块、数学公式开箱即用，更加适合 更好的阅读体验
• 主题色、横幅、头像全可在 UI 里实时调色，保存即生效（本地）

Vivia 的部署步骤确实少一两步，但 Fuwari 把后期操作全部可视化，长远看更省心。

一句话：想一步到位、写得爽又看得爽，直接跳 Fuwari 坑就对了！

🧰 一、准备工作#

1
git --version

1
node -v
2
npm -v

🧪 二、Fork 模板仓库（复制别人代码到你账户）#

1. 打开 Fuwari 模板仓库：

2. 点击右上角的 Fork 按钮：

3. 跳转到你的 GitHub 页面，仓库名默认是 fuwari，你可以改，比如叫 my-blog

📥 三、克隆仓库到本地（把代码下载到你电脑）#

1. 打开你刚刚 Fork 的仓库页面（在你的 GitHub 账户下）

2. 点击绿色按钮 Code，复制 HTTPS 地址：

3. 打开命令行，输入：

1
git clone https://github.com/你的用户名/你的仓库名.git

例如：

1
git clone https://github.com/xiaoming/my-blog.git

📦 四、安装依赖（让项目能跑起来）#

1. 进入项目文件夹：

1
cd my-blog

2. 安装 pnpm（比 npm 更快）：

1
npm install -g pnpm

3. 安装项目依赖：

1
pnpm install

4. 安装 sharp（图片处理依赖）：

1
pnpm add sharp

⚙ 五、修改博客信息（改成你自己的）#

1. 用 VS Code 打开项目文件夹（推荐）

VS Code

• 安装 VS Code：https://code.visualstudio.com
• 打开项目文件夹：文件 → 打开文件夹 → 选择 my-blog

2. 打开配置文件：src/config.ts

看不懂英文的看这里

• title： 标题
• subtitle：副标题，可选
• lang：语言
• themeColor：主题色（这边建议等会预览后在调整，毕竟现在连哪个色对那个编号还不知道呢）
• banner：背景
  • 这里的 src，是相对于文件夹 src 的路径

。。。其他设置不在这里仔细的展开，可以让 AI or 微软翻译 翻译注释

（实在搞不懂可以预览的时候注意一下）

🧹 六、清理默认文章（把别人的文章搬走）#

1. 打开文件夹：

1
src/content/posts

2. 把所有 .md 文件剪切到别的地方（比如桌面新建一个 backup 文件夹）

🖥 七、本地预览（看看长啥样）#

1
pnpm dev

🎨 八、选主题色（可选）#

1. 在网页右上角点击调色板图标

2. 选一个你喜欢的颜色，记下编号

3. 打开 src/config.ts，把 themeColor 改成这个值

☁️ 九、推送到 GitHub（把本地代码同步到云端）#

1. 配置 Git 用户信息（只设置一次）：

1
git config --global user.name "你的GitHub用户名"
2
git config --global user.email "你的GitHub邮箱"

2. 添加远程仓库（SSH 方式，推送更快）

• 打开你 GitHub 仓库页面，点击 Code → SSH，复制地址：

1
git@github.com:你的用户名/你的仓库名.git

• 设置远程地址：

1
git remote set-url origin git@github.com:你的用户名/你的仓库名.git

细说 git@github.com:xxx/xxx

重新打开你的 Github 仓库

1. 点这个 code 按钮

2. 在 ssh 这栏里的这个链接就是我们要的链接

其实也可以直接按上面的填写，纯属凑字数行为

3. 提交代码：

1
git add .
2
git commit -m "初始化博客"
3
git push

$\large{done}$

🌍 十、部署到 Netlify（让全世界都能访问）#

1. 打开 https://app.netlify.com

2. 点击 Project。

2. 点击 Add new project → Import an existing project

3. 选择 GitHub，授权 Netlify 访问你的仓库

4. 找到你刚刚推送的仓库（如 my-blog），点击它

5. 看着填吧，有些教程说这里不用填，但是建议填，否则人家给你分配一个难记的地址就全完了。。。

6. 等待部署完成（大概 1 分钟）

7. 部署成功后，Netlify 会给你个默认域名（当然，上面有填写这里的 xxx，就是你填的东西啦）：

1
https://xxx.netlify.app

📝 十二、写文章（重点！）#

1. 在 src/content/posts/ 新建一个 .md 文件，比如：

1
my-first-post.md

2. 文件开头必须写 Frontmatter（格式示例如下）：

1
---
2
title: 我的第一篇文章
3
published: 2025-10-03
4
description: 这是我用 Fuwari 写的第一篇博客
5
tags: [生活, 记录]
6
category: 日常
7
draft: false
8
---
9

10
正文写在这里，支持 Markdown 语法。

这里再补充一下如何新建一个有封面的文章

1. 在 src/content/posts/ 新建一个文件夹，比如：

   1
   my-second-post
   

2. 在文件夹中放入封面页，并新建一个 index.md 文件。

3. 在上面的格式后加入：

1
image: ./封面页文件名.格式

如：

1
image: ./cover.jpg

3. 保存后，推送到 GitHub，Netlify 会自动重新部署

✅ 总结：你现在拥有了什么？#

• 一个属于自己的博客网站
• 支持类似于洛谷的 Markdown 写作，甚至更好
• 自动部署在 Netlify 上
• 可自定义主题、标题、背景图

如果你遇到任何报错，建议：#

1. 看终端提示

2. 复制错误信息搜索

3. 问 AI（比如 D老师、kimi、豆老妹）

4. 实在搞不定，别问我 😄

$\color{#3B3}{\large{finish}}$