Astro 博客搭建全流程

最近在使用 Astro 框架和 Astro Pure 主题搭建个人博客网站时遇到了一些小问题，现在刚好搭建完毕，想着不如直接写一篇以此为主题的博客文章，既是一个记录，也说不定能在以后帮助到其他人。

搭建环境#

Node.js#

对于 Astro 的项目，确保已经下载好了符合要求的 Node.js 和代码编辑器（比如 VS Code ）

你可以输入以下命令行查看是否安装成功

node -v
npm -v

plaintext

（可选择）更改 `npm` 的`全局模块安装路径`和`缓存路径`#

如果你希望将默认存放到C盘的路径更改到D盘（或者其他你想要的位置），可以按照以下操作进行：

在D盘新建文件夹 D:\nodejs
在该文件夹内新建两个文件夹 node_global 和 node_cache
确保这两个文件夹有写入和修改的权限
在 CMD 中输入以下命令

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

plaintext

修改环境变量打开编辑系统环境变量，在用户变量窗口找到名为Path的变量，选择它并单击编辑，将C:\Users<用户名>\AppData\Roaming\npm替换为D:\nodejs\node_global
验证是否更改成功在命令行中执行 npm install express -g，如果在D:\nodejs\node_global\node_modules中存在 express 文件夹，则表示全局安装路径成功

(可选择) 安装 Bun 并且将其缓存移动到D盘#

打开 CMD 并运行
```
npm install -g bun
```
plaintext
打开编辑系统环境变量，新建用户变量，变量名：BUN_INSTALL_CACHE_DIR 变量值：D:\bun\cache (你想存放的路径)
重启终端（CMD 或 PowerShell）即可生效
检验是否安装成功
```
bun --version
```
bash

下载主题#

此处请参阅 Pure 主题文档

下载时网络超时？#

如果下载失败提示网络超时或者连接被重置 (reset)，可以尝试以下方法解决：

使用镜像源下载
在 CMD 中配置临时代理（Clash Verge 的端口为7897）
```
set http_proxy=http://127.0.0.1:7897
set https_proxy=http://127.0.0.1:7897
```
plaintext
确保VPN开启了系统代理，然后在该窗口重新下载
开启 Clash Verge 中的虚拟网卡模式（TUN模式），以管理员身份运行命令提示符重新下载

Supabase + Waline#

使用 Supabase 参与构建网站的 Waline 评论系统，可以参考博客翻新日志和博客添加访问计数统计两位博主给出的步骤

不过，需要注意的是，目前在 Supabase 点击主页的 Connect 之后，请注意在弹出页面中的 Method 区域选择Session Pooler，点开 View Parameters 再复制所需的环境变量.

将 Astro Pure 部署到 Vercel#

有时候我们在将 Github 仓库推送至 Vercel 进行部署时会报错，提示我们Error: The Output Directory "dist" is empty.。这时候，我们需要进入项目的Settings，在左侧找到Build and Deployment，在Root Directory里面把已有的路径清空，然后点击右下角的Save保存后重新部署.

更改网站的字体样式#

我个人倾向霞鹜文楷的字体，在 Astro Theme Pure 中可以通过修改 assets/styles/app.css文件来引用该字体

首先，在public/fonts内添加.woff格式的字体文件

然后，在app.css引用字体

/* 英文：SF Pro Text */
@font-face {
  font-family: 'SF Pro Text';
  src: url('/fonts/SFProText-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 中文：霞鹜文楷 Screen */
@font-face {
  font-family: 'LXGW WenKai Screen';
  src: url('/fonts/lxgwwenkaiscreen.subset.v1.235.standard.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 添加这行代码 */
  --font-sans: 'SF Pro Text', 'LXGW WenKai Screen', ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* 其他部分 */
}

html {
  /* 应用字体变量 */
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

css

刷新看看，网站是否已经应用了最新的字体呢

添加 Umami 统计#

为你的网站添加统计功能，可以参考此处的教程

在layouts/BaseLayout.astro中的<head></head>插入 Umami 提供的 Tracking code 即可