前言#

Fuwari 是由 saicaca 大佬基于 Astro 写的一个博客主题，颜值和动画都比较不错。

温馨提示

开始前需准备： 善于思考的脑子 冷静和耐心 会使用搜索引擎 完整做好准备工作 稍微了解 Markdown 语法

🧰准备工作（已安装可跳过）#

1
git --version

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

1
node -v
2
npm -v

🆕新建一个仓库（用来存放你的博客）#

• 打开 Github 并登录：https://github.com/
• 点击 New 新建一个仓库 进入到新建仓库界面，这里设置一些仓库的信息后即可点击Create repository创建仓库：
• Repository name：仓库名（必填项）
• Description：仓库简介（可选）
• Choose visibility ：选择仓库是否为公共，选择私人则其他人无法访问（按需选择）

🔄 克隆项目到本地#

• 打开原项目模板  https://github.com/saicaca/fuwari
• 点击 Code - 复制按钮复制HTTPS链接：

• 打开终端，输入：

1
git clone https://github.com/saicaca/fuwari.git
2
// git clone 你复制的链接

会在你终端当前打开的位置生成一个项目文件夹 后面再进入项目文件夹，进行项目初始化和安装依赖

1
cd fuwari
2

3
npm config set registry https://registry.npmmirror.com/
4
# 更改npm源为国内镜像源，不然可能下不动
5

6
npm install -g pnpm # 安装pnpm
7
pnpm install # 安装pnpm依赖

完成以上步骤后，就成功将Fuwari部署到本地了。

✍️配置 Fuwari 中 config.ts#

提示

由于克隆的是原项目模板，会有默认的博主名称、图标、链接、简介和示例文章，所以这边要进行更改配置为自己的信息。

注：

以下将使用 Visual Studio Code 演示和编辑，可以在编辑器内打开文件夹，后续编辑、调用终端和用Git推送仓库比较方便：

在Visual Studio Code中，找到导航栏中的 终端 - 新建终端 可以方便使用命令行。

在项目根目录中，找到src中config.ts文件，此文件为博客核心配置文件。 其中：

• title：你的博客主标题
• subtitle：你的博客副标题。可选，在首页会显示为“主标题 - 副标题”
• lang：博客显示语言。例如 en、zh_CN、zh_TW、ja、ko
• themeColor：hue 表示博客主题色。可以现在博客右上角调色板先选择自己喜欢的颜色后再抄进去。
• banner：enable: 启用横幅图像；src: 横幅位置，填写本地地址，也可以填写网络地址
• favicon： src：即网站图标，可填写网络地址
• links：即友情链接，这些会显示在名字和签名下方，例如这样填写：

1
{
2
            name: "BiliBili",
3

4
            icon: "fa6-brands:bilibili", // 访问 https://icones.js.org/ 获取图标代码
5

6
            // 如果尚未包含，需要安装对应的图标集合
7

8
            // `pnpm add @iconify-json/<icon-set-name>`
9

10
            url: "https://www.bilibili.com/",
11

12
        },

• avatar：你的头像 （相对于 /src 目录。如果以 ’/’ 开头则相对于 /public 目录）
• name：你的名字

🖨️编写文章#

推荐工具

我个人用的是 Obsidian，虽然配置起来比较麻烦，但设置完后用的还是比较顺手的。 这里就不展开说明 Obsidian 如何使用了，有需要可以自行搜索引擎查询。

文章都是用Markdown格式写作，如果不了解的话可以花几分钟了解一下： Markdown 教程 | 菜鸟教程

• 先在项目执行命令 pnpm new-post "文章标题" ，执行完后会生成一个模板文件。
• 在根目录下，打开src/content/posts文件夹，你会看到多一个文章标题.md的文件
• 用编辑器打开后，会看到一组属性数据，根据以下注释自行填写：

1
---
2
title: 文章标题 # 文章主标题
3
published: 2026-05-08 # 编写日期
4
description: '' # 文章描述，正常会显示在文章标题下面
5
image: '' # 可选，填写本地地址或者URL后，将启用文章封面（本地地址推荐使用相对路径）
6
tags: [] # 文章标签
7
category: '' # 文章分类
8
draft: false # 是否为草稿，为true的话，文章只能在本地服务器查看
9
lang: '' # 文章的语言，中文就填写 zh_CN
10
---

这些完成后，还需要修改根目录下的 astro.config.mjs，把其中的 site: 改成你自己的站点 URL，例如：site: "https://blog.panda35064.top"。

📤本地预览，发布至 Github#

文章写完时，可使用pnpm dev 启动本地服务器进行预览 当你预览差不多时，我们就可以用 Git 来将这些改动推送至 Github 仓库。 打开之前新建的 Github 仓库，可以看到现在仓库是空的。 复制一下仓库的 Git 链接。 后面打开终端，将本地项目绑定到对应的仓库：

1
git remote remove upstream # 删除原仓库的链接
2

3
git remote add origin 你的git链接
4
# 例如：git remote add origin https://github.com/Panda35064/blog-new.git

绑定完成后，我们就可以用Visual Studio Code快捷方便推送至你的仓库。 以下是推送演示：

• 点击 Git 功能
• 填写上更改信息（每次推送需填写更改信息，否则无法推送至仓库）
• 将更改放入暂存区（相当于暂时存放物品的盒子，后面commit才是推送至仓库）
• 点击提交
• 点击同步更改，这样本地文件就推送到仓库上了

☁️部署上线#

结尾#

注：

不出意外的话，你的网站就部署上线成功了

后续除了 部署＆上线 外，还会分析个人备案经历可以参考一下。