2331 字
12 分钟
Fuwari + Cloudflare Pages 搭建教程

准备事项#

1.git
2.Node.js
3.一个Github账号
4.一个Cloudflare账号
5.自己喜欢的IDE和markdown编辑器

正式开始#

1.首先,fork Fuwari的仓库,随便取名字

saicaca
/
fuwari
Waiting for api.github.com...
00K
0K
0K
Waiting...

2.然后用 git 克隆仓库到本地:git clone 你的仓库链接

WARNING

不要像我当时傻乎乎的直接下载源码,这样无法使用git

3.打开Node.js command prompt,安装pnpm:npm install -g pnpm
4.然后cd到你的项目的根目录,安装依赖:pnpm install
至此,可以开始更改fuwari的配置了
5.打开根目录下src文件夹中的config.ts,开始修改

  • title:网站标题
  • subtitle:网站副标题,可以空着,会显示为标题 - 副标题
  • lang:语言,如zh_CN,en,ja等
  • hue:主题色,可以在右上角的调色盘图标选好后填写(这是oklch,不是rgba,所以显示不正常说明你的浏览器不支持oklch)
  • banner:banner图片,可以填url
  • credit:banner图片出处
  • favicon:网站图标,可以填url
  • navbatconfiglinks:在导航栏上的链接
  • avatar:左边这个头像
  • name:名字
  • bio:个性签名
  • links:你在其他平台的链接,显示在个性签名下面
  • linksicon:需去icones.js.org寻找,fuwari默认支持fa6-brands, fa6-regular, fa6-solid, material-symbols这几种
  • 附上我的config.ts
config.ts
import type {
ExpressiveCodeConfig,
LicenseConfig,
NavBarConfig,
ProfileConfig,
SiteConfig,
} from "./types/config";
import { LinkPreset } from "./types/config";
export const siteConfig: SiteConfig = {
title: "hhz-blog",
subtitle: "",
lang: "zh_CN", // Language code, e.g. 'en', 'zh_CN', 'ja', etc.
themeColor: {
hue: 65, // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
fixed: false, // Hide the theme color picker for visitors
},
banner: {
enable: false,
src: "https://bing.img.run/uhd.php", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
position: "center", // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
credit: {
enable: false, // Display the credit text of the banner image
text: "", // Credit text to be displayed
url: "https://bing.img.run/", // (Optional) URL link to the original artwork or artist's page
},
},
background: {
enable: false, // Enable background image
src: "https://bing.img.run/uhd.php", // Background image URL (supports HTTPS)
position: "center", // Background position: 'top', 'center', 'bottom'
size: "cover", // Background size: 'cover', 'contain', 'auto'
repeat: "no-repeat", // Background repeat: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y'
attachment: "fixed", // Background attachment: 'fixed', 'scroll', 'local'
opacity: 1, // Background opacity (0-1)
},
toc: {
enable: true, // Display the table of contents on the right side of the post
depth: 2, // Maximum heading depth to show in the table, from 1 to 3
},
favicon: [
// Leave this array empty to use the default favicon
{
src: 'https://image2url.com/r2/default/images/1770029495841-b5ff076e-283d-4a78-92a6-d656a18b3381.ico', // Path of the favicon, relative to the /public directory
// theme: 'light', // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
// sizes: '32x32', // (Optional) Size of the favicon, set only if you have favicons of different sizes
}
],
};
export const navBarConfig: NavBarConfig = {
links: [
LinkPreset.Home,
LinkPreset.Archive,
LinkPreset.About,
{
name: "统计(Umami)",
url: "https://cloud.umami.is/share/zwNENJkXsBNXmIuP", // Internal links should not include the base path, as it is automatically added
external: true, // Show an external link icon and will open in a new tab
},
{
name: "监控1",
url: "https://uptime.hhz114514.qzz.io/", // Internal links should not include the base path, as it is automatically added
external: true, // Show an external link icon and will open in a new tab
},
{
name: "监控2",
url: "https://stats.uptimerobot.com/Vvl3i7j1N2", // Internal links should not include the base path, as it is automatically added
external: true, // Show an external link icon and will open in a new tab
},
],
};
export const profileConfig: ProfileConfig = {
avatar: "assets/images/web.png", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
name: "hhz",
bio: "雷批+月计入",
links: [
{
name: 'Email',
icon: 'fa6-solid:envelope',
url: 'hello@hhz114514.qzz.io',
},
{
name: 'bilibili',
icon: 'fa6-brands:bilibili',
url: 'https://space.bilibili.com/1202526655',
},
{
name: 'GitHub',
icon: 'fa6-brands:github',
url: 'https://github.com/bilihhz',
},
],
};
export const licenseConfig: LicenseConfig = {
enable: true,
name: "CC BY-NC-SA 4.0",
url: "https://creativecommons.org/licenses/by-nc-sa/4.0/",
};
export const expressiveCodeConfig: ExpressiveCodeConfig = {
// Note: Some styles (such as background color) are being overridden, see the astro.config.mjs file.
// Please select a dark theme, as this blog theme currently only supports dark background color
theme: "github-dark",
};
  • 那个background不要管他,费案(我代码里其实有好多费案什么的)

  • 然后更改根目录下的astro.config.mjs

