1.安装Git#

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

1
git --version

显示版本号安装完成

2.安装Node.js#

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

1
node -v
2
npm -v

显示版本号安装完成

3.安装pnpm#

通过 npm 安装 pnpm，运行：

1
npm install -g pnpm

检验安装：

1
pnpm -v

显示版本号安装完成

4.准备源码本地仓库#

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

1
pnpm install

4.2.本地预览博客页面#

博客根目录打开终端运行

1
pnpm dev

看到输出的浏览地址

1
 astro  v5.13.10 ready in 5012 ms
2

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

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

1.修改博客配置文件#

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

（1）导入类型与预设

1
import type {
2
  ExpressiveCodeConfig,
3
  LicenseConfig,
4
  NavBarConfig,
5
  ProfileConfig,
6
  SiteConfig,
7
} from "./types/config";
8
import { LinkPreset } from "./types/config";

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

(2)siteConfig全局站点配置

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

（3）navBarConfig导航栏链接配置

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

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

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

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

(5)licenseConfig版权许可配置

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

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

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

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

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

1.新建仓库#

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

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

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

NOTE

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

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

1.配置静态页面服务#

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

配置项目

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

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

2.添加自定义域名#

TIP

前提条件

确保已经拥有一个域名

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

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

TIP

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

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

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

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

恭喜！！

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

日后工作流程

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