企业官网建设流程全解析

如果你今年想做个人网站，又不想一上来就买域名、租服务器、搞备案，那我建议你认真看一下 GitHub Pages。它免费、稳定、支持自定义域名，最关键的是，很多人以为它只能托管技术文档，实际上完全可以用它搭出一个有技术含量、又足够好看的个人主页。本文就围绕“用 GitHub 构建个人网站主页”这条主线，讲清楚原理、两条可行路线（一条零基础直接套模板，一条手动写代码）、部署流程和常见坑，即使你之前没接触过 Git，按步骤操作也能跑通。

关于 2026 年再来看这件事，我的判断是：个人网站的需求并没有消失，只是变轻了。老一辈个人站长需要服务器和数据库，现在普通开发者、设计师、学生需要的只是一个低成本、可维护、能展示的线上门牌。GitHub Pages 恰好卡在这个需求点上，它没有复杂的运维概念，却能让你真实地体会到“代码推送—自动构建—线上生效”的完整流程。所以它不仅是免费托管，也是一种很合适的工程入门实践。

这篇文章会给你两条路。第一条偏轻松，适合零基础读者，直接从 GitHub 官方模板创建个人主页，改改文字就能上线；第二条偏硬核，适合想做技术简历型页面的读者，从零写一个 HTML/CSS 页面，再通过 Git 推到 GitHub 仓库，理解背后的部署机制。两条路都会落到同一个交付物：一个你可以发给别人看的 https://用户名.github.io 链接。

1. 为什么用 GitHub 构建个人网站：先看清适用场景

在开始动手之前，先做一个判断。GitHub Pages 本质上是一个静态网站托管服务，它只能托管 HTML、CSS、JavaScript 这类静态文件，不能运行 Java、Python、PHP 这类后端程序。这意味着它适合展示，不适合做复杂业务系统。

适合用 GitHub Pages 的场景包括：

• 个人简历主页：展示项目经历、技能、联系方式。
• 团队或项目介绍页：开源项目的 landing page。
• 轻量博客：通过 Jekyll 或 Hexo 生成静态博客。
• 文档站点：很多开源项目用 GitHub Pages 放文档。
• 作品集：设计师、摄影师、前端开发者的作品展示。

不适合用 GitHub Pages 的场景包括：

• 需要用户注册登录的 Web 应用。
• 需要服务器端数据库的网站。
• 需要处理支付、敏感信息、文件上传的动态系统。
• 对大陆访问速度有强要求的业务站点。

这里有一个经常被忽略的细节：GitHub Pages 提供的是免费托管，但免费不代表无限制。官方对带宽和空间有软性限制，建议仓库大小保持在 1GB 以下，发布的站点也要控制体积。对个人主页来说完全够用，但不要把它当网盘用。

如果单从成本角度比较，GitHub Pages 和传统服务器方案的差异非常明显：

从这张表可以看到，GitHub Pages 的优势不是“功能更强”，而是“维护成本更低”。如果你现阶段只需要一个展示型主页，它确实值得优先考虑。

2. GitHub Pages 的核心概念与工作原理

这里需要建立几个基础概念。第一，静态网站。静态网站就是浏览器拿到什么文件就显示什么内容的网站，没有服务器端的程序渲染。你写一个index.html，访问者就能看到这个文件里的内容。GitHub Pages 托管的就是这类文件，但它多做了一步：支持 Jekyll 静态站点生成器，可以把 Markdown 文件、模板、配置自动生成 HTML。

第二，仓库命名规则。这是新手最容易踩的第一个坑。如果你想发布的个人主页是https://用户名.github.io，那么你创建的仓库名必须严格等于用户名.github.io，注意这里的用户名是你 GitHub 账号的用户名，不是显示昵称，也不是邮箱。这个规则是硬性的，用其他名字创建的仓库，默认无法直接映射到你的个人主页域名。

第三，发布分支。GitHub Pages 在构建站点时，会从你仓库的某个分支读取文件。默认情况下，你可以选择从main分支发布，也可以指定docs文件夹。2026 年的 GitHub 界面仍然保留这两个选项，但最常见、最推荐的做法是使用独立分支发布，或者直接在仓库根目录放网站文件。

