这个网站是怎么搭起来的

这里是程的静态网页，用来放练习作品和日常折腾记录。这是第一篇文章，先把这个站本身讲清楚：它放什么、怎么搭的、为什么这么搭，以及后面打算怎么部署、写些什么。

这个站放什么

• 练习作品：写出来的小东西、做过的实验，能拿出来看的就放上来
• 折腾记录：装环境、踩坑、修问题的过程，重点是「以后翻回来能照着再做一遍」
• 日常：一些还没到能单独成篇、又不想丢的想法

为什么做成静态站

最直接的好处是不需要服务器，也不需要数据库：所有页面在构建的时候就已经生成成一个个 HTML 文件，托管时只要把这堆文件放上去就行。

这意味着：

• 托管几乎不花钱：GitHub Pages、Cloudflare Pages 这类静态托管都能直接放
• 打开快：没有后端查询、没有数据库连接，CDN 直接吐静态文件
• 不容易坏：没有服务要维护、没有依赖要升级，托管挂了换个地方传一遍就行
• 好备份：整个站就是一份 Markdown 加图片，再配上 git，永远有历史可查

代价是没有后端：评论、点赞这类需要服务端的东西，要么关掉，要么接第三方服务。这个站目前就不开评论。

原理：一次构建都发生了什么

写文章就是写 Markdown，一篇一个文件夹，中英文各一份：

src/content/blog/how-this-site-works/
├── zh-cn.md
└── en.md

每篇开头的 frontmatter 记着标题、日期、分类、摘要这些信息：

---
title: 这个网站是怎么搭起来的
pubDate: 2026-10-03
description: 一句话摘要
category: 建站
slugId: how-this-site-works
pinTop: 1
---

然后跑一次构建（pnpm build），它做四件事：

1. 把 Markdown 编译成 HTML：标题、代码块、表格、公式全部在构建期处理好，输出的就是静态页面，默认不带 JavaScript。
2. 需要交互的地方才加载 JS：搜索框、目录、归档筛选这些用 Svelte 组件写，按需加载——也就是所谓的「岛屿架构」，纯静态的正文完全不受影响。
3. 扫描生成的页面，建一份搜索索引：搜索是纯前端的，查询在浏览器本地完成，不需要任何搜索服务，也不会有请求发出去。
4. 顺带生成 sitemap.xml、rss.xml、robots.txt：都是构建产物，不用手动维护。

跑完 dist/ 里就是可以直接托管的静态文件。

站内跳转额外做了处理：点链接不会整页刷新，而是取回新页面后只替换正文，所以切换很顺，还能带上淡入淡出和悬停预取。图片在构建期会生成一份模糊占位，图还没加载出来时不会是一片空白。

样式用 Tailwind 加一套 CSS 变量，浅色和深色两套颜色值放在同一个文件里，改配色不用翻组件。整站支持中英双语：/ 是中文，/en/ 是英文。

部署打算

现在的计划是三层：

• 代码放 GitHub：每次改动都有记录，改坏了能退回去
• 站点用 GitHub Pages 或 Cloudflare Pages 托管：推上去自动构建、自动发布，产物就是 dist/
• Cloudflare 负责域名和缓存：域名解析和 CDN 都交给它

因为是纯静态产物，这三层互相之间都是可替换的：哪天想换托管，把 dist/ 传到别处就行，不用改任何代码。

上线时有两个细节要注意：一是构建配置里的站点地址要改成真实域名，不然 sitemap、RSS 和分享卡片里的链接还是本地的；二是如果站点挂在 用户名.github.io/仓库名 这种子路径下面，得额外配一个路径前缀。

接下来写什么

按实际做的事情来：做一件、记一件，按时间往下排。「归档」页会自动按年份把这些文章列出来，所以不需要另外维护目录。