发现新文章

我们已经通过 Google Adsense 审核！不出意外，在未开启广告拦截器的情况下，应该已经可以看到广告了

如果您对广告位置不满意（如：占据面积大，挡住主要内容等情况），请前往 置顶文章 告知我们！

2089 字
10 分钟
Fuwari静态博客搭建教程
Fuwari是一个静态博客框架，Cloudflare Pages是一个托管静态网站的服务，将他俩结合即可得到一个快速安全无需托管的高效博客
2025年9月17日
0 次

你需要准备的东西#

  1. 一个牛逼的脑子，支持并行运算至少两个单位以上的事件。遇到问题先思考，想不通就搜索，搜索不到就去和AI调情，不要上来就问问问

  2. Git - Downloads (git-scm.com)：最牛逼的版本控制器，这里用于对Github进行操作，当然，你也可以尝试使用GitHub Desktop | Simple collaboration from your desktop 但就我而言，这玩意更难用 在现在SSH克隆默认被阻断的情况下，它变得好用起来了

  3. Node.js — Run JavaScript Everywhere (nodejs.org)：Fuwari基于Node.js，你需要安装这个来搭建博客

  4. 一个Github账号：用于创建一个代码仓库存放Fuwari文件

  5. 一个Cloudflare账号：用于创建一个Pages并且绑定域名支持访问

  6. 黑曜石（Obsidian）：这是一个可视化MarkDown编辑器，因为Fuwari的每一篇文章/页面都是MarkDown，所以需要一个好用的编辑器

  7. 你得会用MarkDown语法来编写文章，如果你不会可以参见：Markdown 基本语法 | Markdown 官方教程

流程图#

本地部署Fuwari，编写文章 -> 推送更改到远程Github仓库 -> Cloudflare Pages检测到仓库更新自动构建新的网站静态文件 -> 网站成功更改

让我们开搞吧！#

首先，我们来本地部署Fuwari#

  1. Fork仓库：

    https://github.com/saicaca/fuwari

  2. 避免有小废物不会Fork仓库，这里附上图片教程

  4. 然后将仓库克隆到本地：git clone <你的仓库URL>（推荐使用SSH，可以不用魔法来推送更改）

  5. 首先，全局安装pnpm：npm install -g pnpm（如果npm国内拉取过慢，请尝试cnpm：npmmirror 镜像站）

  6. 然后在项目根目录安装依赖：pnpm install 和 pnpm add sharp

  7. 至此，你成功在本地部署了Fuwari

TIP

你也可以使用创建一个新的空仓库然后手动上传文件，并且可以将仓库可见性设为：Private

改写Fuwari的基本信息并且清理多余文件#

