三年前写过一篇《如何自定义Github个人主页？》，当时只是开了个头。最近把自己的主页从零折腾了一遍：先做了个”火力全开”的炫酷版，又亲手全删掉回归极简。这篇文章记录整个过程、用到的工具，以及第三方服务的坑。

起点

改造前的主页大概是这样：两张统计卡片、一段自我介绍、六个纯文字徽章。能用，但访客 10 秒内看不到”你做过什么”，也没有任何记忆点。

于是决定先放开手脚做加法。

第一阶段：火力全开的炫酷版

1. 渐变波浪头图

用 capsule-render 生成，一行 URL 就能出图，支持渐变色、动画、文字：

<img src="https://capsule-render.vercel.app/api?type=waving&color=0:8b5cf6,50:3b82f6,100:06b6d4&height=220&section=header&text=Hello, I'm Yiyi L&fontSize=42&animation=fadeIn" />

section=header / section=footer 分别生成顶部和底部波浪，首尾呼应。

2. 打字机动画

readme-typing-svg 可以让一行字循环打字：

<img src="https://readme-typing-svg.demolab.com?font=Fira+Code&size=22&pause=1000&center=true&vCenter=true&width=650&lines=Building+with+Python;Exploring+LLM+%2F+RAG;Always+shipping" />

lines 里的每一行会轮播，+ 是空格的转义。

3. 深浅色自适应：<picture> 标签

这是整个改造里最值得学的技巧。统计卡片这种图，在深色模式下会出现一个刺眼的白块。用 HTML 的 <picture> 可以让 GitHub 根据访问者的主题切换图片：

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="...theme=github_dark..." />
  <img src="...theme=default..." alt="github stats" />
</picture>

注意 GitHub 的 Markdown 渲染是白名单制的，<picture>、<source> 在白名单里，可以用。

4. 技能图标墙

skillicons.dev 一行 URL 生成带 logo 的图标，比 shields.io 的纯文字徽章好看一个档次：

<img src="https://skillicons.dev/icons?i=python,django,fastapi,java,spring,git,github,linux" />

5. 贪吃蛇吃贡献格子 🐍

出圈效果担当。Platane/snk 通过 GitHub Action 定时读取你的贡献格子，生成一条贪吃蛇把格子吃掉的动画 SVG，再推到仓库的 output 分支：

name: Generate Snake
on:
  schedule:
    - cron: "0 0 * * *"   # 每天一次
  workflow_dispatch:       # 支持手动触发
  push:
    branches: [main]
permissions:
  contents: write
jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: Platane/snk@v3
        with:
          github_user_name: 611de
          outputs: |
            dist/github-snake.svg
            dist/github-snake-dark.svg?palette=github-dark
      - uses: crazy-max/ghaction-github-pages@v4
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: $

README 里从 output 分支引用（同样配 <picture> 做深浅适配）：

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/你的用户名/你的用户名/output/github-snake-dark.svg" />
  <img src="https://raw.githubusercontent.com/你的用户名/你的用户名/output/github-snake.svg" />
</picture>

推上去之后 Action 会自动跑一次，十几秒就能看到效果。

6. 3D 立体贡献城市 🌌

yoshi389111/github-profile-3d-contrib 把一年的贡献格子渲染成一座 3D 城市，柱子越高提交越多。也是 Action 驱动，一次会生成十来种配色变体（profile-green-animate.svg、profile-night-rainbow.svg 等），直接提交到仓库里，本地引用即可。

7. 独家定制：赛博朋克”代码雨”

贪吃蛇和 3D 图人人都有，想要独家感就得自己动手。我用 Python 写了个脚本生成动画 SVG：28 列日文假名 + 代码符号混着往下掉，紫/蓝/青/绿霓虹配色，SMIL 动画（SVG 自带的 <animateTransform>），GitHub 的图片白名单同样放行。生成的 SVG 直接提交进仓库，不依赖任何第三方服务。

踩坑实录：第三方服务说挂就挂

炫酷版上线当天我就发现，官方服务倒了一片。curl 一测便知：

服务 状态 原因
github-profile-trophy（奖杯墙） 402 实例欠费停摆，DEPLOYMENT_DISABLED
github-readme-stats（官方实例） 503 DEPLOYMENT_PAUSED，实例被暂停
capsule-render / typing-svg / streak 200 正常

原因是这类服务都是别人部署在 Vercel 免费额度上的实例，带宽用超了就停，说挂就挂。解决办法是找社区镜像，比如 github-readme-stats-sigma-five.vercel.app 是同一份开源代码的他人部署，功能一样。

这一步就埋下了后面极简化的伏笔：主页上每一个外部 URL，都是一个别人随时可能关掉的灯。

第二阶段：全部删掉，回归极简

炫酷版刷了一天，冷静下来想了想：

  1. 动效太多了——打字机、代码雨、贪吃蛇、3D 城市同时动，页面像游乐场，反而没有重点；
  2. 信息密度反而低了——四层动图把真正想说的内容挤到了后面；
  3. 维护成本高——两个 workflow、十几个生成文件、五六个外部服务，每一个都是挂点。

于是做减法，判断标准很简单：静态的留下，会动的删掉；仓库里能自持的留下，依赖别人实例的换成最稳的。

最终版只剩三块：

  • 自我介绍：一句英文 + 一句中文 + 四行列表，10 秒讲清楚”我是谁、在做什么、怎么找我”
  • 技术栈：一行 skillicons 图标
  • GitHub Stats：统计 + 语言两张卡，用 <picture> 做深浅色自适应

删掉的东西里，唯一有点舍不得的是贪吃蛇——但删掉之后，页面清爽得像刚洗过的白衬衫。

复盘：如果重来一次

  1. 先想清楚主页给谁看。给 recruiter 看，内容>特效；给自己爽，那随意，折腾本身就是乐趣。
  2. <picture> 深浅色自适应是必学的，无论什么风格都用得上。
  3. 外部服务先用 curl 测一遍再上，402/503 当天就能发现，别等访客告诉你图挂了。
  4. 最可靠的组件是”生成后提交进仓库”的（贪吃蛇、3D 图、自绘 SVG），它们不依赖任何第三方实例的存活。
  5. 加法易、减法难。炫酷版的价值在于把工具链都摸了一遍，知道每个效果是什么样、代价是什么，之后的选择才是主动选择。

现在的极简版也许过阵子又会被我加回点什么，到时候再写一篇 😄