纯HTML个人主页实战：从零搭建到免费部署完全指南

1. 为什么我坚持用纯HTML做社交个人主页

1.1 平台主页与自建主页的取舍

先说个普遍现象：很多人想做个人主页，第一反应是去各大社交平台注册账号，或者用现成的建站工具拖拽几下生成个页面。平台主页确实省事，但问题也很明显——你的页面长得跟别人没什么区别，个人信息被平台规则限制，广告和推荐内容时不时冒出来抢视线，最关键的是你永远无法真正掌控这个页面的样式和交互。稍微有点追求的开发者、设计师、自由职业者，最后基本都会走到"自己搞一套"这条路。

但自己搞也有两派：一派直接上React、Vue、Next.js，技术栈拉满；另一派就是我今天分享的这条路线——用一份纯HTML源码，不加任何框架依赖，也能做出一个效果完整的社交个人主页。我为什么坚持后者？原因有三。

第一，纯HTML源码几乎没有学习成本。你不需要配置Node环境，不需要跑npm install，不需要理解构建链路的任何概念。你把文件下载下来，双击index.html就能看到页面效果。对于只是想拥有一个好看的、可自定义的个人主页的人来说，这是最友好的方式。第二，加载速度快。没有框架运行时，没有几百KB的JS依赖，首屏就是几个静态文件，CDN一挂，响应速度可以做到非常夸张。第三，部署成本低到几乎为零。后面我会详细讲，你可以免费把它挂到任意静态托管平台上，一个命令甚至一次网页上传就完成上线。

当然，我并不否认框架方案的合理性。如果你打算长期运营一个包含复杂交互的大中型站点，上框架是必须的。但社交个人主页这个场景，内容和模块相对固定，纯HTML配合少量JavaScript就完全够用，反而能让你把精力花在内容和视觉本身，而不是陷入工程化的泥潭。

1.2 这套源码解决的核心问题

我开源的这套社交个人主页HTML源码，目标只有一个：让你用最低的门槛，拥有一个属于自己的、可随意改装的社交名片页。它不是什么重量级CMS，也不是博客系统，而是一张"数字名片"加上一个"轻量作品陈列馆"。

具体来说，它解决这几个痛点。第一个痛点是"社交账号太分散"——你的微信号、微博、公众号、知乎、B站、GitHub散落各处，每次让别人关注你都像在背诵一串地址。这套源码提供了一个集中入口，把所有社交入口以图标形式汇聚在一个页面上，访客一眼就能看到所有渠道。第二个痛点是"个人品牌展示没有阵地"——个人简介、代表作品、职业经历、项目链接，这些内容散落在简历里、社交平台的主页上，不够系统。这个页面把所有信息组织成清晰的信息架构，头像、个人简介、作品卡片、时间线，按逻辑排列，访客可以很快get到你是谁、你做过什么、怎么联系你。

第三个痛点是"想自定义但又不想从零写"——很多非前端背景的人，给个体统源码也头疼。我的处理方式是，把数据跟视图分离。你不需要读懂每一行CSS，只需要修改一个data.js文件里的配置项，就能更新头像、昵称、社交链接、作品列表、时间线内容。这相当于给源码装了一个"可视化"的数据层，但又没有引入任何后台系统。这个设计思路，我会在第4节详细展开。

1.3 适合谁来用

根据我发出去之后的反馈，这套源码的适用人群，比我想象中广得多。第一种是开发者和设计师，想给自己做一个技术品牌主页，把GitHub、掘金、个人博客、开源项目汇总展示。第二种是自由职业者、摄影师、独立开发者，需要一个轻量的作品集页面来承接客户咨询，放上作品案例和联系方式。第三种是内容创作者，比如B站UP主、小红书博主、公众号作者，想做一个粉丝落地页，把所有平台入口和自己的代表作品集中在一起。第四种是前端初学者，刚学完HTML/CSS/JavaScript基础，正好用这套源码当实战练习——读代码、改参数、部署上线，整套流程走下来，对前端工程的理解会比看一百篇教程都深刻。

不管你是哪一种，接下来我讲的目录结构、核心代码逻辑、部署路径和改造避坑，应该都能让你少走一些弯路。

2. 源码目录与页面骨架：拿到代码后先看什么

2.1 目录结构拆解

你下载源码后，先别急着双击打开，花两分钟把目录结构过一遍。整个项目文件很少，逻辑非常清晰：

text复制social-profile/
├── index.html              # 页面唯一入口，所有模块的容器
├── css/
│   ├── style.css           # 核心样式：布局、主题、组件
│   └── responsive.css      # 响应式样式：移动端适配
├── js/
│   ├── data.js             # 全局配置数据：个人信息、社交链接、作品、时间线
│   └── main.js             # 渲染逻辑：把data.js里的数据渲染到页面
├── assets/
│   ├── avatar.jpg          # 头像图片，你自己替换
│   ├── cover.jpg           # 封面背景图
│   └── projects/           # 作品集展示用到的截图或素材
└── README.md               # 使用说明和配置指南

你可以看到，我把CSS拆成了两个文件。style.css管的是"这个页面长什么样"，responsive.css专门管"在什么屏幕宽度下怎么变"。为什么要拆？因为响应式相关的媒体查询代码特别容易越写越乱，单独拆出来之后，主样式文件保持干净，改动时互不干扰。你要是不喜欢这个拆分，完全可以合并回去，不影响任何功能。

JS拆成data.js和main.js是我整个设计里最重要的一步。data.js里存的是"内容"，main.js里存的是"逻辑"。这个分离方式是从数据驱动的思路借鉴来的，哪怕你完全不懂后端，也能明白：改页面上的字、换链接、增删作品，只需要碰data.js；除非你想改版式、动交互，否则main.js和HTML文件基本不用动。

2.2