第四，构建流程。当你把代码推送到 GitHub 仓库后，GitHub Actions 会自动触发一个 Page build 任务。它会在云端跑一次 Jekyll 构建，然后生成新的静态文件并部署。这个流程对用户是透明的，但如果你构建失败，GitHub 会向你绑定的邮箱发送通知。

这里要特别说明 GitHub Pages 和普通文件夹托管的区别。如果你只是想在 GitHub 上放几个 HTML 文件，然后通过链接访问，其实有更简单的方式：直接把文件 push 到仓库，点击文件页面，GitHub 会在页面上提供 Preview 功能。但这种方式只能临时预览，不适合作为正式对外发布的网站。Pages 的价值在于它给了你一个稳定的、可以自定义域名、可以绑定 HTTPS 的正式发布通道。

用一个类比来理解：GitHub 仓库是源文件目录，Pages 是构建产物目录，两者之间的桥梁就是 Git 推送。你只需要维护源文件，剩下的部署交给 GitHub。

3. 前期准备：注册、环境配置与仓库创建

环境准备分两部分：一个是 GitHub 账号，一个是本地 Git 工具。如果你已经在用 GitHub，可以直接跳到 3.2 小节。

3.1 注册 GitHub 账号

打开 GitHub 官网，点击右上角的 Sign up。注册过程需要你设置用户名、邮箱、密码。这里的用户名要慎重，因为它会出现在你的个人主页域名里，也就是用户名.github.io。建议使用英文、数字、连字符，不要起太随意的名称。

注册完成后，尽量完成邮箱验证。未验证邮箱的账号在创建仓库、推送代码、使用 Actions 时可能遇到限制。建议同时开启双重认证，虽然多一步验证，但能大幅降低账号被盗风险，毕竟你以后会把个人主页和代码都放在这里。

3.2 安装并配置 Git

Git 是 GitHub 的本地协作工具，负责把代码推送到远程仓库。不同操作系统的安装方式不同，这里以通用场景说明。

Windows 用户可以到 Git 官网下载安装包，安装时一路默认即可。macOS 用户如果安装了 Homebrew，可以用：

brew install git

Linux 用户使用对应发行版的包管理器，比如 Ubuntu/Debian：

sudo apt update sudo apt install git

安装完成后，打开终端，检查版本：

git --version

能看到版本号说明安装成功。接下来需要配置用户信息，这个步骤必须做，否则后面的提交会报错：

git config --global user.name "你的GitHub用户名" git config --global user.email "你注册GitHub时用的邮箱"

注意，这里的邮箱建议和 GitHub 账号邮箱保持一致，这样你的提交记录才能正确关联到账号。配置完成后可以用git config --list检查。

3.3 验证本地环境

为了简化后续流程，可以提前验证 Git 能正常连接 GitHub。这一步需要你在 GitHub 上生成一个 Personal Access Token，用于 HTTPS 推送时的身份验证。生成路径是：

GitHub 右上角头像 → Settings → Developer settings → Personal access tokens → Tokens (classic) → Generate new token

创建 token 时勾选repo权限即可，生成后务必保存，因为它只显示一次。有了 token 后，本地推送时把密码替换成 token 即可。

这里还有一个高效做法：配置 Git 凭据管理器，让 Git 记住你的 token，避免每次推送都输入。Windows 默认自带 Git Credential Manager，macOS 可以启用 osxkeychain，Linux 可以使用git credential store。具体命令：

git config --global credential.helper store

设置后，第一次推送时输入一次用户名和 token，之后会自动保存。这是一种安全性和便捷性的平衡，考虑到部分开发者不熟悉 SSH 密钥配置，token 方式对新手更友好。

3.4 在 GitHub 创建仓库

登录 GitHub，点击右上角“+”号，选择 New repository。在 Repository name 一栏输入用户名.github.io，注意大小写和实际用户名保持一致。Visibility 选择 Public，因为 GitHub Pages 免费服务要求公开仓库。

创建成功后，仓库页面会显示几条远程地址信息，包括 HTTPS 和 SSH。对于新手，我建议使用 HTTPS 地址，配合上面配置的 token，操作链路最短。

如果你此时只是想先看效果，不打算在本地建文件夹，可以先不管这些命令，直接跳到第 4 节。但如果你选择手动构建，第 5 节会用到这些信息。

