准备工作

一台能正常访问网络电脑
一个github账号
一个vercel账号
慈眉善目的git（误

安装

首先克隆项目至博客根目录下：

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

注意: 博客所在的文件夹一定要设置应用访问访问权限为完全控制，否则可能会出现报错。

安装 pnpm

在博客根目录下按下Ctrl+Shift+鼠标右键 > 在此处打开Powershell窗口 ，
执行 npm install -g pnpm 安装pnpm，如果之前已经安装了就不用再安装了，
然后执行 pnpm install 和 pnpm add sharp 以安装所需要的依赖。

主题配置

进入./src，打开config.ts，这里面是Fuwari的简略设置：

关于博客名称及语言的设置：

export const siteConfig: SiteConfig = {
  title: '',        //博客标题
  subtitle: '',     //博客名称
  lang: 'zh_CN',    //博客语言
  ……

Fuwari所支持的语言有：

英文 en
简体中文 zh_CN
繁体中文 zh_TW
日语 ja
韩语 ko

这里是导航栏设置

export const navBarConfig: NavBarConfig = {
  links: [
    LinkPreset.Home,
    LinkPreset.Archive,
    LinkPreset.About,
    {
      name: 'GitHub',                               // 显示在导航栏上的名称
      url: 'https://github.com/haoavil0109',        // 放上你的链接
      external: true,                               // 是否显示外部链接图标
    },
  ],
}

2024-08-05 175505.png

这里是个人信息设置

export const profileConfig: ProfileConfig = {
  avatar: 'assets/images/demo-avatar.png',      // 你的头像，如果以“/”开头，则相对于 /public 目录
  name: 'name',                                 // 你的名字
  bio: 'You are looking at us now, through your skin and your eyes.',
  links: [
    {
      name: 'GitHub',                       
      icon: 'fa6-brands:github',                // 你需要在 https://icones.js.org/ 中找对应图标代码
      url: 'https://github.com/haoavil0109',    //如果尚未包含图标，就需要安装相应的图标集：pnpm add @iconify-json/<icon-set-name>
    }
  ]
}

个人信息

最后面是关于许可的设置：

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

2024-08-05 175708.png

主要指令

指令	动作
`pnpm install` 与 `pnpm add sharp`	安装依赖
`pnpm dev`	在 `localhost:4321` 启动本地开发服务器
`pnpm build`	构建网站至 `./dist/`
`pnpm preview`	本地预览已构建的网站
`pnpm new-post <filename>`	创建新文章
`pnpm astro ...`	执行 `astro add`, `astro check` 等指令
`pnpm astro --help`	显示 Astro CLI 帮助

更详细的说明访问

部署

在github（或是其他的）上创建仓库，在博客根目录下按下Ctrl+Shift+鼠标右键 > 在此处打开Powershell窗口
先进行构建：

1	pnpm build

推送：

$ git init
$ git add .
$ git commit -m "commit message"
$ git remote add origin <你的仓库url>
$ git push -u origin main

这时，文件已经被推送到远程仓库。
接下来，登录 vercel
_5-8-2024_175951_vercel.com.jpeg
点击 右上角 Add New... > Project
_5-8-2024_18240_vercel.com.jpeg
如果你以Github登录，可以直接选择你的仓库，没有登录可以在这里直接以Github登录。
_5-8-2024_18516_vercel.com.jpeg
在这里设置项目名称，Framework Preset会自动选择，如果没有手动选择为Astro。
点击Deploy，然后 坐和放宽 就行。

:::caution
_5-8-2024_18118_vercel.com.jpeg
如果出现上图这样的报错，前往项目设置的如下图界面
_5-8-2024_181229_vercel.com.jpeg
将 Install Command 设置为 pnpm install --no-frozen-lockfile 之后重新 Deploy
注意需要点击保存