从零构建赛博朋克静态博客：结构、动效、性能与部署全流程

content/*.md
   │  gray-matter  →  title / date / tags / summary
   │  markdown-it  →  <p> <h2> <pre><code class="hljs">...
   ▼
scripts/templates.mjs  →  layout() 套骨架 + 卡片 + 目录
   │
   ▼
index.html / posts/*.html / about.html / 404.html      ← 磁盘上的真实文件
   │  Vite 打包（CSS 压缩、JS 压缩、文件名加 hash）
   ▼
dist/  →  sitemap.xml / feed.xml / robots.txt / .nojekyll   （writeBundle 阶段补写）

cyberblog/
├── package.json               # 4 个 devDependencies + 4 条 npm script
├── vite.config.mjs            # base / 多页 / 打包策略
├── content/                   # 唯一需要你天天动的地方
│   ├── 2026-09-28-hello-neon.md
│   ├── 2026-10-12-canvas-particles.md
│   └── 2026-10-18-cyberpunk-blog-tutorial.md
├── scripts/                   # 构建器，六个文件各管一件事
│   ├── site.config.mjs        # 站点标题 / 作者 / 域名 / 配色轮换
│   ├── markdown.mjs           # md 渲染：锚点、目录、代码块外壳、图片懒加载
│   ├── content.mjs            # 读 md → 结构化对象 + 阅读时长 + 标签统计
│   ├── templates.mjs          # 纯函数模板：layout / card / 五个页面
│   ├── generate.mjs           # 写页面到磁盘 + sitemap / robots / RSS
│   └── vite-plugin-blog.mjs   # 把上面这套接进 Vite 的三个生命周期钩子
├── src/
│   ├── main.js                # 交互层：粒子 / 打字机 / 进场 / 倾斜 / 过滤
│   └── styles/cyber.css       # 设计系统 + 全部 CSS 动画 + 高亮配色
├── public/assets/             # 原样拷贝到 dist 的静态资源
│   ├── holo-core.svg          # 首页全息核心（SMIL 动图，6KB）
│   ├── data-stream.svg        # 数据流（SMIL 动图，5KB）
│   ├── mark.svg               # 品牌标志
│   └── favicon.svg
├── dist/                      # 构建产物（git 忽略，可直接部署）
└── *.html                     # 构建器生成的页面（git 忽略）

// scripts/vite-plugin-blog.mjs
config() {
  const { input } = generateSite()               // 先把 md 渲染成 *.html 写到磁盘
  return { build: { rollupOptions: { input } } } // 再把它们注册成打包入口
}

layout({ title, desc, body, root: '', pageId: 'index', boot: true })   // /index.html
layout({ title, desc, body, root: '../', pageId: 'post' })             // /posts/xxx.html

// 构建时：front matter 注入 data 属性
// <article class="card" data-tags="CSS,动效" data-title="纯 CSS 故障艺术">
// 运行时：只做字符串匹配 + hidden 切换，不重建 DOM
var okTag = activeTag === 'all' || tags.indexOf(activeTag) !== -1
card.hidden = !(okTag && okText)

.post__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;   /* 右边 210px 的 sticky 目录 */
  gap: 56px;
}

<img src="/assets/holo-core.svg" alt="全息核心：旋转光环与脉冲波形"
     width="560" height="560" fetchpriority="high" decoding="async">

.glitch { position: relative; color: #f2f8ff; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;        /* 叠加而非遮挡，保留底层的品红斜杠 */
}
.glitch::before { color: var(--cyan);    text-shadow: -2px 0 var(--magenta); animation: glitch-a 6.5s steps(1) infinite; }
.glitch::after  { color: var(--magenta); text-shadow:  2px 0 var(--cyan);    animation: glitch-b 5.5s steps(1) infinite; }

@keyframes glitch-a {
  0%, 88%, 100% { transform: translate3d(0,0,0); clip-path: inset(0 0 100% 0); }
  89% { transform: translate3d(-5px,0,0); clip-path: inset(8% 0 62% 0); }
  90% { transform: translate3d( 5px,0,0); clip-path: inset(58% 0 18% 0); }
  91% { transform: translate3d(-3px,0,0); clip-path: inset(32% 0 46% 0); }
}

.fx--scanlines {
  position: fixed; inset: -4px 0;   /* 上下各多留 4px，避免位移时露边 */
  background: repeating-linear-gradient(to bottom,
    rgba(190,240,255,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  animation: scan-drift 7s linear infinite;
}
@keyframes scan-drift {
  from { transform: translate3d(0,-3px,0); }
  to   { transform: translate3d(0, 0,0); }
}

var dpr = Math.min(window.devicePixelRatio || 1, 2);
canvas.width  = Math.floor(w * dpr);
canvas.height = Math.floor(h * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);   // 用 CSS 像素坐标绘制，缩放交给矩阵

var idle = window.requestIdleCallback || function (fn) { return setTimeout(fn, 260); };
idle(function () { initCanvas(); }, { timeout: 1400 });

var io = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (!entry.isIntersecting) return;
    entry.target.classList.add('is-visible');
    io.unobserve(entry.target);        // 触发一次就解绑，避免反复计算
  });
}, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });

html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

<script>document.documentElement.classList.add("js");</script>

