企业官网建设流程全解析

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

花一个下午，做一个属于自己、能用很多年的个人网页。不用买服务器，不用懂前端，基础流程一分钱不花。
先看个成品：https://yurutu.gitlab.io/——我自己就是用本文这套方案搭的，源码链接在第十部分。

一、先说清楚：个人网页到底有什么用？

很多人觉得"我有朋友圈、有知乎、有小红书，还要自己的网页干嘛？"

其实它们解决的是完全不同的问题。社交平台的内容属于平台，账号可能被封、链接会失效、搜索被算法屏蔽；而你自己的网页，域名和内容都攥在手里。

一个个人网页，至少能当这些用：

• 数字名片：求职、社交、加微信前先甩个链接，别人一页看完你是谁、做过什么。比简历 PDF 体面太多。
• 作品集：设计师放作品、程序员放项目、写作者放文章、学生放竞赛和科研经历。投简历时附上网页链接，对方点开就能看全。
• 长期笔记：把散在备忘录、聊天记录里的想法，整理成能检索、能分享的文章。
• 技术博客：面试、保研、申博时，一个持续更新的博客很能加分。
• 个人门户：一个页面，把你的 GitHub、B站、公众号入口都收进来。

一句话总结：社交平台是"租来的门面"，个人网页是"自己的房产证"。

二、为什么选静态网站，而不是买服务器？

搭建个人网页主要有三条路：

本文走的是第三条路：用 Hexo 生成静态网页，托管到 GitLab Pages。

它的好处是：

• 不用买服务器、不用备案、自动 HTTPS；
• 内容全是本地 Markdown 文件，哪天想换平台，把源码推到别处就能重建；
• 写完文章git push一下就算发布，剩下的全自动。

GitHub Pages 也是同类方案，流程几乎一致。本文以 GitLab 为例：免费版就能把私有仓库发布成公开网页，核心命令两边通用。

三、整体原理：它是怎么跑起来的

不用怕，看懂这张图你就赢了一半：

本地写 Markdown ──git push──▶ 云端自动构建 ──▶ 访客用浏览器访问 (你的电脑) (生成静态网页) (https://你的用户名.gitlab.io)

三个角色各司其职：

1. Hexo：把你写的 Markdown 文章，编译成一堆能直接打开的网页文件。
2. GitLab CI：每次你推送代码，它自动帮你重新构建。
3. GitLab Pages：把构建好的网页挂到公网，提供访问地址。

你唯一要做的，就是写文章 + 推送。

四、动手前：准备三个东西

装好 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 建一个项目

1. 登录 GitLab，点New project → Create blank project；
2. 项目名填你的用户名.gitlab.io（这一步很关键，决定了你的网址，也是踩坑重灾区，见下方提示）；
3. 可见性选Private即可（仓库私有，但网站照样公开访问）；
4. 千万不要勾选“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 git@gitlab.com:你的用户名/你的用户名.gitlab.io.git git push-u origin main

第 5 步：等它自动上线

推送后，GitLab 会自动跑一个构建流水线：

1. 项目左侧菜单Build → Pipelines，能看到一个pages作业在跑（约 1~2 分钟）；
2. 流水线跑完（pages和pages:deploy两个作业都变绿）后，去Deploy → Pages就能看到你的网址；
3. 点开——你的个人网页正式上线了。之后每次推送，都会自动重新发布。

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 也完全能跑，方法几乎一样。

九、常见问题速查

十、想抄作业？看我的源码

文中每一步我都自己跑过，代码和成品都在这：

• 站点效果：https://yurutu.gitlab.io/
• 完整源码：https://gitlab.com/YuruTu/yurutu.gitlab.io

初学重点抄三个地方：

1. _config.yml：url、root、永久链接怎么配，照着写就不会踩“样式全丢”的坑（就是第五部分第 3 步那个坑）；
2. .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

3. 文章开头的 front-matter：比如我首页那篇《关于我》，开头就这几行，title 和 date 必写（date 为什么重要，见第六部分）：

---title:关于我date:2026-09-26 10:00:00---

站点上的「关于我」「作品」两个页面，对应source/下的两份 Markdown，想做同款页面照着改就行。

写在最后

回头看，整个流程只做了几件事：装工具 → 初始化 → 改配置 → 推代码 → 等上线。不用服务器、不花钱，你就有了一个完全属于自己、可以一直更新下去的网页。

它不会替你表达，但给了你一个不被平台限流、不随账号消失、随时能整体搬走的家。

内容随时可能消失的年代，这大概就是个人网页最大的意义。

动手吧，一个下午就够。

觉得有用的话，转发给那个"一直想做个人网站却总说没时间"的朋友。