刚创建的Fuwari可能带有一些示例的博主名，ICON，URL，介绍和示例文章，为了让用户知道这是你的博客，我们需要一一改写

  1. 在根目录下的 src 文件夹中，你可以找到 config.ts 我们来开始改写

    • title：你的博客主标题

    • subtitle：你的博客副标题。可选，在首页会显示为“主标题 - 副标题”

    • lang：博客显示语言。注释已经列出了一些常用的值，如：en, zh_CN, zh_TW, ja, ko

    • themeColor：hue值则是你的博客主题色，可以在你的博客右上角的画板图标确定喜欢的颜色再填写

    • banner：src：即banner图片，支持http/https URL

    • favicon：src：即网站图标，支持http/https URL

    • links：即友情链接，这些链接在导航栏上

    • avatar：即你的头像

    • name：即你的名字

    • bio：即个性签名，会显示在头像和名字下面

    • NavBarConfig 为导航栏设置的超链接。ProfileConfig 为你的用户的超链接，分别如图

    • icon：你需要前往icones.js去搜索你想要的图标，比如QQ，则填写 fa6-brands:qq ，如图。Fuwari默认支持这几种类型：fa6-brands, fa6-regular, fa6-solid, material-symbols。可以在 astro.config.mjs 中搜索关键字进行配置

    • 这里我附上我的 config.ts

    • import type {
        LicenseConfig,
        NavBarConfig,
        ProfileConfig,
        SiteConfig,
      } from './types/config'
      import { LinkPreset } from './types/config'
      

      export const siteConfig: SiteConfig = {
        title: 'AcoFork Blog',
        subtitle: '爱你所爱！',
        lang: 'zh_CN',         // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko'
        themeColor: {
          hue: 355,         // 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: true,
          src: 'https://eo-r2.2x.nz/myblog/img/222.webp',   // 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: ''                // (Optional) URL link to the original artwork or artist's page
          }
        },
        favicon: [    // Leave this array empty to use the default favicon
           {
             src: 'https://q2.qlogo.cn/headimg_dl?dst_uin=2973517380&spec=5',    // 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: '128x128',              // (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: '随机图',
            url: 'https://pic.onani.cn',     // 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: 'GitHub',
            url: 'https://github.com/saicaca/fuwari',     // 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: 'https://eo-r2.2x.nz/myblog/img/111.webp',  // Relative to the /src directory. Relative to the /public directory if it starts with '/'
        name: '二叉树树',
        bio: 'Protect What You Love./爱你所爱！',
        links: [
          // {
            // 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/afoim',
          },
          {
            name: 'QQ',
            icon: 'fa6-brands:qq',
            url: 'https://qm.qq.com/q/Uy9kmDXHYO',
          },
          {
            name: 'Email',
            icon: 'fa6-solid:envelope',
            url: 'mailto:email@example.com',
          },
        ],
      }
      

      export const licenseConfig: LicenseConfig = {
        enable: true,
        name: 'CC BY-NC-SA 4.0',
        url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
      }

  2. 清理多余文件。在根目录下的 src/content/posts 文件夹中会有一些示例文章，这些文章介绍了一些MarkDown语法和技巧，可以让你更快上手Fuwari和fuwari，我们可以将其保存到别处

  3. 至此，你已经可以开始撰写文章了

让我们开始写作！#

推荐使用 黑曜石（Obsidian）

  1. 首先，在项目根目录执行：pnpm new-post <这里填写你的文章标题>

  2. 然后，在根目录下的 src/content/posts 文件夹中会多出一个 xxx.md文件

  3. 我们使用MarkText打开这个文件，你可以看到一些基本信息，我们只需要关注几个重要的信息

  4. title: xxx
    published: 2024-10-14
    description: ''
    image: ''
    tags: []
    categories: ''
    draft: false
    lang: ''

    • title：文章标题

    • published：文章创建时间

    • description：文章描述，正常会显示在文章标题下面

    • image：文章封面图（同目录需要写 ./ 如：./https://eo-r2.2x.nz/myblog/img/2024-10-14-11-33-28-image.webp）

    • tag：文章标签

    • categories：文章分类

  5. 我们还需要更改根目录下的 astro.config.mjs 。在第34行更改 stie: 为你的站点URL，如： site: "https://onani.cn",

  6. 欸？有的人就会问了，MarkDown固然好，但是我要如何处理图片的置入呢

  7. 这也很简单，多亏了MarkText这款软件，我们也可以像编辑Typecho一样直接使用Ctrl+CV来在MarkDown语法中置入图片，但是我们需要一些小设置：

    • 依次点击：MarkText软件的左上角的三条杠 -> File -> Perferences -> 左侧的Image分类 -> 如图设置 -> 注意更改第一个选项为Copy开头的选项，将Perfer开关打开，然后上下两个文本框一个填写绝对路径一个填写相对路径

    • 这样，当置入图片时，会往 https://eo-r2.2x.nz/myblog/img 文件夹复制一份，然后通过![1](https://eo-r2.2x.nz/myblog/img/1.webp)写入MarkDown文件。这样网站就能成功读取到图片啦。而你只需要Ctrl+CV，其他操作MarkText都会自动处理

  8. 至此，你已经会用MarkText编写MarkDown语法的博文了

