人人都该有一个自己的网页：从零搭建、免费上线（保姆级教程）

人人都该有一个自己的网页从零搭建、免费上线保姆级教程花一个下午做一个属于自己、能用很多年的个人网页。不用买服务器不用懂前端基础流程一分钱不花。先看个成品https://yurutu.gitlab.io/——我自己就是用本文这套方案搭的源码链接在第十部分。一、先说清楚个人网页到底有什么用很多人觉得我有朋友圈、有知乎、有小红书还要自己的网页干嘛其实它们解决的是完全不同的问题。社交平台的内容属于平台账号可能被封、链接会失效、搜索被算法屏蔽而你自己的网页域名和内容都攥在手里。一个个人网页至少能当这些用数字名片求职、社交、加微信前先甩个链接别人一页看完你是谁、做过什么。比简历 PDF 体面太多。作品集设计师放作品、程序员放项目、写作者放文章、学生放竞赛和科研经历。投简历时附上网页链接对方点开就能看全。长期笔记把散在备忘录、聊天记录里的想法整理成能检索、能分享的文章。技术博客面试、保研、申博时一个持续更新的博客很能加分。个人门户一个页面把你的 GitHub、B站、公众号入口都收进来。一句话总结社交平台是租来的门面个人网页是自己的房产证。二、为什么选静态网站而不是买服务器搭建个人网页主要有三条路方案成本维护适合谁自建服务器 WordPress服务器一年几百元要管安全、备份、宕机有运维精力、需动态功能建站平台Wix/凡科等免费功能受限去广告要付费极低但数据在别人手里只想拖拽、不留恋自由静态网站 免费托管免费构建额度够用几乎为零绝大多数人推荐本文走的是第三条路用 Hexo 生成静态网页托管到 GitLab Pages。它的好处是不用买服务器、不用备案、自动 HTTPS内容全是本地 Markdown 文件哪天想换平台把源码推到别处就能重建写完文章git push一下就算发布剩下的全自动。GitHub Pages 也是同类方案流程几乎一致。本文以 GitLab 为例免费版就能把私有仓库发布成公开网页核心命令两边通用。三、整体原理它是怎么跑起来的不用怕看懂这张图你就赢了一半本地写 Markdown ──git push──▶ 云端自动构建 ──▶ 访客用浏览器访问 (你的电脑) (生成静态网页) (https://你的用户名.gitlab.io)三个角色各司其职Hexo把你写的 Markdown 文章编译成一堆能直接打开的网页文件。GitLab CI每次你推送代码它自动帮你重新构建。GitLab Pages把构建好的网页挂到公网提供访问地址。你唯一要做的就是写文章 推送。四、动手前准备三个东西依赖要求检查命令去哪弄GitLab 账号免费注册—gitlab.comNode.js≥ 20.19装 LTS 版node -vnodejs.org 下载安装勾选 Add to PATHGit较新版本git --versiongit-scm.com装好 Node.js 后再全局安装 Hexo 命令行工具npm install-g hexo-cli小技巧npm 下载慢可切国内镜像npm config set registry https://registry.npmmirror.com五、正式开干五步上线第 1 步本地初始化站点找一个空文件夹打开终端PowerShell / Terminal执行hexo init my-blog# 初始化一个博客站点cd my-blog npm install# 安装依赖hexo server# 本地预览浏览器打开http://localhost:4000你已经能看到一个默认网页了。别急接下来把它变成你的。第 2 步改成你自己的信息打开站点根目录的_config.yml把站点标题、作者、简介换成你的title:张三的个人主页author:张三description:记录技术与生活language:zh-CN第 3 步在 GitLab 建一个项目登录 GitLab点New project → Create blank project项目名填你的用户名.gitlab.io这一步很关键决定了你的网址也是踩坑重灾区见下方提示可见性选Private即可仓库私有但网站照样公开访问千万不要勾选“Initialize repository with a README”。⚠️最容易踩的坑网页能打开但样式全丢、排版乱成裸 HTML原因是 Hexo 配置里的url/root和实际网址不匹配。只要项目名按你的用户名.gitlab.io命名_config.yml里保持url:https://你的用户名.gitlab.ioroot:/就不会有问题。第 4 步把代码推上去先配置身份认证推荐 SSH配一次以后免密ssh-keygen-t ed25519-C你的邮箱Get-Content~\.ssh\id_ed25519.pub# 复制输出内容到 GitLab 头像 →Edit profile → SSH Keys粘贴公钥保存。然后关联远程仓库并推送cd my-blog git init git add.git commit-m初始化个人网页git remote add origin gitgitlab.com:你的用户名/你的用户名.gitlab.io.git git push-u origin main第 5 步等它自动上线推送后GitLab 会自动跑一个构建流水线项目左侧菜单Build → Pipelines能看到一个pages作业在跑约 1~2 分钟流水线跑完pages和pages:deploy两个作业都变绿后去Deploy → Pages就能看到你的网址点开——你的个人网页正式上线了。之后每次推送都会自动重新发布。GitLab 免费版每月有 400 分钟构建额度每次构建约 1~2 分钟个人站绰绰有余。六、日常怎么写、怎么发记住这两条命令就够你用了# 新建一篇文章去 source/_posts/ 里编辑生成的 md 文件hexo new post我的第一篇文章# 写完预览满意后推送即发布git add.git commit-m发布我的第一篇文章git push一个重要习惯每篇文章开头front-matter一定要写明确的date。否则云端构建时会用文件检出时间导致文章日期乱跳、链接变化、外链失效。图片放到source/images/文章里用/images/xxx.jpg引用即可。七、想更好看换个主题默认的 landscape 主题偏朴素。想花哨一点几分钟就能换# 以中文文档很完善的 Butterfly 主题为例npm install hexo-theme-butterfly然后在_config.yml里把theme: landscape改成theme: butterfly。想调样式在根目录建一个_config.butterfly.yml写主题配置就行。热门主题Butterfly中文文档全功能丰富NexT经典简洁更多https://hexo.io/themes/八、进阶玩法可选绑定自己的域名买个域名在 GitLab 的 Settings → Pages 里添加按提示加几条 DNS 记录之后自动获得免费的 HTTPS 证书。加速构建CI 里加 npm 缓存构建时间能从一两分钟缩到几十秒。切换平台同一套源码推到 GitHub用 GitHub Pages 也完全能跑方法几乎一样。九、常见问题速查现象原因解决页面能开但样式全丢url/root与项目名不匹配按第五部分第 3 步核对url和root推送要密码/认证失败未配 SSH 或令牌过期用 SSH 密钥或 HTTPS 填 PAT 令牌部署成功却 404CDN 缓存 / 分支不对等 1~2 分钟再刷新确认pages:deploy也成功、推的是main文章日期莫名变化front-matter 没写 date每篇都写明确的日期十、想抄作业看我的源码文中每一步我都自己跑过代码和成品都在这站点效果https://yurutu.gitlab.io/完整源码https://gitlab.com/YuruTu/yurutu.gitlab.io初学重点抄三个地方_config.ymlurl、root、永久链接怎么配照着写就不会踩“样式全丢”的坑就是第五部分第 3 步那个坑.gitlab-ci.yml自动部署的全部配置长这样——真就这么几行# GitLab Pages 自动部署配置# 作用推送到默认分支main时GitLab CI 自动构建站点并发布到 Pagesimage:node:22pages:script:-npm ci-npx hexo generateartifacts:paths:-publicrules:-if:$CI_COMMIT_BRANCH $CI_DEFAULT_BRANCH文章开头的 front-matter比如我首页那篇《关于我》开头就这几行title 和 date 必写date 为什么重要见第六部分---title:关于我date:2026-09-26 10:00:00---站点上的「关于我」「作品」两个页面对应source/下的两份 Markdown想做同款页面照着改就行。写在最后回头看整个流程只做了几件事装工具 → 初始化 → 改配置 → 推代码 → 等上线。不用服务器、不花钱你就有了一个完全属于自己、可以一直更新下去的网页。它不会替你表达但给了你一个不被平台限流、不随账号消失、随时能整体搬走的家。内容随时可能消失的年代这大概就是个人网页最大的意义。动手吧一个下午就够。觉得有用的话转发给那个一直想做个人网站却总说没时间的朋友。