4. 零基础路线：官方模板快速搭建个人主页

这个方案适合完全不想碰代码的读者，或者时间紧、只想要一个像样主页的场景。GitHub 官方提供了一些 Jekyll 模板，你不需要了解 Jekyll 的底层逻辑，只需要在网页上完成几次点击。

第一步，创建一个和自己用户名匹配的个人主页仓库，名称必须是用户名.github.io，这一步和第 3.4 小结一致。

第二步，进入仓库页面，点击 Add file → Create new file。GitHub 会打开一个在线文件编辑器。这里如果你粘贴一段 HTML 代码并保存为index.html，GitHub 就会把这个文件作为主页内容。

但更快速的方式是在本地准备一个 HTML 文件，用截图工具或代码编辑器写完内容，再上传到仓库。对于零基础用户，我推荐一个更省事的路径：直接创建一个index.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> </head> <body> <h1>你好，我是你的名字</h1> <p>这是用 GitHub Pages 搭建的个人主页。</p> <p>点击这里访问我的 GitHub：<a href="https://github.com/你的用户名">GitHub</a></p> </body> </html>

注意替换你的用户名。保存文件时，文件名称必须是index.html，不要写成index.html.txt。

第三步，进入仓库 Settings → Pages。在 Branch 区域，把 None 改为 main，点击 Save。等待一分钟后，访问https://用户名.github.io，就能看到页面。

这个方案几乎不需要任何技术基础，但它有很多限制。首先，你只能在线编辑，调试体验差；其次，页面样式基本靠浏览器默认样式，谈不上设计感；最后，如果你需要多个页面，在线编辑器会非常低效。所以我会建议，即使你是零基础，也尽量走下面的手动构建路线，体验会更完整。

5. 有技术含量路线：手动编写主页并部署

这一节是本文的核心。我们会在本地创建一个网站项目，用 HTML 和 CSS 写一个有个人风格的主页，然后用 Git 推送到 GitHub 并部署上线。

5.1 项目结构设计

在本地找一个目录，新建一个文件夹，建议命名规范和 GitHub 仓库名一致。进入文件夹后，创建以下文件：

my-site/ ├── index.html ├── css/ │ └── style.css └── assets/ └── avatar.jpg

说明：

• index.html：网站入口文件，浏览器默认读取这个文件。
• css/style.css：样式表，控制页面颜色、布局、字体。
• assets/：放图片、头像、文件等静态资源。

这个结构虽然简单，但已经是小型静态网站的标准骨架了。一个人主页不必复杂，但清晰的项目结构会让后续维护变得轻松。

5.2 编写首页 HTML

打开index.html，写入下面的代码：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="我的个人主页，展示项目与联系方式"> <title>张三的个人主页</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="site-header"> <div class="container"> <img src="assets/avatar.jpg" alt="头像" class="avatar"> <h1>张三</h1> <p class="subtitle">前端开发 / 开源爱好者 / 技术写作者</p> </div> </header> <main class="container"> <section class="card"> <h2>关于我</h2> <p>你好，我是张三，一名热爱技术的开发者。这个网站由 GitHub Pages 免费托管，用来展示我的项目和想法。</p> </section> <section class="card"> <h2>代表性项目</h2> <ul> <li><a href="https://github.com/你的用户名/project1">项目一：个人工具集</a></li> <li><a href="https://github.com/你的用户名/project2">项目二：前端组件库</a></li> <li><a href="https://github.com/你的用户名/project3">项目三：技术博客</a></li> </ul> </section> <section class="card"> <h2>联系方式</h2> <p>邮箱：<a href="mailto:yourmail@example.com">yourmail@example.com</a></p> <p>GitHub：<a href="https://github.com/你的用户名">@你的用户名</a></p> </section> </main> <footer class="site-footer"> <div class="container"> <p>© 2026 张三 · Powered by GitHub Pages</p> </div> </footer> </body> </html>

这里解释几个关键点。<meta name="description">是页面描述，会影响搜索引擎展示摘要，属于基础的 SEO 优化。<link rel="stylesheet" href="css/style.css">用来引入外部样式文件。class属性是 CSS 选择器的钩子，样式表通过类名来控制元素外观。用语义化标签如header、main、footer，对可访问性和 SEO 都有好处。