astro.config.mjs
import ......
......
......
// https://astro.build/config
export default defineConfig({
site: "https://你的博客域名/", //更改这里
base: "/",
trailingSlash: "always",
  • 现在,你就可以正式开始写文章了

开始写作#

1.转移或删除src/content/posts中的示例md教程文章
2.在Node.js command prompt中cd到你的项目根目录,执行:pnpm new-post 文章标题(也是文件名称)
3.然后src/content/posts下就会出现一个你刚输的标题.md
4.用你喜欢的md编辑器打开文件,你应该可以看到这些:

你刚输的标题.md
---
title: 你刚输的标题
published: 2026-02-23
description: ''
image: ''
tags: []
category: ''
draft: false
lang: ''
---
  • title:文章标题
  • published:文章创建时间
  • description:文章描述,在标题下方小字
  • image:文章封面图片,也会在文章最开头显示
  • tags:文章标签,多个标签格式为["xxx" , "xxx"]
  • category:分类,应该只能写一个
  • 剩下两个正常情况不用管

5.markdown语法这里就不讲了,可以自己搜或去看一开始src/content/posts里的md教程文章

预览并部署#

  • 预览
    1.在Node.js command prompt中cd到你的项目根目录,执行:pnpm dev就可以预览你的博客,支持热修改
  • 推送
    2.打开Git bash,首先让git知道你是谁,执行:git config --global user.name 你的Github用户名git config --global user.email 你的Github账号绑定的邮箱(git bash内不能ctrl+c ctrl+v,用右键的paste)
    3.然后切换仓库为ssh:git remote set-url origin git@github.com:用户名/仓库名称
    4.然后提交所有文件,执行:git add .
    5.然后发布一个本地提交,执行:git commit -m 随便写(这个是在你这次提交中修改的文件后显示的说明,比如你修改了什么)
    6.然后就可以推送了,执行:git push
    7.应该就推送成功了,有什么报错复制去问ai,然后以后再推送只要4,5,6步就可以了
  • 部署
    1.打开cloudflare dashboard(应该叫这个吧)
    2.在侧边栏找到computer栏然后展开,选Workers 和 pages
    3.点右上角的创建应用程序,选最底下的想要部署 Pages?开始使用
    4.选导入现有 Git 存储库,然后添加你的github账号,选择你的fuwari仓库
    5.设置构建命令为pnpm build,构建输出目录为dist,然后直接点右下角保存并部署就行
    6.然后可以在设置里绑定自定义域名(没钱可以去整个免费的二级域名(最好能托管到cloudflare的,这样比较方便),最好不要用自带的.pages.dev) 7.以后只要你推送了,cloudflare便会自动更新,不用你去管

以下均为可选部分,如果你想让你的网站更好看,有更多功能,可以看下去#

外观部分#

外观的css代码基本都在src/styles/里:

  • main.css:全局css,你可以在末尾添加自己的东西,比如我添加的:
main.css
/*上面就是原始代码*/
body {
background-image:url('https://bing.img.run/uhd.php'); /* 设置背景图片的URL */
background-repeat: no-repeat; /* 设置背景图片不重复 */
background-attachment: fixed; /* 设置背景图片固定,不随滚动条滚动 */
background-size: cover; /* 设置背景图片覆盖整个视口 */
background-position: center; /* 设置背景图片的位置为居中 */
font-feature-settings: "cv05", "ss01";
}
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
  • variables.styl:颜色全在这里面了,你想要跟我一样的透明效果就更改define下面的--card-bg(用rgba的原因是oklch兼容性不好)
variables.styl
--card-bg: rgba(255, 255, 255, 0.75) rgba(23, 23, 23, 0.75)
  • expressive-code.css:可以更改代码块的字体
  • markdown.css:可以在里面修改网页/文章的字体(其他的代码看不懂)
  • 其他的我看不懂

自定义字体#

1.将你的字体文件复制到根目录下的/public/fonts(没有就创建)
2.打开刚才提到的main.css
3.在最后添加:

main.css
@font-face {
font-family: '字体名字(随便写)';
src: url('/fonts/字体文件名') format('字体类型(就是woff2,truetype之类的)');
font-weight: 字体支持宽度范围;
font-style: normal;
font-display: swap;
}
/*比如*/
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}

4.然后打开并修改根目录下的tailwind.config.cjs

tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme")
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,mjs}"],
darkMode: "class", // allows toggling dark mode manually
theme: {
extend: {
fontFamily: {// 修改这里
sans: ["Inter", "sans-serif", ...defaultTheme.fontFamily.sans],
// 把第一个字体替换成你刚填的字体名称就行
},
},
},
plugins: [require("@tailwindcss/typography")],
}

