🤖AI 摘要

该文章为 Fuwari 部署指南，作者因静态站点方案优势选择基于 Astro 框架和 fuwari 主题的静态博客。指南先介绍 Astro 及 fuwari 特性，接着阐述搭建需求，详细说明本地部署、博客配置（基本配置与创建文章）、部署上线（准备工作及连接 Cloudflare 流程）步骤，最后提及在src/components/Footer.astro添加 ICP 备案和运行时间的个性化操作，并给出相关参考链接。

此内容根据文章生成，不代表个人观点，仅用于文章内容的解释与总结

一、前言#

折腾过不少博客框架，比如 VanBlog、Halo，它们都提供了简洁易用的后台功能和优雅的文章管理体验。虽然动态博客框架功能强大，但需要定期维护服务器和数据库，长期使用下来成本较高。

随着现代前端技术的飞速发展，我逐渐转向静态站点的方案。最终，我选择了基于 Astro 框架和 fuwari 主题的静态博客，简单易上手，部署便捷，非常适合专注写作和内容分享。

🌟 Astro 是啥？**#

简单说，Astro 是一个做静态网站的框架，特别适合像博客、个人主页、文档站这种内容为主的网站。它的一个大优点就是：不用管前端那些花里胡哨的东西也能做出超快的网页。

我自己选它，主要是因为它：

默认几乎不带 JavaScript，打开速度嗖嗖的；
写文章直接用 Markdown，配图、加代码块都很方便；
想加点互动？它也支持 React、Vue、Svelte 这些框架，而且可以混着用；
页面是“静态”的，部署超简单，丢到 GitHub Pages、Vercel、Netlify 都行；
最重要的，对我这种懒人来说：写完就丢线上，不用操心服务器和数据库。

✨ fuwari功能特性#

二、搭建需求#

**开始之前，先准备些东西！#

Git：版本控制工具，拿来上传、同步代码用的，基本操作得会一点。
Node.js：因为 Fuwari 主题是跑在 Node.js 上的，所以必须先装它。
GitHub 账号：博客文件要有个“家”，就放在 GitHub 的仓库里。
Cloudflare 账号：部署博客用的，可以帮你免费生成一个可以访问的网址。如果你更喜欢用 Vercel、Netlify 或 GitHub Pages 也完全没问题～
一个顺手的 Markdown 编辑器：比如 Typora 或 MarkText，写文章超级方便。如果 Markdown 语法不太熟，戳这学习下 👉 Markdown 教程

开搞吧#

二、本地部署Fuwari#

仓库#

withastro

astro

Waiting for api.github.com...

Waiting for api.github.com...

00K

Waiting...

使用此模板生成新仓库或 Fork 此仓库
进行本地开发，Clone 新的仓库，执行 pnpm install 和 pnpm add sharp 以安装依赖
- 若未安装 pnpm，执行 npm install -g pnpm
至此部署成功执行 pnpm dev ,即可本地运行

三、博客配置#

1.基本配置#

你可以通过配置文件 src/config.ts 自定义博客，这里以我自己的配置文件为例：

博客基本内容：#

1
export const siteConfig: SiteConfig = {
2
  title: "Ke.ke",
3
  subtitle: "Demo Site",
4
  lang: "zh_CN", // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th' 语言设置
5
  themeColor: {
6
    hue: 250, // 主题色的色调范围从0到360。例如：红色：0，青色：200，蓝色：250，粉色：345
7
    fixed: false, // 是否隐藏主题颜色选择器，访客可见
8
  },
9
  banner: {
10
    enable: true, // 是否启用横幅
11
    src: "", // 横幅图片的路径，相对于 /src 目录，如果路径以 / 开头则相对于 /public 目录，或者完整路径的网络图片
12
    position: "center", // 横幅位置，对应 object-position 属性，只支持 'top', 'center', 'bottom'，默认为 'center'
13
    credit: {
14
      enable: true, // 是否显示横幅图片的版权信息
15
      text: "在山的那边", // 显示的版权文字
16
      url: "https://pic.netbian.com/tupian/36636.html", // （可选）指向原始艺术作品或艺术家页面的 URL 链接
17
    },
18
  },
19
  toc: {
20
    enable: true, // 是否在文章右侧显示目录
21
    depth: 2, // 显示目录的最大标题深度，从 1 到 3
22
  },
23
  favicon: [
24
    // 留空数组以使用默认的 favicon
25
    // {
26
    //   src: '/favicon/icon.png',    // favicon 的路径，相对于 /public 目录
27
    //   theme: 'light',              // （可选）设置为 'light' 或 'dark'，仅当有不同的 favicon 时才设置
28
    //   sizes: '32x32',              // （可选）favicon 的尺寸，仅当有不同尺寸的 favicon 时设置
29
    // }
30
  ],
31
};

个人信息与联系方式：#

1
export const profileConfig: ProfileConfig = {
2
  avatar: "assets/images/demo-avatar.png", // 头像路径，相对于 /src 目录，如果路径以 / 开头则相对于 /public 目录
3
  name: "Ke.ke",
4
  bio: "凡是过往，皆为序章.", // 个人简介
5
  links: [
6
    // QQ
7
    {
8
      name: "QQ",
9
      icon: "fa6-brands:qq",
10
      url: "https://qm.qq.com/q/smIYQggkWA",//替换成你自己的
11
    },
12
    {
13
      name: "GitHub",
14
      icon: "fa6-brands:github",
15
      url: "https://github.com/Keke0522",//替换成你自己的
16
    },
17
  ],
18
};

2. 创建文章#

在src/content/posts/目录中创建.md或终端中执行 pnpm new-post <filename> 创建新文章并编辑。

文章格式：#

1
---
2
title: 南昌旅游计划  # 文章标题
3
published: 2025-05-04        # 发布时间
4
updated: 2025-05-04          # 最后更新时间
5
description: '南昌旅游计划'      # 简短描述，用于概述文章内容
6
image: ./nh.jpg  //文章封面，可留空
7
tags: [ 旅游, 攻略]  # 标签列表，方便分类和搜索
8
category: '日常'              # 所属分类
9
draft: false                  # 是否为草稿（true 表示尚未发布）
10
lang: jp      //仅当文章语言与 `config.ts` 中的网站语言不同时需要设置
11
---

四. 部署上线#

1.准备工作#

部署前需编辑 astro.config.mjs ,改为你的域名

1
// https://astro.build/config
2
export default defineConfig({
3
    site: "https://kekesxk.online/", // 站点地址

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 文件中例:

1
---
2

3
import { profileConfig } from "../config";
4
import { url } from "../utils/url-utils";
5
const currentYear = new Date().getFullYear();
6
---
7

8
<!--<div class="border-t border-[var(&#45;&#45;primary)] mx-16 border-dashed py-8 max-w-[var(&#45;&#45;page-width)] flex flex-col items-center justify-center px-6">-->
9
<div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div>
10
<!--<div class="transition bg-[oklch(92%_0.01_var(&#45;&#45;hue))] dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6">-->
11
<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">
12
    <div class="transition text-50 text-sm text-center">
13
        &copy; <span id="copyright-year">{currentYear}</span> {profileConfig.name}. All Rights Reserved. /
14
        Powered by
15
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
16
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a>
17
        <br>
18
        <a class="transition link text-[var(--primary)] font-medium" + target="_blank" href="https://beian.miit.gov.cn/">
19
            豫ICP备2025108808号-1</a>
20
    </div>
21
    <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>
22
    <div class="transition text-50 text-sm text-center hidden md:block"><p id="runningtime"> </p></div>
23
</div>