好看的个人网站源码

去年冬天我帮朋友改一个摄影作品集网站，人网打开源码那一刻就愣住了——满屏的站源div嵌套，CSS里到处是人网!important，JS文件压缩后还有800KB。站源问他为什么选这套模板，人网他说“好看啊”。站源好看是人网好看，但打开速度慢到我想砸键盘。站源

好看的人网个人网站源码，第一条标准不是站源视觉惊艳，是人网打开速度控制在1.5秒以内。我自己的站源站点用的是纯静态HTML加一点点vanilla JS，首页总大小不到90KB。人网怎么做到的站源？图片全部WebP格式，字体只加载一个weight，人网CSS内联在head里，JS用defer属性扔到最后。没有框架，没有打包工具，没有node_modules。改一个字的颜色，打开文件直接改，刷新浏览器就能看到。这种“丑”的开发方式，跑出来的效果比很多花哨模板都顺滑。

有人会说，那用Tailwind或者Bootstrap不就完了。可以，但你要清楚自己在付什么代价。Tailwind的CDN版本压缩后大概300KB，Bootstrap的CSS加JS接近500KB。如果你的网站只有三五个页面，这点体积不算什么。但如果你像我一样喜欢在页面上放点交互——比如鼠标悬停时卡片微微上浮、滚动到某个位置导航栏变色——那点额外的CSS和JS就会开始打架。我试过用Tailwind重写自己的主页，最后产出的文件比手写CSS大了四倍，而视觉上几乎看不出区别。

真正让我觉得“好看”的源码，往往带着作者的个人痕迹。举个例子，我收藏过一个日本设计师的站点，源码里有一段注释写着“这里用负margin是因为我懒得算padding”。这种细节在模板里永远看不到。还有一次我在GitHub上翻到一个极简博客的源码，作者用CSS的mix-blend-mode给标题做了个随背景色变化的叠加效果，代码只有六行。你把它复制到自己的项目里，改两个变量就能用。这种“可拆解的美”比整套模板有价值得多。

说到具体案例，推荐看看bearblog和motherfuckingwebsite这两个项目的源码。前者是一个极简博客平台，整个CSS文件不到2KB，但排版干净到让人想哭。后者更极端，直接告诉你“你的网站不需要那么复杂”，源码里连<div>都很少用，全靠语义化标签和浏览器默认样式。我第一次看的时候觉得太简陋，后来自己写多了才发现，能把<article>和<section>用对的人，根本不需要堆div。

如果你现在想找一个好看的个人网站源码来改，我的建议是：去GitHub搜“personal-website”，按stars排序，然后跳过前二十个。那些太流行了，改出来一眼就能看出是哪个模板。翻到第三四十页，找那种只有几十个star、最近半年还有commit的项目。下载下来，先把所有JS删掉，看看页面还能不能看。如果能，说明底子干净。然后把CSS里的颜色变量全部换成你自己的，字体换成系统默认的-apple-system和Segoe UI。最后把图片压缩到宽高不超过实际显示尺寸的两倍。做完这三步，你手上就是一个好看且属于你自己的网站源码了。

别追求一步到位。我的主页改了十七版，现在用的还是三年前那套手写CSS，只是每年换一次配色。源码这东西，好看的前提是你敢改、改得动、改完不崩。那些看起来惊艳的模板，往往是你改到第三行就放弃的陷阱。