5.3 编写 CSS 样式

创建css/style.css文件，写入下面的代码：

/* 文件路径：my-site/css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f5f7fa; } .container { max-width: 720px; margin: 0 auto; padding: 16px; } .site-header { background: linear-gradient(135deg, #24292e, #4a545c); color: #fff; padding: 48px 0; text-align: center; } .avatar { width: 96px; height: 96px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; margin-bottom: 12px; } .subtitle { opacity: 0.85; font-size: 16px; margin-top: 8px; } .card { background: #fff; border-radius: 12px; padding: 24px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .card h2 { font-size: 20px; margin-bottom: 10px; border-left: 4px solid #24292e; padding-left: 12px; } .card ul { margin-left: 20px; } a { color: #0366d6; text-decoration: none; } a:hover { text-decoration: underline; } .site-footer { text-align: center; padding: 32px 0; color: #666; font-size: 14px; }

这份样式做的核心事情有三个：让页面整体宽度控制在 720px 并居中，这是最常见的博客排版方案；给头部背景加上渐变，让页面视觉上不那么单调；用圆角卡片的方式组织内容，符合当前主流设计审美。

如果你没有头像图片，可以先在assets目录随便放一张图片，或者暂时把img标签删除。

5.4 在本地初始化 Git 并连接远程仓库

在项目目录下执行：

git init git add . git commit -m "feat: 初始化个人主页"

然后添加远程仓库。远程仓库地址可以在你的 GitHub 仓库页面找到，通常是：

git remote add origin https://github.com/你的用户名/你的用户名.github.io.git git branch -M main git push -u origin main

第一次推送时，Git 会要求输入 GitHub 用户名和密码。密码位置输入之前生成的 Personal Access Token，不是你的登录密码。这是因为 GitHub 出于安全考虑，已经不再支持 HTTPS 方式下的账号密码认证。

推送成功后，打开仓库 Settings → Pages，分支选择main，保存。等待一两分钟，访问https://用户名.github.io即可看到你的手工主页。

5.5 如何验证部署成功

验证方式分三层。第一层看 GitHub Actions 的构建状态：在仓库页面上方点击 Actions 标签，能看到pages build and deployment这个工作流的执行记录。如果显示绿色对勾，说明构建成功。

第二层直接刷新你的个人主页。如果页面和本地预览一致，说明部署链路已经通。

第三层检查网页控制台。按 F12 打开开发者工具，如果 Console 没有明显报错，说明资源加载正常。如果头像不显示，注意文件名和路径是否一致。

6. 进阶配置：自定义域名、Jekyll 主题与 SEO

当基础个人主页上线后，接下来这些配置能让你从“能打开”走向“更专业”。

6.1 绑定自定义域名

如果你有自己的域名，可以把它绑定到 GitHub Pages。这是国外服务商很常见的做法，国内域名涉及备案问题，需要你根据实际情况评估。

操作路径：把自定义域名的 CNAME 记录解析到用户名.github.io。然后在仓库 Settings → Pages → Custom domain 一栏输入你的域名，点击 Save。GitHub 会尝试自动为你启用 HTTPS，这可能需要一些时间，但通常几分钟内完成。

同时，建议在仓库根目录创建一个CNAME文件，内容就是你的域名，例如：

www.example.com

这个文件的作用是防止 GitHub Pages 在将来构建时丢失自定义域名配置。不过请注意，是否添加这个文件取决于你的域名状态，如果你没有自定义域名，完全不需要关注这一节。

6.2 使用 Jekyll 主题

如果你希望个人主页具备博客能力，比如写 Markdown 文章、自动生成文章列表，可以考虑在项目中引入 Jekyll。GitHub Pages 原生支持 Jekyll，你只需要在项目根目录创建一个_config.yml文件，然后按照 Jekyll 的规范写文章。

一个最简配置：

title: 我的个人主页 description: 使用 GitHub Pages 与 Jekyll 搭建 markdown: kramdown theme: minima

创建_layouts/default.html和_posts/2026-01-01-first-post.md等目录结构后，Github 会自动构建博客页面。但需要注意，theme: minima是 Jekyll 默认主题，如果自定义程度很高，可能需要选择其他主题或直接关掉主题。

对普通读者，我的建议是先别急着用 Jekyll。如果你已经在纯 HTML/CSS 阶段跑通了，再加一层静态站点生成器，学习曲线会平缓很多。反过来，如果一开始就用 Jekyll 模板，你可能会被目录结构和 Liquid 语法绕晕。

6.3 SEO 基础配置

静态网站的 SEO 优化不需要特别复杂。保证每个页面有唯一的title、description，图片添加alt属性，使用语义化 HTML 标签，这三点已经能打败很多没有优化的页面。如果未来要写文章，还可以引入sitemap.xml，但这不是必须项。

对于 2026 年的个人网站，我更推荐把精力放在内容和链接上：保持内容更新频率，在 GitHub 仓库写入清晰的 README，在社交平台贴上你的主页链接。搜索引擎收录是一个长期过程，不要指望刚部署完第二天就出现在搜索结果前列。

7. 常见问题与排查方法

在新手实际操作中，以下问题出现概率很高，这里整理成表格供你快速排查。

上面最后一条需要特别强调：如果 GitHub 访问不稳定，优先排除本地网络问题。比如公司网络可能限制了对 GitHub 的访问，可以尝试切换 Wi-Fi、使用移动热点、等待网络恢复。任何时候都不建议下载来源不明的所谓“GitHub 加速器”或“GitHub 镜像”，这类工具可能窃取你的账号 token，也违反平台使用规则。

8. 最佳实践与工程建议

个人网站虽然小，也应该用工程化的思路维护，否则时间一长就会陷入“改一个按钮半天找不到文件”的窘境。

第一，提交信息规范。不要每次提交都写update，建议使用类似feat: 新增项目展示区、fix: 修复移动端样式错位、docs: 更新联系方式这样的语义化提交信息。这样在回看历史时能快速定位每一条变更目的。

第二，目录结构预留扩展空间。起步阶段就可以把文件分成css、assets、js三个目录，即使初期没有 JS 文件也能接受。后续加功能时不需要大规模重构。

第三，图片等资源优化。GitHub Pages 对仓库体积有限制，不要直接上传几 MB 的高清图片。建议使用图片压缩工具，或者使用在线图床，然后在页面里引用链接。头像和背景图尽量裁剪成合适尺寸。

第四，环境变量和敏感信息。和个人主页无关，但如果你以后在同一个账号下管理其他项目，要注意不要把 API Key、数据库密码、token 提交进仓库。GitHub 有自动化扫描机制，推到公开仓库的敏感信息会被判定为泄露事件。

第五，加强账号安全。GitHub 账号是你所有代码资产的入口，务必开启双重认证，不要使用弱密码。如果是公司电脑，还要注意 token 的权限分配，尽量使用 fine-grained token 限定仓库范围。

第六，关于备案问题。如果你的目标读者主要在中国大陆，希望把网站放在更近的服务节点，GitHub Pages 并不适用。这时候建议考虑国内云服务商，但那样通常需要域名备案，时间成本会明显增加。根据需求选择适合的平台，不要因为免费就盲目套用。

9. 总结与下一步学习方向

现在你已经掌握了用 GitHub 构建个人网站主页的完整路径：注册账号、配置 Git、创建规范仓库、选择模板或手动编写代码、推送部署、进阶配置和排错。相比买服务器自己搭建，这套方案省去了运维环节，却保留了最核心的“Git 推送—自动构建—线上生效”工作流，对理解现代网站部署方式非常有帮助。

下一步你可以按自己的兴趣选择方向：

• 如果你喜欢写文章，学习 Jekyll 或 Hexo，把当前主页扩展成博客。
• 如果你喜欢样式设计，继续完善 CSS，学习 Flexbox、Grid 和响应式布局。
• 如果你对部署流程感兴趣，了解 GitHub Actions，尝试在每次推送后自动执行测试和部署。
• 如果你想把它变成简历，可以增加项目展示、时间线、下载简历文件等功能。

对已经上线的页面，有一个小提醒：不要把它当成一次性的作业。个人网站最大的价值在于长期更新和积累，过半年回看，你会发现页面和项目列表的变化，本身就是技术成长的记录。

建议先收藏本文，跟着第 5 节的路径，在你的电脑上完成一次完整的构建部署。当你亲眼看到自己的网站在公网被访问时，那种成就感会推动你继续完善下去。