这几年我越来越确信一件事：在互联网上，你不主动给自己建一个“家”，就只能被动地散落在各个平台的主页里，当“流浪人口”。这个“家”，就是今天想聊的个人主页，也就是大家常说的聚合链接页。它把分散在各处的社交账号、作品集、博客、开源仓库、联系方式全部收敛到唯一一个链接上，别人点开这一页，就能完整认识你。
这篇东西不是讲纯概念，而是从方案选型、信息架构、视觉设计，到自己动手写页面、部署上线、接统计工具，完整走一遍搭聚合链接页的流程。适合自媒体人、独立开发者、设计师、求职者，以及任何一个想认真维护自己网络形象的人。
1. 为什么要做聚合链接页：它解决的三个核心问题
1.1 数字名片：让“认识你”这件事变得高效
先抛一个场景。你是一个自由职业者，接私单需要对方快速了解你的水平；或者你是一个求职者，简历上只放一行网址就能让面试官看到过往项目；又或者你做了一个开源项目，希望别人通过一个入口找到你的仓库、博客和联系方式。
如果没有聚合链接页，会发生什么？对方需要依次打开你的公众号、B站、GitHub、即刻、小红书，逐个翻找，体验很差。更麻烦的是，如果你在各个平台用的名字不一样，对方根本不知道该去哪个平台找你。
聚合链接页本质上是一张数字名片。它把过去需要五分钟才能汇总的信息，压缩到一次点击里。这个价值在被介绍、被搜索、被合作方了解时体现得尤其明显——你把一个链接甩过去，对方没有任何寻找成本，对你的认知几秒钟内就能建立起来。
1.2 品牌沉淀：把流量和内容收进同一个口袋
另一个容易被忽略的价值是“印象管理”。你在公众号写技术长文，在小红书发生活碎片，在B站做视频，在即刻吐槽日常，这些内容调性各不相同。如果没有任何聚合，别人搜到你的某个账号，可能只看到片面的你。
聚合链接页则给了你一次“主动塑造形象”的机会。你可以决定首屏放什么简介、突出哪些作品、强调哪个身份标签。比如我自己的页面，首屏就一句话“写了十年代码，目前专注个人效率工具开发”，下面紧跟着GitHub和博客入口。别人一眼就知道我是谁、我擅长什么、我应该被怎样记住。
这一点在做个人品牌时特别重要。品牌本质上就是“被记住的方式”，而聚合链接页是你唯一能完全掌控的对外展示窗口，不受任何平台的算法和排版约束。
1.3 数据洞察：知道谁在看什么
还有一个大多数人没注意到的价值：数据。传统简历递出去就石沉大海，不知道对方看了没有、看了什么。聚合链接页接上统计工具之后，你能看到每次点击、每个链接的转化率、访客来源。
举个例子，我在页面里放了三个主要链接：博客、GitHub、关于页。统计数据显示，来自某个渠道的访客有60%点进了GitHub，而来自另一个平台的访客则更偏好博客。基于这些数据，我就能调整自己在不同渠道上的内容重点。这就像给主页装了一双眼睛，让它不再是单向输出，而是能反馈信息的入口。
2. 方案选型：SaaS、开源项目、手写静态页怎么选
2.1 一站式SaaS平台：适合“今天就要上线”的人
市面上现成的聚合链接服务不少，国际上有Linktree、Beacons、Carrd，国内也有Link3等。这类产品的核心卖点是“零门槛”：注册账号、选个模板、贴几条链接，几分钟就能得到一个看起来不错的页面。
我早期也用过这类服务，确实方便，尤其是免费版已经覆盖基础功能。但随着使用深入，你会碰到几件烦心事。
首先是自定义受限。模板虽多，但版式、字体、间距、互动效果都锁死了，你想做一个真正贴合个人气质的页面，几乎不可能。其次，链接是平台子域名，比如linktr.ee/你的名字，虽然能用，但在专业场合不太好看。我见过有人把所有社交平台都填了，唯独个人主页用的是别人域名，怎么看怎么别扭。
最关键的是，数据不在自己手里。平台的策略一变、功能一收，你的主页可能一夜之间就不是原来那个样子了，甚至平台本身都可能停止运营。对于只求“有个地方放链接”的轻度需求，SaaS没问题，但如果你想长期运营个人品牌，它的天花板很明显。
适合人群：急需上线、不打算花时间折腾、对页面定制化要求不高的人。
2.2 自部署导航项目：适合技术派和自托管爱好者
另外有一个容易混淆的方向——自部署导航页项目，比如Dashy、Flame、Homepage、Heimdall。这些开源工具做出来的页面长得很像聚合链接页，但定位完全不同。
它们主要用于内网导航，把你在家里服务器、工作电脑上的各种服务入口放到一个页面上，比如NAS、路由器后台、监控面板、常用工具，相当于一个“浏览器起始页”。部署在自己服务器上，数据完全自控，安全性和个性化都很强。
但如果你要拿它来做对外展示的个人名片，坦白说不太合适。这类项目强调的是“功能导航”而非“个人品牌表达”，页面结构千篇一律，也没法灵活地编排简介、作品集、社媒矩阵这些内容。
适合人群：有自建服务器、想搭建内网导航页的极客；但对个人聚合链接场景来说，这个方向不是最优解。
2.3 手写静态页：为什么我更推荐这个路线
我更推荐的做法是：手写一个纯静态页面，托管在GitHub Pages或者云存储上，绑定自己的域名。听起来有点技术门槛，实际上成本极低——不用服务器、不用后端、不用数据库，一个HTML文件加一个CSS文件就够了。
它最大的优势是“完全可控”。设计、布局、内容、链接，想怎么改就怎么改，没有平台规则的绑架。绑定自己的域名之后，这就是一个真正属于自己的“家”，长期价值远高于任何SaaS方案。而且静态页加载极快，SEO友好，搜索引擎收录后，别人搜索你的名字时就多了一个权威入口。
维护成本也没有想象中可怕。日常更新无非是改一条链接、更新一段简介，用编辑器改一下文件，推送到GitHub，一分钟后线上就更新了。写一次，用几年，这笔账怎么算都划算。
适合人群：愿意花半小时学习基础HTML/CSS、希望长期运营个人品牌的人。
| 维度 | SaaS平台 | 自部署导航项目 | 手写静态页 |
|---|---|---|---|
| 上线速度 | 最快，几分钟 | 较快，需部署环境 | 较快，首次需写代码 |
| 自定义程度 | 低 | 中 | 极高 |
| 数据归属 | 平台方 | 自己服务器 | 自己仓库 |
| 域名绑定 | 子域名为主 | 可绑定 | 可绑定 |
| 长期稳定性 | 受平台政策影响 | 受服务器运维影响 | 最稳定 |
| 适合场景 | 轻度展示 | 内网导航 | 个人品牌/名片 |
3. 信息架构与视觉设计：聚合页的核心细节
3.1 一页内的信息分区怎么排
页面虽小，但结构必须清晰。我总结的四区模型：首屏身份区、核心链接区、社媒矩阵区、补充信息区。
首屏身份区是第一眼印象，包含头像、昵称、身份标签、一句话简介，以及一个主行动按钮。头像建议用高清近照，让人有“面对面认识”的感觉，比用风景图或卡通图更建立信任。简介最好是具体而非抽象的话，比如“写代码十年，专注效率工具”比“热爱生活”这种千篇一律的表述有用得多。
核心链接区是页面的主体，放你最重要的几个内容入口。优先级依次是：作品集、博客、开源项目、视频课程等能代表你专业能力的内容。这里要注意，不要把所有链接都堆上去，你希望别人做什么就突出什么。链接一多，用户的选择成本就高，这时候什么都想展示等于什么都没展示。
社媒矩阵区放各平台账号入口，用图标展示即可，不需要过多文案。补充信息区则可以放合作邮箱、简历下载、赞助入口等低频次要内容。把四块区域排好，就是一个逻辑完整的聚合页。
3.2 视觉与交互：不打扰用户才是好设计
设计上我个人最看重两个原则：移动优先、克制至上。
移动优先是因为聚合页的访客大多在手机上点开，你在电脑上看效果不错的设计，在手机上可能一塌糊涂。所以设计时先做窄屏布局，再往宽屏适配。这里有个实操细节：字号不要小于14px，按钮点击区域不要小于44x44像素，否则手指操作体验会很差。
克制至上是说，颜色、字体、动效都要少而精。配色建议一到两个强调色加中性色，比如黑白灰打底，用蓝或绿做点缀。字体用系统字体栈就够了，不需要额外加载字体文件，加载额外字体会拖慢页面速度。动效的话，hover时轻微的阴影变化或颜色变化即可，不要搞各种旋转、弹跳特效，聚合页的核心目标是“快速找到链接”，不是“展示特效”。
还有一个小细节：每个链接的文字不能太短，比如“我的博客”就不太好，改成“博客：聊聊工程化与效率工具”会清晰得多。用户点之前就应该知道点进去会看到什么，不要让他做无谓的猜测。
3.3 SEO与分享优化：别让搜索引擎看不懂你的主页
聚合页不仅要给“已经认识你”的人看，还要给“正在搜索你”的人看，所以SEO和分享优化必须做。
基础meta信息要齐：title、description、keywords。title建议直接写“名字 | 个人主页”，description里自然地写清楚你是谁、页面提供什么。Open Graph协议也要加上，这样把链接分享到社交平台时，会自动抓取标题、描述和缩略图，链接的展示效果会好很多。og:image建议用1200x630像素的图，这是主流社交平台的分享卡片比例。
语义化HTML也别忽视。页面的名字用h1，导航用nav，主体内容用main，底部用footer。搜索引擎的爬虫对语义化标签的理解比对一堆div好得多，这也是SEO最基础的一环。
更进一步，可以加JSON-LD结构化数据，告诉搜索引擎你是一个“人”，并提供各平台账号的链接。这样搜索引擎有机会把你各个平台的账号关联到你的实体上，搜索结果里的信息卡片会更丰富。
4. 从零实现：手写聚合页的完整实操
4.1 准备素材与目录结构
动手之前先把素材备齐，避免写到一半停下来找图。素材清单：头像图、og分享缩略图、favicon小图标、各社媒平台的图标（可以用SVG格式，或者用Font Awesome、iconfont这类图标库）。
在本地建一个项目目录，结构如下：
my-link-page/ ├── index.html ├── style.css ├── favicon.ico └── assets/ ├── avatar.jpg └── og-image.jpgindex.html是页面主体，style.css是样式文件，assets目录放图片。后面所有文件我们都会推到GitHub仓库里。
4.2 HTML骨架与核心代码
直接给出一个经过实际使用的HTML骨架，代码里我留了占位符，你替换成自己的内容即可。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>你的名字 | 个人主页</title> <meta name="description" content="你的名字，身份标签，聚合展示社交平台与作品链接"> <meta property="og:title" content="你的名字 | 个人主页"> <meta property="og:description" content="你的名字，身份标签，聚合展示社交平台与作品链接"> <meta property="og:type" content="website"> <meta property="og:url" content="https://你的域名/"> <meta property="og:image" content="https://你的域名/assets/og-image.jpg"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="container"> <header class="profile"> <img class="avatar" src="assets/avatar.jpg" alt="你的名字的头像"> <h1>你的名字</h1> <p class="tagline">一句话介绍你是谁、做什么</p> <a class="cta-button" href="mailto:you@example.com">联系我</a> </header> <section class="links"> <h2 class="visually-hidden">核心链接</h2> <a class="link-card" href="https://你的博客地址"> <span class="link-title">博客</span> <span class="link-desc">聊聊工程化、效率工具与独立开发</span> </a> <a class="link-card" href="https://你的github地址"> <span class="link-title">GitHub</span> <span class="link-desc">开源项目与代码实践</span> </a> <a class="link-card" href="https://你的视频频道地址"> <span class="link-title">视频频道</span> <span class="link-desc">技术分享与产品拆解</span> </a> </section> <footer class="socials"> <h2 class="visually-hidden">社交账号</h2> <a href="https://weibo.com/你的id" aria-label="微博">微博</a> <a href="https://space.bilibili.com/你的id" aria-label="B站">B站</a> <a href="https://twitter.com/你的id" aria-label="Twitter">Twitter</a> <a href="https://www.instagram.com/你的id" aria-label="Instagram">Instagram</a> </footer> </main> </body> </html>几个细节说明：viewport meta必加，这是移动端适配的基础；ognog的url和image要是绝对路径，不能写相对路径；visually-hidden这个class的作用是让视觉隐藏但对屏幕阅读器可见，兼顾SEO和无障碍；每个链接的aria-label让屏幕阅读器能读出链接含义。
4.3 样式代码与响应式适配
CSS部分我给出一个简洁可用的版本，包含基础布局、卡片样式和移动端适配。
* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: #f7f7f9; color: #1a1a1e; line-height: 1.6; } .container { max-width: 640px; margin: 0 auto; padding: 40px 20px; } .profile { text-align: center; margin-bottom: 32px; } .avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .tagline { color: #555; font-size: 15px; margin: 8px 0 20px; } .cta-button { display: inline-block; background: #1a1a1e; color: #fff; padding: 10px 28px; border-radius: 999px; text-decoration: none; font-size: 14px; transition: opacity 0.2s; } .cta-button:hover { opacity: 0.8; } .link-card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; padding: 16px 20px; margin-bottom: 12px; text-decoration: none; color: #1a1a1e; border: 1px solid #e8e8ec; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .link-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); border-color: #1a1a1e; } .link-title { font-size: 16px; font-weight: 600; } .link-desc { font-size: 13px; color: #777; margin-top: 4px; } .socials { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; padding-top: 20px; border-top: 1px solid #e8e8ec; } .socials a { color: #555; text-decoration: none; font-size: 13px; padding: 6px 12px; border-radius: 8px; transition: background 0.2s; } .socials a:hover { background: #e8e8ec; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } @media (max-width: 480px) { .container { padding: 24px 16px; } .avatar { width: 80px; height: 80px; } .link-card { padding: 14px 16px; } }这里解释几个关键选择。box-sizing全局设成border-box，是为了让padding和width的计算方式统一，这也是目前主流做法，不会出现宽度溢出问题。max-width设为640px，保证在大屏上内容不会拉得太宽，阅读舒适。头像的object-fit: cover确保图片不变形，无论原图是什么比例都能裁切到合适的样子。
移动端适配用了一个简单的媒体查询，在480px以下把间距和头像尺寸缩小。这种简单页面其实不需要特别复杂的响应式方案，只要不要给元素写死固定宽度，用flex布局加百分比或者auto宽度，大多数情况自适应就够了。
4.4 部署上线与域名绑定
部署到GitHub Pages是零成本且稳定的方案。步骤分几步走。
在GitHub上新建一个仓库，仓库名推荐直接用“你的用户名.github.io”，比如我的用户名是zhangsan，仓库名就叫zhangsan.github.io。这个命名有一个好处：仓库会自动成为你的专属Pages站点，不需要额外设置分支相关的东西。
然后把你本地目录里的文件传到仓库。最简单的方式是用git命令，在本地目录执行：
git init git add . git commit -m "init: personal link page" git branch -M main git remote add origin https://github.com/你的用户名/你的仓库名.git git push -u origin main推送完成后，进入仓库的Settings -> Pages页面，在Source那里选择Deploy from a branch，然后把分支选成main，目录选成root，点击Save。等一两分钟，访问https://你的用户名.github.io就能看到页面了。
如果你有自己的域名，可以在Pages设置里的Custom domain一栏填上域名，并勾选Enforce HTTPS。同时要到你域名的DNS解析服务商那里添加一条解析记录。如果用的是子域名，比如链接页放在link.example.com，就添加一条CNAME记录：主机记录填link，记录值填你的用户名.github.io。如果用的是根域名，则添加A记录，指向GitHub Pages的四个IP地址185.199.108.153、185.199.109.153、185.199.110.153、185.199.111.153。
这里有一个实操教训：添加CNAME记录后，解析生效可能需要几分钟到几小时，不要刚配完就去访问，发现打不开就以为配置错了。等待期间可以先用nslookup命令检查一下DNS解析是否生效：
nslookup link.example.com如果返回的地址是GitHub Pages的IP，说明解析已经生效，刷新一下网页就能看到页面了。
4.5 数据统计：让每次点击都有迹可循
页面建好之后，强烈建议立刻接上统计工具。我推荐三种，按需选择。
百度统计是国内使用较多的轻量方案，接入方式是复制一段JavaScript代码贴在 标签前。在index.html底部加入：
<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?你的统计ID"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>如果你的访客偏国际化，Google Analytics 4是更主流的选择，接入代码类似，在head区域放gtag.js。对于注重隐私、想完全掌控数据的场景，可以考虑自托管Umami，它是开源项目，部署在自己的服务器上，数据完全不经过第三方。
无论用哪个工具，核心要看三个指标：点击量、来源渠道、链接转化率。聚合页本身的页面浏览量意义不大，真正有价值的是用户点了哪个链接、从哪里来的。比如我后来观察到，来自某技术社区的用户点GitHub的比例比公众号用户高很多，这说明不同渠道的用户画像差异很鲜明，对做渠道投放有不小的参考价值。
5. 常见问题与坑位实录
5.1 图片加载特别慢怎么办
图片是页面体积的大头，尤其是头像和og分享图如果直接用原始大图，会严重拖慢加载速度。我踩过这个坑：第一次部署时头像原图接近3MB，手机端打开转圈转了好几秒，体验极差。
解决的思路是压缩。头像图建议先压到100KB以内，og分享图压到200KB以内。工具方面，TinyPNG和Squoosh都很好用，Squoosh是Google出的开源工具，支持WebP格式，压缩率比JPEG好不少。另外给图片加上width和height属性，或者用CSS指定尺寸，可以避免页面布局抖动。
5.2 手机端显示错乱怎么排查
聚合页手机端错乱，九成原因是viewport没有设置，或者CSS里用了固定像素宽度。先检查head区域有没有这一行，没有的话加上。
其次排查有没有设置了固定宽度的元素，比如width: 600px这样的写法，在手机上必然溢出。正确做法是用max-width替代，让元素在窄屏时可以收缩。还有一个常见的坑是字体过大或过小，手机上最佳可读字号是15到17px，小于14px就偏小了，建议用浏览器的开发者工具切换到手机模拟模式逐项检查。
5.3 搜索引擎不收录个人主页
GitHub Pages的站点通常收录速度还行，但也可能遇到不收录的情况。先检查robots.txt有没有误拦，然后把站点提交到搜索引擎的站长工具，比如百度的搜索资源平台或Google的Search Console。
更实用的技巧是主动生成并提交sitemap.xml文件。把文件放到仓库根目录，内容格式很简单：
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://你的域名/</loc> <lastmod>2025-01-01</lastmod> <changefreq>monthly</changefreq> <priority>1.0</priority> </url> </urlset>在搜索引擎站长工具里提交sitemap地址后，一般几天内就会被爬取。另外，如果绑定的是全新域名，首次收录会慢一些，这是正常现象，持续更新页面内容、保持链接有效，收录只是时间问题。
5.4 统计代码不生效的排查思路
统计代码不生效，先确认代码是否放在正确的位置。百度统计和GA的代码一般推荐放在 之前，确保页面加载完成后执行。其次检查代码里有没有被广告拦截插件拦截，很多拦截插件会把统计脚本一并拦掉，你本机看不到数据不代表用户端没数据，可以换一个无拦截插件的环境测试。
还有一点容易被忽略：如果统计代码是改好后重新部署的，搜索引擎缓存和浏览器缓存会导致统计脚本没有及时更新。强制刷新页面或者用无痕模式再测一次，能排除缓存干扰。
5.5 自定义域名HTTPS证书异常
GitHub Pages免费提供HTTPS证书，但前提是关键DNS解析已经生效，并且你在Pages设置里填写了Custom domain并勾选了Enforce HTTPS。如果出现了证书错误，多半是因为解析还没生效或者配置顺序搞反了。
正确的顺序是：先添加DNS解析，再在Pages设置里填入自定义域名，然后等待DNS生效，最后启用Enforce HTTPS。如果做完这些步骤后证书还没下发，可以先把Custom domain里的域名删掉，保存后再重新填入，强制触发一次重新申请流程。等待时间通常不超过15分钟。
5.6 链接数量太多，页面冗长怎么办
聚合页最大的坑之一，就是什么都想放上去，结果页面长得像购物清单。我的个人标准是：核心链接控制在3到5个，社媒账号控制在5到7个。超过这个数，用户会陷入选择困难，最后可能什么都不点。
如果内容确实很多，可以分层处理。比如把所有博客文章放一个链接，指向博客首页，而不必每篇文章单独放一条链接；把所有视频制作成一个合集链接，而不是单独展示每一期。聚合页的价值在于收敛，不在于齐活，学会做减法，这个页面才会越来越好用。
最后分享一点我的实际体会
搭这个聚合页前后也换过不少方案，从Linktree到自建静态页，折腾过不少花样。最大的感受是：一个自己掌控、自己维护的页面，长期带来的价值远超那半小时的搭建成本。它不只是一个链接汇总的工具，更是一个你审视自己“在网络上到底想被人如何认知”的镜子。
最后再分享一个小技巧：给聚合页设置一个固定的更新节奏，比如每个季度花十分钟检查一遍所有链接是否有效、简介是否过时、核心作品是否需要更换。链接失效、内容过时的个人主页，比没有主页更减分。页面虽小，维护得当，它会成为你网络身份中最稳定的一块基石。