本地预览，然后发布到Github#

  1. 当你认为你的文章已经写得差不多时，想要看看效果？请到项目根目录执行：pnpm dev，稍等片刻，你就可以本地预览你的博客啦

  2. 好！接下来我们需要使用Git将我们所做的更改发布到Github

    • 首先，你需要让Git知道你是谁：git config --global user.name "你的Github用户名"和git config --global user.email "你的Github邮箱@example.com"

    • 然后，更改远程仓库为ssh*（如果是通过ssh克隆的不用改）：git remote set-url origin git@github.com:xxx/xxx

    • 随后，让我们提交所有文件：git add .

    • 之后，让我们发布一个本地提交：git commit -m "项目初始化"

    • 最后，让我们将本地更改提交到远程仓库：git push

  3. 此时，你的Github仓库应该已经有了新的提交

让Cloudflare连接上Github，使用Pages服务展示你的博客（FREE！）#

  1. 前往Cloudflare的 Workers 和 Pages 页面，创建一个新Pages

  2. 然后选择连接Git存储库，连接你的Github，随后设置构建命令：pnpm build ，然后设置构建输出目录：dist ，如图

  3. 绑定自定义域，访问自定义域即可访问你的博客！

  4. 随后，你只需要在本地编写文章，然后使用Git将更改推送到远程仓库，Cloudflare就会自动部署，更新你的博客！

这篇文章是否对你有帮助？

联系 赞助

发现错误或想要改进这篇文章？

在 GitHub 上编辑此页

文章修订历史 (20 次)

查看变更记录
2025年12月18日 08:25:24 ace7ade

docs(posts): 更新文章中的编辑器推荐为黑曜石并调整工作区文件

2025年9月17日 03:22:12 c171309

docs(posts): 在教程中添加黑曜石编辑器的推荐链接

2025年9月17日 03:21:11 dda7dda

docs(posts): 更新fuwari.md的发布日期并调整工作区配置

2025年9月17日 03:19:34 0dc07ba

posts: 发布黑曜石MarkDown编辑器文章

2025年8月27日 22:50:15 1fa7ae2

docs(posts): 更新Fuwari教程中关于GitHub Desktop的评价

2025年8月1日 08:16:25 2f74587

!update: 将图源由R2改为Netlify

2025年7月29日 09:04:08 870e718

docs: 更新关于页面的博客名称变更记录

2025年7月26日 09:15:27 98609b5

feat: 更改域名为2x.nz

2025年7月24日 19:40:22 ddf0872

posts: 更新博客品牌信息和个人资料

2025年7月19日 16:52:49 146fe9b

更改图源为EdgeOne

2025年7月19日 16:09:57 9bf0d90

chore: 更新图片域名从eo-r2.2x.nz到r2.afo.im

2025年7月19日 15:18:58 f5afef1

更改图源为EdgeOne

2025年7月18日 12:27:16 c7e56a3

1

2025年7月12日 23:14:56 c0d89a8

posts: 修复文档中icones.js的错误链接

2025年7月1日 23:29:28 4e3e7e8

posts: 更改图源CDN为Secbit MCDN，并且页脚放置赞助信息

2025年6月26日 21:07:29 b480111

update: 更新R2源。删除302

2025年6月25日 00:10:13 e2d1f68

update: 更新R2源

2025年5月16日 18:11:52 5178a56

更改图源URL

2025年4月30日 19:44:57 b36ee82

更新文章fuwari，修复错误的ICON配置教程，链接由Font Awesome改为icones.js.org，并且重新配图。更新文章gh-proxy和starrail-fast添加对应标签。更新文章static-web将标签Cloudflare Page改为Cloudflare Pages

2025年4月30日 08:38:25 d80a293

初始化

Fuwari静态博客搭建教程
作者
二叉树树
发布于
2025年9月17日
许可协议
CC BY-NC-SA 4.0

现代！易上手！高效！且社区支持的超高校级的MarkDown编辑器！
禁用Astro跟弱智一般的静态构建图像优化
© 2024 - 2026 二叉树树 ，采用 CC BY-NC-SA 4.0 许可
RSS / 网站地图 / 更新您的Cookie
由 Astro 和 Fuwari 强力驱动
本网站代码 已开源 (638b8f9 @ 2026-02-24 10:34:06)