鹏星
1749 字
9 分钟
Fuwari 部署指南(教程)
一、前言
折腾过不少博客框架,比如 VanBlog、Halo、Word Press,它们都提供了简洁易用的后台功能和优雅的文章管理体验。虽然动态博客框架功能强大,但需要定期维护服务器和数据库,长期使用下来成本较高。
随着现代前端技术的飞速发展,我逐渐转向静态站点的方案。最终,我选择了基于 Astro 框架和 fuwari 主题的静态博客,简单易上手,部署便捷,非常适合专注写作和内容分享。
🌟 Astro 是啥?
简单说,Astro 是一个做静态网站的框架,特别适合像博客、个人主页、文档站这种内容为主的网站。它的一个大优点就是:不用管前端那些花里胡哨的东西也能做出超快的网页。
我自己选它,主要是因为它:
- 默认几乎不带 JavaScript,打开速度嗖嗖的;
- 写文章直接用 Markdown,配图、加代码块都很方便;
- 想加点互动?它也支持 React、Vue、Svelte 这些框架,而且可以混着用;
- 页面是“静态”的,部署超简单,丢到 GitHub Pages、Vercel、Netlify 都行;
- 最重要的,对我这种懒人来说:写完就丢线上,不用操心服务器和数据库。
✨ fuwari功能特性
- 基于 Astro 和 Tailwind CSS 开发
- 流畅的动画和页面过渡
- 亮色 / 暗色模式
- 自定义主题色和横幅图片
- 响应式设计
- 评论
- 搜索
- 文内目录
二、搭建需求
开始之前,先准备些东西!
- Git:版本控制工具,拿来上传、同步代码用的,基本操作得会一点。
- Node.js:因为 Fuwari 主题是跑在 Node.js 上的,所以必须先装它。
- GitHub 账号:博客文件要有个“家”,就放在 GitHub 的仓库里。
- Cloudflare 账号:部署博客用的,可以帮你免费生成一个可以访问的网址。如果你更喜欢用 Vercel、Netlify 或 GitHub Pages 也完全没问题~
- 一个顺手的 Markdown 编辑器:比如 Typora 或 MarkText,写文章超级方便。如果 Markdown 语法不太熟,戳这学习下 👉 Markdown 教程
开搞吧
三、本地部署Fuwari
仓库
Waiting for api.github.com...
Waiting for api.github.com...
四、博客配置
1.基本配置
你可以通过配置文件 src/config.ts 自定义博客,这里以我自己的配置文件为例:
博客基本内容:
注意下面用其他颜色标记的是我改动的地方,其他的都是默认,不过在部署的过程中,随便改改玩,试试每一个的效果
export const siteConfig: SiteConfig = { title: "PengXing's Blog", // 标题 subtitle: "爱你所爱!", // 副标题 lang: "zh_CN", // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th' 语言设置 themeColor: { hue: 250, // 主题色的色调范围从0到360。例如:红色:0,青色:200,蓝色:250,粉色:345 fixed: false, // 是否隐藏主题颜色选择器,访客可见 }, banner: { enable: true, // 是否启用横幅 src: "assets/images/demo-banner.png", // 横幅图片的路径,相对于 /src 目录,如果路径以 / 开头则相对于 /public 目录,或者完整路径的网络图片 position: "center", // 横幅位置,对应 object-position 属性,只支持 'top', 'center', 'bottom',默认为 'center' credit: { enable: false, // 是否显示横幅图片的版权信息 text: "", // 显示的版权文字 url: "", // (可选)指向原始艺术作品或艺术家页面的 URL 链接 }, }, toc: { enable: true, // 是否在文章右侧显示目录 depth: 2, // 显示目录的最大标题深度,从 1 到 3 }, favicon: [ // 留空数组以使用默认的 favicon { src: "/favicon/favicon.ico", // favicon 的路径,相对于 /public 目录 theme: "light", // (可选)设置为 'light' 或 'dark',仅当有不同的 favicon 时才设置 sizes: "32x32", // (可选)favicon 的尺寸,仅当有不同尺寸的 favicon 时设置 }, ],};个人信息与联系方式:
export const profileConfig: ProfileConfig = { avatar: "assets/images/demo-avatar.png", // 头像路径,相对于 /src 目录,如果路径以 / 开头则相对于 /public 目录 name: "鹏星", bio: "Love what you love, all will be well! / 爱你所爱,一切美好!", // 个人简介 links: [17 collapsed lines
// { // name: "Twitter", // icon: "fa6-brands:twitter", // Visit https://icones.js.org/ for icon codes // // You will need to install the corresponding icon set if it's not already included // // `pnpm add @iconify-json/<icon-set-name>` // url: "https://twitter.com", // }, // { // name: "Steam", // icon: "fa6-brands:steam", // url: "https://store.steampowered.com", // }, // { // name: "GitHub", // icon: "fa6-brands:github", // url: "https://github.com/saicaca/fuwari", // }, { name: "QQ频道", icon: "fa6-brands:qq", url: "https://pd.qq.com/s/38it5vmzn", }, { name: "link3", icon: "fa6-brands:staylinked", url: "https://link3.cc/pyxh", }, ],};2. 创建文章
在src/content/posts/目录中创建.md或终端中执行 pnpm new-post <filename> 创建新文章并编辑。
文章格式:
注意最新的 fuwari ,新建文章可能没有
updated,需要自行到scripts\new-post.js配置
const content = `---title: ${args[0]}published: ${getDate()}updated: ${getDate()}description: ''image: ''tags: []category: ''draft: falselang: ''pinned: falseseries: ''---`;---title: 新文章 # 文章标题published: 2025-09-22 # 发布时间updated: 2025-09-22 # 最后更新时间,后面文章更新需要手动更改description: '创建新的文章' # 简短描述,用于概述文章内容image: ./img.jpg //文章封面,可留空tags: [ 文章, 个人] # 标签列表,方便分类和搜索category: '日常' # 所属分类draft: false # 是否为草稿(true 表示尚未发布)lang: 'ja' //仅当文章语言与 `config.ts` 中的网站语言不同时需要设置---五、部署上线
1.准备工作
部署前需编辑 astro.config.mjs ,改为你的域名
// https://astro.build/configexport default defineConfig({ site: "https://pengxing.dpdns.org/", // 站点地址 base: "/", trailingSlash: "always", integrations: [ tailwind({ nesting: true, }), // ..........}2.连接至Cloudflare
官方指南将博客部署至 Cloudflare,Vercel, Netlify, GitHub Pages 等;
本篇只介绍Cloudflare(本人在用)
连接至Cloudflare
前往Cloudflare的 创建一个Pages

选择导入现有Git存储库,连接你的Github

设置构建命令:pnpm build ,然后设置构建输出目录:dist

到这里就结束了,你只需要在本地编写文章,然后用Git将更改推送到远程仓库,Cloudflare就会自动部署,用Cloudflare分配给你的链接即可访问博客
有域名的话绑定自定域名

四、个性化
1.添加ICP备案和运行时间
在 src/components/Footer.astro 文件中 例:
---
import { profileConfig } from "../config";import { url } from "../utils/url-utils";const currentYear = new Date().getFullYear();---
<!--<div class="border-t border-[var(--primary)] mx-16 border-dashed py-8 max-w-[var(--page-width)] flex flex-col items-center justify-center px-6">--><div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div><!--<div class="transition bg-[oklch(92%_0.01_var(--hue))] dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6">--><div class="transition border-dashed border-[oklch(85%_0.01_var(--hue))] dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6"> <div class="transition text-50 text-sm text-center"> © <span id="copyright-year">{currentYear}</span> {profileConfig.name}. All Rights Reserved. / Powered by <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> & <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a> <br> <a class="transition link text-[var(--primary)] font-medium" + target="_blank" href="https://beian.miit.gov.cn/"> ICP备XXXXXXXXX号-1</a> </div> <script type="text/javascript">function runtime(){const t=new Date("07/01/2023 08:00:00"),n=new Date,s=n-t,e=Math.floor(s/1e3),o=Math.floor(e/86400),i=Math.floor(e%86400/3600),a=Math.floor(e%3600/60),r=e%60;document.getElementById("runningtime").innerHTML=`✨本站竟然运行了: ${o}天${i}小时${a}分${r}秒 ☁🤩`}setInterval(runtime,1e3)</script> <div class="transition text-50 text-sm text-center hidden md:block"><p id="runningtime"> </p></div></div> Fuwari 部署指南(教程)
https://pengxing.dpdns.org/posts/fuwari-部署指南教程/