手写个人主页：从零搭建聚合链接页的完整指南

这几年我越来越确信一件事在互联网上你不主动给自己建一个“家”就只能被动地散落在各个平台的主页里当“流浪人口”。这个“家”就是今天想聊的个人主页也就是大家常说的聚合链接页。它把分散在各处的社交账号、作品集、博客、开源仓库、联系方式全部收敛到唯一一个链接上别人点开这一页就能完整认识你。这篇东西不是讲纯概念而是从方案选型、信息架构、视觉设计到自己动手写页面、部署上线、接统计工具完整走一遍搭聚合链接页的流程。适合自媒体人、独立开发者、设计师、求职者以及任何一个想认真维护自己网络形象的人。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 langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title你的名字 | 个人主页/title meta namedescription content你的名字身份标签聚合展示社交平台与作品链接 meta propertyog:title content你的名字 | 个人主页 meta propertyog:description content你的名字身份标签聚合展示社交平台与作品链接 meta propertyog:type contentwebsite meta propertyog:url contenthttps://你的域名/ meta propertyog:image contenthttps://你的域名/assets/og-image.jpg link relicon hreffavicon.ico typeimage/x-icon link relstylesheet hrefstyle.css /head body main classcontainer header classprofile img classavatar srcassets/avatar.jpg alt你的名字的头像 h1你的名字/h1 p classtagline一句话介绍你是谁、做什么/p a classcta-button hrefmailto:youexample.com联系我/a /header section classlinks h2 classvisually-hidden核心链接/h2 a classlink-card hrefhttps://你的博客地址 span classlink-title博客/span span classlink-desc聊聊工程化、效率工具与独立开发/span /a a classlink-card hrefhttps://你的github地址 span classlink-titleGitHub/span span classlink-desc开源项目与代码实践/span /a a classlink-card hrefhttps://你的视频频道地址 span classlink-title视频频道/span span classlink-desc技术分享与产品拆解/span /a /section footer classsocials h2 classvisually-hidden社交账号/h2 a hrefhttps://weibo.com/你的id aria-label微博微博/a a hrefhttps://space.bilibili.com/你的id aria-labelB站B站/a a hrefhttps://twitter.com/你的id aria-labelTwitterTwitter/a a hrefhttps://www.instagram.com/你的id aria-labelInstagramInstagram/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 version1.0 encodingUTF-8? urlset xmlnshttp://www.sitemaps.org/schemas/sitemap/0.9 url lochttps://你的域名//loc lastmod2025-01-01/lastmod changefreqmonthly/changefreq priority1.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到自建静态页折腾过不少花样。最大的感受是一个自己掌控、自己维护的页面长期带来的价值远超那半小时的搭建成本。它不只是一个链接汇总的工具更是一个你审视自己“在网络上到底想被人如何认知”的镜子。最后再分享一个小技巧给聚合页设置一个固定的更新节奏比如每个季度花十分钟检查一遍所有链接是否有效、简介是否过时、核心作品是否需要更换。链接失效、内容过时的个人主页比没有主页更减分。页面虽小维护得当它会成为你网络身份中最稳定的一块基石。