GitHub README 不是简介是店面：5 条主页设计规则
原文：https://dev.to/akhourianmolkumar/your-github-readme-isnt-a-profile-its-a-storefront-here-are-the-5-rules-i-used-57jm（作者 @akhourianmolkumar）
我不再装饰我的 GitHub 个人主页，而是把它当成产品页来发布：四个应用，四个下载按钮，零小组件。
我不再把自己的 GitHub 个人主页当成简历来经营，而是把它变成了一个产品页。现在，陌生访客点进主页，还没读完我的名字，就已经能下载到我四个应用中的某一个。
实际效果：github.com/Akhouri-Anmol-Kumar
致谢：推动我把主页从"堆徽章"更进一步的想法，来自 Giorgi Kobaidze 那篇用贡献数据造出一座城市的赛博朋克控制台主页，推荐去读一读。
所有"炫酷主页"的通病
随手打开十个热门的个人主页 README，你会看到同样的东西：
- 一整墙的徽章
- 一张展示 commit 数量的统计卡片
- 一行"嗨，我是某某"的开场白
- 一条正在吃掉你贡献图的贪吃蛇
它们都是装饰品，没有一个回答得了每位访客在头三秒里都有的那个问题：
"我现在就能从这个人这里得到什么？"
我做的是桌面应用：ATLOCK、APIC、ANOTE 和 ACALCU。于是我换了个问题问自己：
如果我的 README 像应用商店的商品页那样工作，会怎样？
店面式 README 的 5 条规则
规则一：3 秒下载测试
如果访客落地后 3 秒内还下载不到你最好的作品，这个页面就是失败的。
所以我的每个应用都有一张自己的卡片，每张卡片正下方就是一个下载按钮，直接指向真实的 .zip 发布包。没有"去 releases 页面看看"，也不用四处翻找。
<td align="center">
<a href="https://github.com/USER/APP">
<img src="assets/app_card.svg" width="408" alt="APP">
</a><br>
<a href="https://github.com/USER/APP/releases/download/TAG/APP.zip">
<img src="https://img.shields.io/badge/⬇%20DOWNLOAD%20APP-B8935F?style=for-the-badge&labelColor=8a6c3f&logo=windows&logoColor=white" height="38">
</a>
</td>
卡片在上，动作在下。和应用商店的商品页是同一个套路。
规则二：选定一种主色，绝不离开
我的主色是金色：亮部用 #B8935F，暗部用 #8a6c3f。
环形灯 logo、各节标题、按钮、卡片描边，全部用这套颜色。正因为每个元素共用同一套配色，整个页面看起来是"设计出来的"，而不是"拼凑出来的"。
徽章显得廉价，正是因为它们把所有颜色同时都用上了。
规则三：所有图片统一宽度
我主页上每一张通栏图片都是 830px 宽。这就是我全部的布局系统。
没有任何一张图比旁边的略宽或略窄，于是整页读起来是整齐的一列，而不是一堆零散的小组件。应用卡片是 408px——正好是在 830 里放下两张卡片外加一个间距。
如果这篇文章你只打算照搬一条规则，就照搬这条。
规则四：像路径一样给栏目命名
我的标题不叫"关于我"和"项目"，而是：
~/links ~/apps ~/status ~/stack
这几乎零成本，却能在半秒之内告诉同行：页面背后这个人常驻终端。它同时让页面更好扫读，因为每个标题长得一样、位置也一致。
规则五：把宣言做成设计元素，而不是一段文字
我在页面正中央放了一条横幅：
零遥测。零云端。零订阅。零广告。
它不是一句个人简介，而是整套产品理念，被做成了一张通栏图片。页面收尾也只有一句话：
你的机器。你的数据。你的掌控。
访客记不住要点列表，但记得住一句能跟着复述的话。
"零小组件"的决定
我下过一个硬决心：页面上所有视觉素材都存放在我自己的仓库里。
没有架在别人服务器上的统计卡片，没有免费服务一打盹就变白的连续打卡计数器，没有第三方一改 URL 就凭空消失的图片。
我的卡片、标题、头图和页脚全是 /assets 目录下的 SVG，唯一来自外部的东西是那个下载徽章。（哪天连它也要去掉，我换成自己的 SVG 就是了。）
两个值得在意的细节：
- 图片全部使用 `raw.githubusercontent.com` 的绝对链接，这样 README 即使被复制、被镜像或放到别处预览，也照样能正常渲染。
- 所有图片都写了替代文本（alt text），宣言横幅也不例外，读屏用户和图片加载失败的用户同样能获取完整内容。
整体结构一览
[ ring-light logo ] [ hero: whoami ] [ ~/links → Website · Blog · LinkedIn · Peerlist · Instagram ] [ ~/apps → 2×2 grid of cards, each with a DOWNLOAD button ] [ ~/status → ZERO telemetry banner ] [ ~/stack → tech stack ] [ footer → "Your machine. Your data. Your control." ]
一共只有六个区块，每个应用只留一个动作入口。页面上没有任何东西是为了凑空间而存在的。
最后留一个挑战。你的个人主页只有一个核心任务。找到它，然后把这个任务做成一个按钮。
- 卖应用？给每个应用下面都放一个下载按钮。
- 写文章？把你最好的三篇做成卡片。
- 写库？把
npm i your-lib直接放在头图位置。
然后把你的链接丢进评论区，告诉我你的页面围绕哪一个核心动作来设计。每一条我都会读。
别再装饰你的个人主页了，开始把它当产品发布吧。
原文：https://dev.to/akhourianmolkumar/your-github-readme-isnt-a-profile-its-a-storefront-here-are-the-5-rules-i-used-57jm（作者 @akhourianmolkumar）
===REBUTT===
意见成立，已执行：删去正文首行的「素材来源=…；标题去空格=28字符」流程元数据行，信源行现为正文第一行，其余内容未改动。无申诉内容。