card.addEventListener('pointermove', function (e) {
  if (frame) return;                         // rAF 节流：120Hz 鼠标每秒触发 120 次
  frame = requestAnimationFrame(function () {
    var r = card.getBoundingClientRect();
    var px = (e.clientX - r.left) / r.width - 0.5;
    var py = (e.clientY - r.top) / r.height - 0.5;
    inner.style.setProperty('--ry', (px * 7).toFixed(2) + 'deg');
    inner.style.setProperty('--rx', (-py * 7).toFixed(2) + 'deg');
    frame = null;
  });
});

.card__link {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s var(--ease);
}

<!-- 1. 字体：先建连，再用 print 技巧异步加载，不阻塞首屏渲染 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800;900&display=swap"
      media="print" onload="this.media='all'">

<!-- 2. 关键 CSS：同步加载。单文件且体积小，内联反而破坏缓存 -->
<link rel="stylesheet" href="/src/styles/cyber.css">

<!-- 3. 首屏 SVG 提高优先级 -->
<img src="/assets/holo-core.svg" width="560" height="560" fetchpriority="high">

<!-- 4. 首屏以下的图懒加载 -->
<img src="/assets/data-stream.svg" width="640" height="180" loading="lazy">

<!-- 5. JS 用 module（自带 defer），不阻塞解析 -->
<script type="module" src="/src/main.js"></script>

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .fx--scanlines,
  .hero__grid::before { animation: none; }
  .cursor-glow { display: none; }
  .boot { display: none; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}

var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

node -v    # v22.22.2
npm -v     # 10.9.7

# macOS / Linux
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
nvm install 22 && nvm use 22

# Windows（PowerShell）
winget install OpenJS.NodeJS.LTS

git clone <your-repo> cyberblog
cd cyberblog
npm install

npm install --registry=https://registry.npmmirror.com

npm run dev
# ➜ http://localhost:4321/

npm run build

vite v7.x building for production...
✓ 9 modules transformed.
dist/index.html                            18.4 kB
dist/posts/index.html                      12.1 kB
dist/posts/cyberpunk-blog-tutorial.html    41.3 kB
...
dist/assets/index-<hash>.css               38.9 kB │ gzip: 8.7 kB
dist/assets/index-<hash>.js                13.9 kB │ gzip: 4.8 kB
dist/assets/holo-core.svg                   6.6 kB
✓ built in ~400ms

npm run preview
# ➜ http://localhost:4321/ （serve 的是 dist/，和线上完全一致）

name: deploy
on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
        env:
          BASE: ${{ github.event.repository.name }}
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment: github-pages
    steps:
      - uses: actions/deploy-pages@v4

[build]
  command = "npm run build"
  publish = "dist"

[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

npm i -g vercel
vercel --prod
# Framework Preset: Other，Output Directory: dist，Build Command: npm run build

rsync -avz --delete dist/ user@server:/var/www/neon-edge/

server {
    listen 80;
    server_name blog.example.com;
    root /var/www/neon-edge;
    index index.html;

    location / {
        try_files $uri $uri/ $uri.html =404;
    }
    error_page 404 /404.html;

    # 带 hash 的资源可以永久缓存
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }
    # HTML 必须回源，否则更新后用户看不到新内容
    location ~* \.html$ {
        add_header Cache-Control "no-cache";
    }

    gzip on;
    gzip_types text/css application/javascript image/svg+xml application/xml;
}

cat > content/2026-10-20-my-post.md <<'EOF'
---
title: 文章标题
slug: my-post
date: 2026-10-20
tags: 随笔, 动效
summary: 出现在卡片上的一句话摘要。
---

正文用标准 Markdown 写。代码块用三个反引号包裹并标注语言，构建期会自动高亮。
EOF

npm run dev     # 本地看效果
git add . && git commit -m "post: my-post" && git push

<!-- 1. 普通图片：放 public/assets/，构建时原样拷贝 -->
<img src="/assets/screenshot.png" alt="描述" width="1200" height="630" loading="lazy">

<!-- 2. 动图：优先 SVG（SMIL）或视频 -->
<img src="/assets/loop.svg" alt="描述" width="640" height="360" loading="lazy">
<video src="/assets/loop.webm" width="640" height="360" autoplay muted loop playsinline></video>

<div class="bg-anime" aria-hidden="true">
  <img class="bg-anime__art" src="/assets/anime-bg.svg" alt="" width="1600" height="1000">
  <span class="bg-anime__veil"></span>
</div>

.bg-anime {
  position: fixed; inset: 0; z-index: 0;
  opacity: 0; visibility: hidden;
  pointer-events: none;                    /* 关键：不拦截滚动和点击 */
  transition: opacity .55s var(--ease), visibility .55s;
}
.bg-anime__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-anime__veil {                          /* 把动图压成浅底，保证文字对比度 */
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,250,252,.42) 46%, rgba(255,255,255,.64));
}
html[data-theme="anime"] .bg-anime { opacity: 1; visibility: visible; }
html[data-theme="anime"] #bg-canvas { opacity: 0; }   /* 粒子星网在亮色下会变脏，淡出 */

html[data-theme="anime"] {
  --text: #2c2f45;
  --text-dim: #4b4f68;
  --muted: #6d7190;
  --cyan: #0b93a8;      /* 霓虹青在浅底上会糊，需要压深 */
  --magenta: #d9366e;
  --panel: rgba(255, 255, 255, .76);
}

root.classList.add('is-theme-switching');
setTimeout(() => root.classList.remove('is-theme-switching'), 620);

html.is-theme-switching *,
html.is-theme-switching *::before,
html.is-theme-switching *::after {
  transition: background-color .55s var(--ease), color .55s var(--ease),
              border-color .55s var(--ease), opacity .55s var(--ease) !important;
}