外观
零基础教程：如何搭建 GitHub Pages 网站
快速访问： 中文版本教程
简介
GitHub Pages 是 GitHub 提供的免费静态网站托管服务，可以让你快速搭建个人网站、博客或项目文档。本教程将手把手教你从零开始搭建一个 用户名.github.io 网站。
第一步：注册 GitHub 账号
- 访问 github.com
- 点击右上角 "Sign up"（注册）按钮
- 按提示依次填写：
- 邮箱地址
- 密码
- 用户名（比如：
dddd）
- 完成人机验证
- 前往邮箱完成验证
重要提示： 你注册的用户名将决定你的网站地址。例如用户名是
dddd，网站地址就是https://dddd.github.io
第二步：创建 GitHub Pages 仓库
- 登录 GitHub 后，点击页面右上角的 "+" 号
- 选择 "New repository"（新建仓库）
- 填写仓库信息：
- Repository name（仓库名）：必须输入
dddd.github.io（用你的实际用户名替换dddd） - Description（描述）：选填，比如"我的个人网站"
- 选择 "Public"（公开仓库）
- 勾选 "Add a README file"（添加 README 文件）
- Repository name（仓库名）：必须输入
- 点击 "Create repository"（创建仓库）
第三步：创建首页文件
方法一：在 GitHub 网页上创建
- 在仓库页面，点击 "Add file" → "Create new file"
- 在文件名输入框中输入：
index.html - 在编辑器中粘贴以下代码：
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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', 'Microsoft YaHei', sans-serif;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
max-width: 800px;
width: 100%;
}
h1 {
text-align: center;
font-size: 3em;
color: white;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.content {
background: rgba(255, 255, 255, 0.1);
padding: 40px;
border-radius: 15px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
color: white;
}
h2 {
font-size: 2em;
margin-bottom: 15px;
color: #fff;
}
p {
font-size: 1.1em;
line-height: 1.8;
margin-bottom: 15px;
}
.footer {
text-align: center;
margin-top: 30px;
color: rgba(255,255,255,0.8);
}
</style>
</head>
<body>
<div class="container">
<h1>🎉 欢迎来到我的网站</h1>
<div class="content">
<h2>关于我</h2>
<p>这是我的第一个 GitHub Pages 网站！</p>
<p>你可以在这里分享你的项目、博客或任何你想展示的内容。</p>
<p>GitHub Pages 完全免费，支持自定义域名，非常适合搭建个人网站。</p>
<div class="footer">
<p>Powered by GitHub Pages</p>
</div>
</div>
</div>
</body>
</html>- 滚动到页面底部，在 "Commit new file" 区域：
- 可以修改提交信息（默认即可）
- 点击 "Commit new file" 按钮
第四步：启用 GitHub Pages
- 在仓库页面，点击顶部的 "Settings"（设置）标签
- 在左侧菜单中找到 "Pages" 选项
- 在 "Build and deployment" 部分：
- Source：选择 "Deploy from a branch"
- Branch：选择 "main" 分支，文件夹选择 "/ (root)"
- 点击 "Save" 按钮
系统会自动开始部署你的网站。
第五步：访问你的网站
- 等待 1-3 分钟（首次部署需要时间）
- 在浏览器中访问：
https://dddd.github.io（用你的实际用户名替换dddd） - 你的网站就成功上线了！🎊
提示： 你可以在 Settings → Pages 页面顶部看到你的网站地址和部署状态
进阶使用
修改网站内容
- 进入仓库，点击
index.html文件 - 点击右上角的铅笔图标（Edit）
- 修改内容后，点击 "Commit changes"
- 等待 1-2 分钟，刷新网站即可看到更新
添加更多页面
创建更多 HTML 文件，比如：
about.html- 关于页面contact.html- 联系方式projects.html- 项目展示
访问路径为：https://dddd.github.io/about.html
使用 Jekyll 建站框架
GitHub Pages 原生支持 Jekyll，可以用 Markdown 写博客：
- 在仓库根目录创建
_config.yml文件 - 添加配置：
yaml
title: 我的博客
description: 分享技术与生活
theme: jekyll-theme-cayman- 在
_posts文件夹中创建文章，文件名格式：2024-01-01-文章标题.md
绑定自定义域名
如果你有自己的域名（如 www.example.com）：
- 在仓库根目录创建
CNAME文件 - 文件内容填写你的域名：
www.example.com - 在域名提供商处添加 DNS 记录：
- 类型：CNAME
- 主机记录：www
- 记录值：
dddd.github.io
常见问题
Q: 访问网站显示 404 错误？
A: 这是正常现象，首次部署需要 3-5 分钟时间。如果超过 10 分钟仍然 404，请检查：
- 仓库名是否为
用户名.github.io格式 - 是否已在 Settings → Pages 中启用
- 分支是否选择正确
Q: GitHub Pages 是免费的吗？
A: 完全免费！对于公开仓库，GitHub Pages 提供免费托管服务，并且没有流量限制。
Q: 需要懂编程才能使用吗？
A: 不需要！按照本教程操作即可。如果想深度定制，学习基础的 HTML、CSS 会很有帮助。
Q: 可以用来做什么？
A:
- 个人简历网站
- 技术博客
- 项目文档
- 在线作品集
- 小型企业官网
Q: 网站内容多久更新一次？
A: 每次提交代码后，GitHub 会自动重新部署，通常 1-2 分钟内生效。
Q: 支持 HTTPS 吗？
A: 支持！GitHub Pages 自动为所有网站提供免费的 HTTPS 加密。
推荐资源
总结
恭喜你完成了 GitHub Pages 网站的搭建！现在你已经拥有了一个免费、安全、可以随时更新的个人网站。
接下来可以做的事情：
- 美化网站样式
- 添加更多页面
- 尝试使用 Jekyll 主题
- 绑定自定义域名
- 分享你的网站给朋友
如果在使用过程中遇到任何问题，欢迎随时提问！