5.然后打开并修改src/styles/markdown.css

markdown.css
code {
@apply bg-[var(--inline-code-bg)] text-[var(--inline-code-color)] px-1 py-0.5 rounded-md overflow-hidden;
/*应该是在40行,把字体添加到第一个*/
font-family: 'Inter', 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
&:before {
content:none;
}
&:after {
content:none;
}

6.这时应该已经成功了,如果没成功检查一下代码,或去网上搜别人的方法

功能#

Umami(其他通过添加js的分析平台同样适用)#

1.打开Umami官网,注册一个账号
2.点添加网站,输入你网站的基本信息,然后得到一个追踪代码,复制
3.打开src/layouts/Layout.astro,翻到差不多一百多行,在<head>里添加就行(你应该会html吧)
4.顺便讲一下如果没有副标题如何删除那个-

Layout.astro
let pageTitle: string;
if (title) {
pageTitle = `${title} - ${siteConfig.title}`;
} else {
pageTitle = `${siteConfig.title}`;
} // 差不多50多行,应该是改这里,照着我删就行

Giscus评论区#

1.创建一个github空仓库,在设置里启用discussion功能
2.打开giscus网站,输入刚才那个仓库 3.映射关系选第一个pathname,Discussion 分类选announcements,特性自己选择,我选的是1,3,4
4.然后将得到的js添加就行了(我也不知道加到哪,可以看下面那篇文章)
5.要做适应light/dark切换可以参考这篇文章:https://pcb.im/posts/giscus/

未写完#

有误请在评论区指出

参考文章:#

1.https://2x.nz/posts/fuwari/
2.https://aulypc1.github.io/posts/website/use_custom_fonts_in_fuwari/
3.没写完

未写完#

Fuwari + Cloudflare Pages 搭建教程
https://hhz114514.qzz.io/posts/fuwari-build/
作者
hhz
发布于
2026-02-13
许可协议
CC BY-NC-SA 4.0