风车庄园

十八线小机场

浏览链接：点我前往，这个机场服务目前还是比较稳定的。之前用过一元机场，但是这个用起来不太稳定，而且现在比以前挂了好多节点，我最常用的美国地区节点都挂了，迫不得已才换了一个，现在这个机场还是比较稳定流畅的，但是我觉得不一定里面的节点不会挂。

从0到1的Fuwari博客部署

Mon, 06 Apr 2026 00:00:00 GMT

本文讲解基于 Astro 开发的静态博客模板 Fuwari 博客的部署，之前部署过 Hexo框架的博客，是部署在 Gitee Pages 服务的，但奈何 Gitee Pages 服务已于 2024 年 7 月 15 日正式下线，(´⊙ω⊙`)咋和我的生日是同一天？那会部署的博客自然就挂了。然后一直没管了，直到现在才想起来再部署的，本来想的是在阿里云OSS桶里面部署，然后发现部署在桶里面要花钱，又发现有个免费的比较方便方法来部署，于是有了此文和这个博客，~~可不是为了炫技（不是）~~

一、准备依赖

[!TIP]

若已经安装如下依赖组件，可跳过

Git版本任意

Node.js版本不小于20

pnpm版本不小于9

一个源码托管仓库，Github、Gitee、Gitlab等都可

1.安装Git

访问Git官网，下载安装git安装包，安装后检验：

git --version

显示版本号安装完成

2.安装Node.js

访问Node.js官网下载安装最新版本。选择长期维护（LTS）版本，安装后检验：

node -v
npm -v

显示版本号安装完成

3.安装pnpm

通过 npm 安装 pnpm，运行：

npm install -g pnpm

检验安装：

pnpm -v

显示版本号安装完成

4.准备源码本地仓库

4.1.克隆Fuwari到本地仓库

打开要存放博客的目录，在当前目录环境下启动终端运行：

git clone https://github.com/saicaca/fuwari.git

出现 done克隆到本地完成

进入博客根目录打开终端安装项目依赖

pnpm install

4.2.本地预览博客页面

博客根目录打开终端运行

pnpm dev

看到输出的浏览地址

 astro  v5.13.10 ready in 5012 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

按住ctrl键后单击地址即可本地访问博客页面，看到完整的博客页面的话，本地部署博客的部分已经完成

二.编写博客文章

一般流程下，此时就可以开始编写文章了，根目录下终端执行：

pnpm new-post <文件名>

此命令的作用是在/src/content/posts/目录中创建<文件名>.md文件，打开会看到已经有如下内容：

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: /images/cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
language: zh
---

这些属性的含义如下表：

属性	含义
`title`	文章的标题
`published`	文章发布的时间
`description`	对文章的简要描述
`image`	文章的封面，相对于当前MD文件所处的上下文目录，例：`./cover.jpeg`
`tags`	文章包含的标签，数组格式，例：`[Blog,hello world]`
`category`	文章分类
`draft`	文章是否为草稿（默认为`false`，设定为`true`文章将不可见，仅本地开发时可见）
`language`	文章语言，（若文章语言与博客的语言不一时设置）

此时你就可以打开Markdown文件一遍预览一遍编写博客了，这点还是比较爽的

[!WARNING]

每篇文章必须包含以上属性，否则会导致博客预览或构建时出现错误！

三、自定义博客样式

如果你想要你的博客看起来与众不同的话,请跟随以下步骤操作

1.修改博客配置文件

用文本编辑器打开博客根目录src/config.ts文件，该文件是博客主页的外观配置文件，让我来告诉怎么把你的博客变得个性化

（1）导入类型与预设

import type {
	ExpressiveCodeConfig,
	LicenseConfig,
	NavBarConfig,
	ProfileConfig,
	SiteConfig,
} from "./types/config";
import { LinkPreset } from "./types/config";

这快代码是约束配置对象的结构，和提供导航栏的若干对象，一般不需要修改

(2)siteConfig全局站点配置

接下是修改博客站点的属性：

字段	类型	说明
`title`	string	站点标题，显示在浏览器标签页、导航栏等位置。
`subtitle`	string	站点副标题，通常显示在首页标题下方。
`lang`	string	站点语言代码，影响 HTML 的 `lang` 属性以及部分 UI 文本（如日期格式）。`zh_CN` 表示简体中文。
`themeColor.hue`	number (0–360)	主题色的色相值。具体数值调节可在预览页面查看
`themeColor.fixed`	boolean	是否固定主题色，不允许访客通过颜色选择器更改。`false` 表示显示颜色选择器。
`banner.enable`	boolean	是否在首页显示横幅大图。此处为 `false`（不显示）。
`banner.src`	string	横幅图片路径。相对于 `/src` 目录，若以 `/` 开头则相对于 `/public`。
`banner.position`	string	图片的 `object-position` 属性，支持 `'top'`, `'center'`, `'bottom'`。默认 `'center'`。
`banner.credit.enable`	boolean	是否显示图片署名信息。
`banner.credit.text`	string	署名文字。
`banner.credit.url`	string	署名链接（可选）。
`toc.enable`	boolean	是否在文章右侧显示目录（Table of Contents）。
`toc.depth`	number (1–3)	目录中包含的最大标题层级。例如 `2` 表示只显示 `h2` 级别，`3` 表示显示 `h2` 和 `h3`。
`favicon`	数组	站点图标配置。留空则使用默认 favicon。每个元素可指定 `src`、`theme`（亮色/暗色模式）、`sizes` 等

（3）navBarConfig导航栏链接配置

export const navBarConfig: NavBarConfig = {
  links: [
    LinkPreset.Home,      // 预设的“主页”链接
    LinkPreset.Archive,   // “归档”链接
    LinkPreset.About,     // “关于”链接
    {
      name: "GitHub",
      url: "https://github.com/saicaca/fuwari",
      external: true,     // 外部链接，会显示外链图标并在新标签页打开
    },
  ],
};

links数组定义导航栏从左到右的菜单项
可以使用预设常量（LinkPreset），也可以自定义对象，包含 name、url、external（是否外部链接）。
注意：内部链接不需要写 base path（如 /about），框架会自动添加。

（4）profileConfig侧边栏、个人资料卡配置

字段	说明
`avatar`	头像图片路径。相对于 `/src` 或以 `/` 开头则相对于 `/public`。示例使用了 demo 图片。
`name`	显示的名字。示例为 “Lorem Ipsum”，实际应改为自己的名字。
`bio`	个人简介，简短描述。
`links`	社交链接数组。每个链接包含 `name`、`icon`（图标代码，来自 Icones.js）、`url`。使用图标时需要安装对应的 Iconify 图标集（例如 `pnpm add @iconify-json/fa6-brands`）

这个配置通常用于博客侧边栏或关于页面中展示个人信息。

(5)licenseConfig版权许可配置

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

enable: 是否在文章底部或站点全局显示许可声明。
name: 许可协议名称。
url: 协议详情页链接。

(6)expressiveCodeConfig代码块高亮主题配置

export const expressiveCodeConfig: ExpressiveCodeConfig = {
  // 注意：部分样式（如背景色）被覆盖，请查看 astro.config.mjs
  // 请选择深色主题，因为此博客主题目前只支持深色背景
  theme: "github-dark",
};

Fuwari 使用 expressive-code 插件来渲染代码块。
theme 指定代码高亮主题，这里使用 github-dark。由于博客当前仅支持深色背景，因此应选择深色主题。
样式可能被 astro.config.mjs 中的配置覆盖，需要留意。

四、推送到远端源码仓库

[!TIP]

本次搭建使用Github作为源码仓库，其他亦可

若是通过Git克隆仓库的方式下载Fuwari，那么目录中会自带已经初始化后的.git目录，包含目前所有的版本控制信息,建议删掉此目录然后重新把仓库初始化

git init

1.新建仓库

在创建仓库页面填写好仓库名、和其他信息后，看到以下界面

按照以下操作将本地仓库代码推送到远端仓库

git add .
git commit -m "初始化"
git branch -M main
git remote add origin https://github.com/Kian-Xu/blog-git
git push -u origin main

[!NOTE]

git commit是将当前模板保存到本地，类似于归档，后续出现问题需要回滚时，即可通过该存档恢复到你最后提交的状态

完成后即可查看是否提交成功

五、静态页面服务部署博客

[!NOTE]

提交到仓库后，还需要使用静态页面服务来实现在线访问，你也可以用其他方法来部署你的博客，例如阿里云OSS+静态页面托管、部署在vercel平台和Cloudflare Pages等，但我是不想花钱的，所以本次搭建用EdgeOne来部署

1.配置静态页面服务

进入EdgeOne控制台，点击创建项目-通过导入Git仓库创建，选择上一步创建的仓库

配置项目

加速区域区：只要选择包含中国大陆的选项，都需要进行ICP备案，否则后续无法添加自定义域名
构建命令填写pnpm build
安装命令填写pnpm install,其他保持默认即可

完成后开始部署。若顺利编译完成，即可预览了

2.添加自定义域名

[!TIP]

前提条件

确保已经拥有一个域名

输入自己拥有的域名后看到配置解析

在你的域名托管平台添加一条TXT解析记录

:::TIP

此处的主机记录对应上方图片的解析内内容

:::

添加完成后点击验证,验证完成后点击完成，此时添加的自定义域名就开始部署了，但还并没有完成，还需要再添加一条CNAME解析

此时再去添加一条CNAME解析，添加完成后看到域名状态是已生效，现在就可通过域名来访问了，但是刚打开网站就会看到警告，当前网站不安全

，应为还没有为这个站点配置HTTPS证书，Edgeone提供免费证书，添加即可

:::note[恭喜！！] 现在你已经拥有了属于你自己的，可以通过域名访问的，安全的，个性化的博客站点了 :::

:::tip[日后工作流程]

pnpm dev打开实时预览
pnpm new-post撰写文章
编辑完成后保存退出
git add .选择所有文件
git commit -m设定提交名字
git push -u origin mian提交代码
等待EdgeOne自动部署完成，浏览

:::

Markdown 扩展功能

Wed, 01 May 2024 00:00:00 GMT

GitHub仓库卡片

你可以添加链接到 GitHub 仓库的动态卡片，在页面加载时，仓库信息会从 GitHub API 拉取。

::github{repo="Fabrizz/MMM-OnSpotify"}

使用代码::github{repo="<owner>/<repo>"}创建GitHub仓库卡片。

::github{repo="saicaca/fuwari"}

警告框

支持以下类型的警告框：note tip important warning caution

:::note 突出显示即使用户略读也应考虑的信息。 :::

:::tip 帮助用户更成功的可选信息。 :::

:::important 用户成功所必需的关键信息 :::

:::warning 由于潜在风险，需要用户立即关注的关键内容。 :::

:::caution 行动的潜在负面后果。 :::

基本语法

:::note
突出显示即使用户略读也应考虑的信息。
:::

:::tip
帮助用户更成功的可选信息。
:::

自定义标题

警告框的标题可以自定义。

:::note[这是标题] 这是一个带有自定义标题的注释。 :::

:::note[这是标题]
这是一个带有自定义标题的注释。
:::

GitHub 语法

[!TIP] GitHub语法同样支持

> [!NOTE]
> GitBub语法同样支持

> [!TIP]
> GitBub语法同样支持

剧透

你可以向文本中添加剧透。文本也支持 Markdown 语法。

这个内容 :spoiler[是隐藏的！嘻嘻]!

这个内容 :spoiler[是隐藏的！**嘻嘻**]!

风车庄园

推荐机场

十八线小机场

推荐链接

推荐代理软件

从0到1的Fuwari博客部署

一、准备依赖

1.安装Git

2.安装Node.js

3.安装pnpm

4.准备源码本地仓库

4.1.克隆Fuwari到本地仓库

4.2.本地预览博客页面

二.编写博客文章

三、自定义博客样式

1.修改博客配置文件

四、推送到远端源码仓库

1.新建仓库

五、静态页面服务部署博客

1.配置静态页面服务

2.添加自定义域名

Markdown 扩展功能

GitHub仓库卡片

警告框

基本语法

自定义标题

GitHub 语法

剧透