TsangAsuna

技术选型#

全部免费，无域名、无服务器、无数据库。

1. 环境准备#

本机需要 Node.js 22.12+（本教程用 v24），包管理器用 pnpm（由 Node 自带的 corepack 提供）：

1
node -v          # v24.19.0
2
corepack enable pnpm
3
corepack pnpm -v # 9.x

2. 拉取主题并安装依赖#

1
git clone https://github.com/LyraVoid/Shirone.git
2
cd Shirone
3
corepack pnpm install

3. 本地预览（写文章时的核心工作流）#

1
corepack pnpm run dev

浏览器打开 http://localhost:4321，修改 src/content/posts/ 下的 md 文件会热更新，这就是”即时预览”。

4. 站点配置#

主要配置在 src/config/ 目录（TS 文件，带详细注释）：

• siteConfig.ts —— 站点名、lang、主题色、时区
• profileConfig.ts —— 头像、名称、社交链接（GitHub / Steam 图标跳转）
• animeConfig.ts —— 番剧数据源与 Bangumi UID
• musicConfig.ts —— 音乐播放器歌单（Meting）
• navBarConfig.ts、sidebarConfig.ts —— 导航与侧栏

语言默认 en，改成中文：

1
lang: "zh_CN",
2
timeZone: "Asia/Shanghai",

社交链接（去掉了 Twitter，换成自己的 GitHub 与 Steam 个人页）：

1
links: [
2
  { name: "Steam", icon: "fa6-brands:steam", url: "https://web.xiaoheihe.cn/..." },
3
  { name: "GitHub", icon: "fa6-brands:github", url: "https://github.com/TsangAsuna" },
4
],

5. 双语言：两套构建两套部署#

主题的 i18n 是构建期编译的，所以”中文切换”实际是两个静态站点：中文站 tsangasuna.pages.dev、英文站 tsangasuna-en.pages.dev，顶栏按钮互相跳转。构建时用环境变量控制语言：

1
# 中文站
2
$env:PUBLIC_ALT_LANG_URL = 'https://tsangasuna-en.pages.dev'
3
corepack pnpm run build
4
Move-Item dist dist-zh
5

6
# 英文站
7
$env:PUBLIC_LANG = 'en'
8
$env:PUBLIC_ALT_LANG_URL = 'https://tsangasuna.pages.dev'
9
corepack pnpm run build
10
Move-Item dist dist-en

坑：Move-Item 而不是 Copy-Item —— Copy-Item 到已存在的目录会嵌套成 dist/dist/，部署的是旧版。

6. 部署到 Cloudflare Pages#

1
# 项目名不允许大写
2
npx wrangler pages project create tsangasuna --production-branch main
3
npx wrangler pages project create tsangasuna-en --production-branch main
4

5
npx wrangler pages deploy dist-zh --project-name tsangasuna --branch main --commit-dirty=true
6
npx wrangler pages deploy dist-en --project-name tsangasuna-en --branch main --commit-dirty=true

部署完即得 https://tsangasuna.pages.dev。Pages 免费档：请求 10 万/天，流量不计量。

7. 同步 Bangumi 追番#

主题自带 anime:sync 脚本。先在 animeConfig.ts 打开快照模式：

1
source: { kind: "snapshot", provider: "bangumi" },
2
providers: { bangumi: { enable: true, userId: "781647" } },

然后同步（注意 api.bgm.tv 国内直连不通，需要走代理）：

1
$env:HTTPS_PROXY = 'http://127.0.0.1:10808'
2
$env:NODE_USE_ENV_PROXY = '1'
3
corepack pnpm run anime:sync --provider bangumi

结果写入 src/data/anime-snapshots/bangumi.json（本博客同步到 372 部），构建时静态渲染，无需后端。

8. 换音乐播放器歌单#

1
meting: {
2
  server: "netease",
3
  type: "playlist",
4
  id: "6941867750",
5
},

歌单走 api.injahow.cn/meting 公开 API 解析，客户端异步拉取。

9. 写新文章并发布#

1
corepack pnpm new-post -- my-new-post
2
# 生成 src/content/posts/my-new-post.md

frontmatter 字段：

1
---
2
title: 文章标题
3
published: 2026-09-15
4
description: 摘要
5
tags: [标签A, 标签B]
6
category: 分类
7
draft: false
8
lang: ''
9
---

正文就是 Markdown，代码块用围栏语法自动高亮（本主题内置 Expressive Code）：

1
```powershell
2
corepack pnpm run build
3
```

图片放进 public/ 或文章同目录，用相对路径引用。

发布 = 重复第 5、6 步：构建两站 → 部署两站。本机没有环境时，把整个流程交给 GitHub Actions 跑 workflow_dispatch 也可以。

10. 验证#

1
# 检查两个站都 200
2
curl -I https://tsangasuna.pages.dev
3
curl -I https://tsangasuna-en.pages.dev

corepack pnpm run check（astro check）保证代码与配置零类型错误；anime:sync 保证番剧快照新鲜。