Astro+Fuwari博客部署教程

准备的东西#

聪明的脑子，不会的先搜索，搜索不到就~~去和AI调情~~。
版本控制系统（Git），也可以使用Github Desktop。
Fuwari的初始化和预览需要Node.js — Run JavaScript Everywhere。
Markdown编辑器，例如Visual Studio Code、marktext等。
一个Git远程仓库，例如Github、GitLab等（可选）
PaaS平台，例如Netlify、Vercel等（可选）

让我们开始吧#

🚀 使用方法 1#

使用 create-fuwari 在本地初始化项目。

1
# npm
2
npm create fuwari@latest
3

4
# yarn
5
yarn create fuwari
6

7
# pnpm
8
pnpm create fuwari@latest
9

10
# bun
11
bun create fuwari@latest
12

13
# deno
14
deno run -A npm:create-fuwari@latest

通过配置文件 src/config.ts 自定义博客
执行 pnpm new-post <filename> 创建新文章，并在 src/content/posts/ 目录中编辑
参考官方指南将博客部署至 Vercel, Netlify, GitHub Pages 等；部署前需编辑 astro.config.mjs 中的站点设置。

🚀 使用方法 2#

使用此模板生成新仓库或 Fork 此仓库
进行本地开发，Clone 新的仓库，执行 pnpm install 和 pnpm add sharp 以安装依赖
- 若未安装 pnpm，执行 npm install -g pnpm
通过配置文件 src/config.ts 自定义博客
执行 pnpm new-post <filename> 创建新文章，并在 src/content/posts/ 目录中编辑
参考官方指南将博客部署至 Vercel, Netlify, GitHub Pages 等；部署前需编辑 astro.config.mjs 中的站点设置。

修改配置文件#

astro.config.mjs

请自行阅读Astro 配置文件
src\config.ts（其他的请自行翻译注释）
- title：博客主标题
- subtitle：博客副标题，会显示为title - subtitle
- lang：博客的语言，支持'en', 'zh-CN', 'zh_TW', 'ja', 'ko', 'es', 'th', 'vi'等
- themeColor
  - hue：博客主题色主题颜色的默认色调，范围从 0 到 360。例如，红色：0，青色：200，青蓝色：250，粉色：345
  - fixed：是否隐藏主题颜色选择器给访客

引用自 Fuwari静态博客搭建教程 - AcoFork Blog

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

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

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

avatar：即你的头像

name：即你的名字

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

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

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