如何用Fuwari搭建你的个人博客

在`windows`本地部署你的个人博客，你需要在本地拥有以下环境#

服务端 JavaScript 环境

Node.js

包管理工具

npm

版本控制工具

git

如何搭建环境#

推荐使用winget包管理工具安装node.js，npm和git

1
# 用winget搜索工具找到要安装的发行版
2
winget search node.js
3
winget search npm
4
# 下载需要的版本
5
winget install (需要的node.js版本的ID)
6
winget install (需要的pnpm版本的ID)
7
winget install (需要的git版本的ID)

检查本地环境是否搭建成功

在命令行中输入如下指令（如果有版本信息表示搭建成功）

1
# 检查node.js
2
node -v
3
# 检查pnpm
4
npm -v
5
# 检查git
6
git -v

效果图如下：

本地部署Fuwari#

进入Fuwari,克隆项目到本地
全局安装pnpm
Terminal window
```
1
npm install -g pnpm
```

现在你可以预览blog模板了

1
# 在fuwari项目根目录命令行下
2
pnpm -dev
3
#如果想自动打开浏览器则输入
4
pnpm -dev --open

修改模板

打开fuwari目录下的src\config.ts配置文件

默认设置如下：

1
import type {
2
    ExpressiveCodeConfig,
3
    LicenseConfig,
4
    NavBarConfig,
5
    ProfileConfig,
6
    SiteConfig,
7
} from "./types/config";
8
import { LinkPreset } from "./types/config";
9

10
export const siteConfig: SiteConfig = {
11
    title: "Fuwari",
12
    subtitle: "Demo Site",
13
    lang: "en", // Language code, e.g. 'en', 'zh_CN', 'ja', etc.
14
    themeColor: {
15
        hue: 250, // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
16
        fixed: false, // Hide the theme color picker for visitors
17
    },
18
    banner: {
19
        enable: false,
20
        src: "assets/images/demo-banner.png", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
21
        position: "center", // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
22
        credit: {
23
            enable: false, // Display the credit text of the banner image
24
            text: "", // Credit text to be displayed
25
            url: "", // (Optional) URL link to the original artwork or artist's page
26
        },
27
    },
28
    toc: {
29
        enable: true, // Display the table of contents on the right side of the post
30
        depth: 2, // Maximum heading depth to show in the table, from 1 to 3
31
    },
32
    favicon: [
33
        // Leave this array empty to use the default favicon
34
        // {
35
        //   src: '/favicon/icon.png',    // Path of the favicon, relative to the /public directory
36
        //   theme: 'light',              // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
37
        //   sizes: '32x32',              // (Optional) Size of the favicon, set only if you have favicons of different sizes
38
        // }
39
    ],
40
};
41

42
export const navBarConfig: NavBarConfig = {
43
    links: [
44
        LinkPreset.Home,
45
        LinkPreset.Archive,
46
        LinkPreset.About,
47
        {
48
            name: "GitHub",
49
            url: "https://github.com/saicaca/fuwari", // Internal links should not include the base path, as it is automatically added
50
            external: true, // Show an external link icon and will open in a new tab
51
        },
52
    ],
53
};
54

55
export const profileConfig: ProfileConfig = {
56
    avatar: "assets/images/demo-avatar.png", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
57
    name: "Lorem Ipsum",
58
    bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
59
    links: [
60
        {
61
            name: "Twitter",
62
            icon: "fa6-brands:twitter", // Visit https://icones.js.org/ for icon codes
63
            // You will need to install the corresponding icon set if it's not already included
64
            // `pnpm add @iconify-json/<icon-set-name>`
65
            url: "https://twitter.com",
66
        },
67
        {
68
            name: "Steam",
69
            icon: "fa6-brands:steam",
70
            url: "https://store.steampowered.com",
71
        },
72
        {
73
            name: "GitHub",
74
            icon: "fa6-brands:github",
75
            url: "https://github.com/saicaca/fuwari",
76
        },
77
    ],
78
};
79

80
export const licenseConfig: LicenseConfig = {
81
    enable: true,
82
    name: "CC BY-NC-SA 4.0",
83
    url: "https://creativecommons.org/licenses/by-nc-sa/4.0/",
84
};
85

86
export const expressiveCodeConfig: ExpressiveCodeConfig = {
87
    // Note: Some styles (such as background color) are being overridden, see the astro.config.mjs file.
88
    // Please select a dark theme, as this blog theme currently only supports dark background color
89
    theme: "github-dark",
90
};

我们可以更改的有：

title: 标题

subtitle: 副标题

lang: 语言（中文为zh_CN）

themeColor: 主题颜色（修改hue的值）

banner: 横幅（不清楚具体作用）

favicon: 网站图标

links: 导航链接

avater: 头像

name: 姓名

bio: 个性签名

修改结束后我们就可以开始编写个人博客了

博客中的文章都会在fuwari目录下的\src\content\posts目录下存储

1
# 在终端中输入如下代码可以创建一个新的md文件
2
pnpm new-post [文章名称]

默认md文件格式如下

1
title: test 文章标题
2
published: 2025-10-08 生成日期
3
description: ''
4
image: ''
5
tags: []
6
category: ''
7
draft: false
8
lang: ''

使用cloudflare上的pages服务展示个人博客网页（必须要拥有一个域名，可以选择去域名服务商购买）

notion:如果只是想在本地自己管理，不需要向外界展示，可以跳过步骤6

进入cloudflare官网，注册一个账号，在左侧菜单中找到Worker & Pages服务

找到图中页面后点击Import an existing Git repository选项的Get started,然后跟随指引与GitHub建立连接

最后根据指示将你域名的DNS服务器修改为cloudflare中提供的两个DNS服务器，这样，cloudflare就可以管理你的域名了
丰富你的个人博客吧！！

到现在，你的个人博客已经完成了，只需要在本地编写博客后，提交到GitHub上，cloudflare就可以自动同步GitHub上的内容了

扩展修改#

将网站的`favicon`图标（即网站图标）修改#

推荐使用favicon.io和在线抠图软件（用于制作透明贴图）进行favicon图标的制作，转换格式后，你会得到一系列尺寸的png图片，将其替换掉博客根目录中public\favicon路径下的一系列png图片，并将src\constants路径下的icon.ts文件修改，样例如下：

1
/***************************以下内容为个人修改***************************/
2

3
import type { Favicon } from "@/types/config.ts";
4

5
export const defaultFavicons: Favicon[] = [
6
    {
7
    src: "/favicon/favicon.ico",
8
        theme: "light",
9
        sizes: "32x32",
10
    },
11
];

正确修改了以上文件后，就可以看到网站的图标修改成功了

在windows本地部署你的个人博客，你需要在本地拥有以下环境#

如何搭建环境#

本地部署Fuwari#

扩展修改#

将网站的favicon图标（即网站图标）修改#

在`windows`本地部署你的个人博客，你需要在本地拥有以下环境#

将网站的`favicon`图标（即网站图标）修改#