零基础 10 分钟上线个人网站！GitHub Pages 免费建站教程
不需要买服务器，不需要懂后端，甚至不用写代码——用 GitHub Pages 免费搭建个人网站，10 分钟就能上线。配合 AI 编程工具，还能做出超好看的个人主页！
一、GitHub Pages 是什么？
GitHub Pages 是 GitHub 提供的免费静态网站托管服务。简单说就是：你把网页文件放到 GitHub 仓库里，它自动帮你变成一个能访问的网站。
免费套餐包含
| 功能 | 说明 |
|---|---|
| 🌐 免费域名 | 你的用户名.github.io |
| 💾 无限流量 | 每月 100GB 软限制，个人用绰绰有余 |
| 📦 1GB 存储 | 对静态网站来说完全够用 |
| 🔒 HTTPS | 自动启用 SSL 证书 |
| 🔄 自动部署 | 推送代码自动更新网站 |
| 🎨 自定义域名 | 支持绑定自己的域名 |
二、适用场景
GitHub Pages 适合托管静态网站（HTML + CSS + JS），不适合需要后端数据库的网站。
| 适合 ✅ | 不适合 ❌ |
|---|---|
| 个人博客 | 需要数据库的网站 |
| 作品集/简历页 | 用户登录注册系统 |
| 项目文档 | 电商网站 |
| 产品介绍页 | 论坛/社区 |
| 技术笔记 | 实时数据处理 |
三、准备工作
| 准备项 | 说明 |
|---|---|
| 🐙 GitHub 账号 | github.com 免费注册 |
| 📝 网页文件 | index.html 等，不会写也没关系，后面有现成模板 |
上图是 GitHub Pages 官方文档首页。GitHub Pages 可以把任意 GitHub 仓库变成在线网站，无需单独的主机空间。
四、方法一：最简单的建站方式（5 分钟）
第 1 步：创建仓库
登录 GitHub → 点击右上角「+」→ New repository
- Repository name：
你的用户名.github.io（必须严格这个格式） - 选择 Public（公开）
- 勾选「Add a README file」
- 点击「Create repository」
第 2 步：创建首页
在仓库页面点击「Add file」→「Create new file」
文件名输入：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>
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
background: white;
border-radius: 20px;
padding: 60px 40px;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 500px;
}
h1 {
color: #333;
font-size: 2.5em;
margin-bottom: 10px;
}
p {
color: #666;
font-size: 1.2em;
line-height: 1.8;
}
.btn {
display: inline-block;
margin-top: 20px;
padding: 12px 30px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
text-decoration: none;
border-radius: 50px;
font-size: 1.1em;
transition: transform 0.2s;
}
.btn:hover {
transform: translateY(-2px);
}
</style>
</head>
<body>
<div class="card">
<h1>👋 你好，世界！</h1>
<p>这是我的第一个网站<br>完全免费，托管在 GitHub Pages 上</p>
<a href="https://github.com" class="btn" target="_blank">访问我的 GitHub</a>
</div>
</body>
</html>
点击「Commit changes」保存。
第 3 步：访问你的网站
打开浏览器，输入 https://你的用户名.github.io
恭喜！你的个人网站已经上线了！🎉
五、方法二：用 AI 生成网站（零代码）
不会写 HTML？没关系，现在 AI 工具能帮你生成漂亮的网页。
用 ChatGPT / Claude / 文心一言等 AI 工具
直接跟 AI 说：
"帮我写一个个人博客首页的 HTML 代码，风格简约现代，包含头像、个人简介、技能标签、项目展示区域，用纯 HTML+CSS+JS 实现，不需要框架。"
AI 会生成完整的代码，你复制到 index.html 文件，上传到 GitHub 仓库就行了。
推荐一些免费 HTML 模板
| 模板 | 风格 | 地址 |
|---|---|---|
| HTML5 UP | 多种风格 | html5up.net |
| Bootstrap 模板 | 响应式 | startbootstrap.com |
| Tailwind 模板 | 现代简约 | tailwindtoolbox.com |
| Astro 模板 | 博客专用 | astro.build/themes |
下载模板 → 解压 → 把所有文件上传到 GitHub 仓库 → 完成！
六、绑定自定义域名
用户名.github.io 虽然能用，但不够专业。绑定自己的域名（比如 DNSHE 的免费域名）会更好。
第 1 步：在仓库中添加域名文件
在仓库根目录创建文件 CNAME（注意：没有后缀名，全大写）
内容就是你的域名：
www.yourdomain.com
第 2 步：添加 DNS 解析
去 DNSHE（或你的域名注册商）后台，添加记录：
| 主机记录 | 记录类型 | 记录值 |
|---|---|---|
| @ | A | 185.199.108.153 |
| @ | A | 185.199.109.153 |
| @ | A | 185.199.110.153 |
| @ | A | 185.199.111.153 |
| www | CNAME | 你的用户名.github.io |
这 4 个 IP 是 GitHub Pages 的官方 IP，建议全部添加以保证稳定性。
第 3 步：等待生效
DNS 修改后等待几分钟到几小时。生效后，访问你的自定义域名就能看到网站了。
GitHub 会自动为你的自定义域名启用 HTTPS 证书，在仓库 Settings → Pages 中可以看到状态。
七、进阶：搭建博客
GitHub Pages + 静态博客生成器，是很多程序员的首选建站方案。
推荐组合
| 博客框架 | 特点 | 难度 |
|---|---|---|
| Hexo | Node.js，主题丰富，中文社区好 | ⭐⭐ |
| Hugo | Go 编写，生成速度极快 | ⭐⭐ |
| Jekyll | GitHub 官方支持，无需本地构建 | ⭐ |
| VuePress | Vue 驱动，适合技术文档 | ⭐⭐⭐ |
| Astro | 新一代框架，性能极佳 | ⭐⭐⭐ |
以 Hexo 为例
# 安装 Node.js 后
npm install -g hexo-cli
# 创建博客
hexo init my-blog
cd my-blog
npm install
# 写一篇文章
hexo new "我的第一篇文章"
# 生成静态文件
hexo generate
# 部署到 GitHub Pages
hexo deploy
配置好后，每次写完文章只需要 hexo deploy 就能自动更新网站。
八、常见问题
Q1：GitHub Pages 能绑定多个域名吗？
一个仓库只能绑定一个自定义域名。如果你有多个域名指向同一个网站，需要设置 301 重定向。
Q2：为什么改了代码网站没变化？
- GitHub Pages 部署需要等待 1-2 分钟
- 浏览器可能有缓存，试试 Ctrl+F5 强制刷新
- 检查仓库 Settings → Pages 中构建状态是否有报错
Q3：能放视频和图片吗？
可以，但单个文件建议不超过 100MB。仓库总大小限制 1GB。大文件建议放在图床或 CDN 上。
Q4：能商用吗？
GitHub Pages 条款允许个人和商业用途。但注意不能用于运行商业服务、文件下载站等。
Q5：会被墙吗？
github.io 域名在国内有时访问不稳定。绑定自己的域名可以改善，或配合 Cloudflare CDN 使用更稳定。
九、小结
| 你得到的 | 花费 |
|---|---|
| 一个公网可访问的网站 | ¥0 |
| HTTPS 加密 | ¥0 |
| 自定义域名支持 | ¥0 |
| 全球 CDN 加速 | ¥0 |
| 无限流量 | ¥0 |
GitHub Pages 是性价比最高的建站方案，没有之一。配合 DNSHE 免费域名 + Cloudflare CDN，零成本搭建一个专业网站完全可行。
现在就去试试吧！10 分钟后你就能拥有自己的网站。
📌 系列文章：
- 新手必看：DNSHE 免费域名注册全攻略
- 免费虚拟主机注册全攻略
- DNS 解析从入门到精通
- Cloudflare 免费 CDN 配置教程
- 内网穿透教程——让家里电脑变成服务器
- 本文：GitHub Pages 搭建免费个人网站
- 下一篇：免费 SSL 证书申请教程