这是这个站点的第一篇文章。写它的时候，首页的轮换背景还没换上真正的插画，只有一层紫色的渐变光。

为什么要自己搭一个站#

平台很好用，但总有些东西不适合放在别人的时间线上：写过的小工具、踩过的坑、半夜三点想明白的一件事。放在自己的域名下，它们至少不会因为平台改版而消失。

有一个自己的角落，比在广场上喊话更舒服。

这个站会写什么#

• 写代码时踩到的坑，以及最后怎么绕过去的
• 折腾各种工具的记录（比如这次搭站本身）
• 一些和代码无关的、二次元相关的东西

技术上是这样的#

整站是纯静态的：npm run build 生成一堆 HTML，推到 GitHub 之后由 Actions 自动发布到 GitHub Pages。

bash
npm install
npm run dev      # 本地预览
npm run build    # 生成 dist/

发文章只要往 content/posts/ 里丢一个 Markdown 文件：

md
---
title: 文章标题
date: 2026-10-21
lang: zh
summary: 一句话摘要
tags: [标签]
---

正文从这里开始。

写完 push 上去，几分钟后线上就有了。

接下来#

• 换上真正的背景插画
• 把文章的代码块做个高亮主题
• 或许再加个评论区

先这样，剩下的慢慢来。

首页想要的效果有四个：背景轮换、打字机标题、飘落的樱花、跟着鼠标的光点。它们都可以不装任何依赖就做出来。

背景：纯 CSS 就能交叉淡入淡出#

关键是把每张图放在独立的一层上，然后用同一个 animation 但不同的 animation-delay 错开：

css
.bg--has-images .bg__layer {
  background-image: var(--bg-url);
  animation:
    bg-show var(--duration) ease-in-out var(--delay) infinite both,
    kenburns calc(var(--duration) * 2) ease-in-out infinite alternate;
}

@keyframes bg-show {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  50%  { opacity: 1; }
  58%, 100% { opacity: 0; }
}

bg-show 里 3% 到 50% 是全不透明，58% 之后完全透明。因为相邻两层的透明区间有重叠，叠化时两张图会同时可见——这就是交叉淡入淡出的来源。

把图片数量 × 2 层叠起来，轮换的循环就接上了。

打字机：async/await 反而最清楚#

ts
const run = async () => {
  for (;;) {
    if (!deleting) {
      charIndex++;
      target.textContent = line.slice(0, charIndex);
      if (charIndex >= line.length) {
        deleting = true;
        await pause(2200);
        continue;
      }
      await pause(85 + Math.random() * 70);
    } else {
      charIndex--;
      target.textContent = line.slice(0, Math.max(0, charIndex));
      if (charIndex <= 0) {
        deleting = false;
        lineIndex = (lineIndex + 1) % lines.length;
        await pause(480);
        continue;
      }
      await pause(34 + Math.random() * 24);
    }
  }
};

每次暂停的时长带一点随机，打出来就不会有机械感。

樱花粒子：Canvas 比 DOM 便宜#

七十个 DOM 元素做动画会掉帧，画在 Canvas 上就几乎不花钱：

ts
const frame = (now: number) => {
  const dt = Math.min((now - last) / 1000, 0.05);
  last = now;
  ctx.clearRect(0, 0, w, h);

  for (const p of petals) {
    p.phase += dt * 0.9;
    p.y += p.speed * dt;
    p.x += Math.sin(p.phase) * p.sway * dt;
    p.rot += p.vr * dt;
    draw(p);
  }
  requestAnimationFrame(frame);
};

花瓣用 bezierCurveTo 画一个不对称的椭圆，星星用四个二次贝塞尔拼出来。z 值决定大小、速度和透明度，制造纵深。

别忘了尊重用户的偏好#

所有动画都要在 prefers-reduced-motion: reduce 下退化成静态：

css
@media (prefers-reduced-motion: reduce) {
  .bg--has-images .bg__layer { animation: none; }
  .bg--has-images .bg__layer:first-child { opacity: 1; }
}

ts
if (reduceMotion.matches) {
  target.textContent = lines[0];
  return;
}

小结#

四个效果，零依赖，整站 JS 加起来不到 12KB。

用 Markdown + git push 发文章之后，写作变成了一次提交，历史、回滚、协作都免费得到。

正文#

这里放正文内容。详细内容请到文章页查看。

自定义域、HTTPS 证书、子路径——部署到 GitHub Pages 时最容易卡住的三件事。

正文#

这里放正文内容。详细内容请到文章页查看。

从 PowerShell 到 Windows Terminal，记一份够用就好、不折腾的配置。

正文#

这里放正文内容。详细内容请到文章页查看。

技术之外的一些阅读记录，以及它们留下的印象。

正文#

这里放正文内容。详细内容请到文章页查看。

追番和写代码其实很像：都在等一个恰到好处的转折。

正文#

这里放正文内容。详细内容请到文章页查看。

平台会改版、账号会消失，但一个属于自己的地址可以留很久。

正文#

这里放正文内容。详细内容请到文章页查看。