使用 GitHub 搭建网站是许多开发者和个人用户的首选方式，尤其适合静态网站的部署，这种方法不仅免费、便捷，还能利用 GitHub 的版本控制功能实现网站的快速更新和回滚，以下将详细介绍从零开始使用 GitHub 搭建网站的完整流程，包括准备工作、本地开发、远程部署、自定义域名配置及优化技巧等内容。
准备工作：注册 GitHub 账号并创建仓库
需要一个 GitHub 账号，如果没有，访问 GitHub 官网 注册即可，注册过程免费且简单，账号创建完成后，登录 GitHub，点击右上角的“+”号，选择“New repository”创建新仓库。
- 仓库名称：建议使用
用户名.github.io的格式（如果用户名是john-doe，仓库名则设为john-doe.github.io），这是 GitHub Pages 的默认域名规则。 - 仓库可见性：选择“Public”（公开），因为 GitHub Pages 仅支持公开仓库的免费部署。
- 初始化选项：勾选“Add a README file”，方便后续管理。
创建完成后，仓库地址会显示为https://github.com/用户名/用户名.github.io，后续部署时需要用到这个地址。
本地开发：创建网站文件
静态网站的核心是 HTML、CSS 和 JavaScript 文件，可以使用任何代码编辑器（如 VS Code、Sublime Text）创建本地项目文件夹，并编写网站文件，以下是一个简单的示例结构：
my-website/
├── index.html # 首页
├── css/
│ └── style.css # 样式文件
└── js/
└── script.js # 交互脚本编写基础 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">我的 GitHub 网站</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
</header>
<main>
<p>这是使用 GitHub Pages 搭建的静态网站示例。</p>
</main>
<script src="js/script.js"></script>
</body>
</html>
添加样式和脚本
在 css/style.css 中编写简单样式：
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
header {
background: #333;
color: #fff;
text-align: center;
padding: 1rem;
}
main {
background: #fff;
padding: 2rem;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
在 js/script.js 中添加交互功能（例如点击按钮弹出提示）：
document.addEventListener('DOMContentLoaded', function() {
const button = document.createElement('button');
button.textContent = '点击我';
button.style.padding = '10px 20px';
button.style.marginTop = '10px';
button.addEventListener('click', function() {
alert('Hello, GitHub Pages!');
});
document.querySelector('main').appendChild(button);
});
部署到 GitHub：上传网站文件
将本地文件上传到 GitHub 仓库，可通过以下两种方式实现：
使用 GitHub Desktop 客户端（适合新手）
- 下载并安装 GitHub Desktop，登录 GitHub 账号。
- 在 GitHub Desktop 中点击 “File” → “Add Local Repository”，选择本地
my-website文件夹。 - 填写仓库摘要（如“Initial commit”），点击 “Commit to main”。
- 点击右上角的 “Push origin” 按钮，将文件推送到 GitHub 仓库。
使用 Git 命令行（适合熟悉 Git 的用户）
- 打开终端,进入本地项目文件夹，初始化 Git 仓库：
git init
- 添加远程仓库（替换
用户名为你的 GitHub 用户名）：git remote add origin https://github.com/用户名/用户名.github.io.git
- 添加所有文件并提交：
git add . git commit -m "Initial commit"
- 推送到 GitHub：
git push -u origin main
推送完成后,等待 1-2 分钟，访问 https://用户名.github.io 即可看到网站内容，如果未显示，检查仓库的 “Settings” → “Pages” 中 “Source” 是否选择为 “Deploy from a branch”，且分支为 “main”。
自定义域名：绑定个人域名
如果希望使用个人域名（如 www.example.com）访问网站，可按以下步骤配置：
- 购买域名：在域名注册商（如阿里云、GoDaddy）购买域名。
- 配置 DNS 解析：在域名管理后台添加 CNAME 记录，将域名指向 GitHub Pages 地址：
| 记录类型 | 主机记录 | 记录值 |
|----------|----------|-------------------------|
| CNAME | www | 用户名.github.io |
（注：如果需要直接用根域名访问，可添加 A 记录，指向 GitHub 的 IP 地址199.108.153、199.109.153、199.110.153、199.111.153） - 在 GitHub 仓库中设置域名：
- 进入仓库 “Settings” → “Pages”。
- 在 “Custom domain” 输入框中填写你的域名（如
www.example.com）。 - 勾选 “Enforce HTTPS”（启用 HTTPS，需等待 GitHub 证书签发）。
配置完成后，等待 10-30 分钟，通过个人域名即可访问网站。
优化与维护：提升网站体验
启用 HTTPS
GitHub Pages 默认支持 HTTPS，在 “Settings” → “Pages” 中开启后，可确保网站数据传输安全，避免浏览器“不安全”警告。
使用 Jekyll 或静态站点生成器
如果希望更高效地管理网站内容,可结合 Jekyll（GitHub Pages 内置支持）或 Hexo、Hugo 等工具，使用 Markdown 编写文章，通过工具自动生成 HTML 文件，再部署到 GitHub。
定期更新与回滚
- ：修改本地文件后，通过
git add .、git commit -m "更新说明"、git push推送到 GitHub，网站会自动更新。 - 回滚版本：如果更新后出现问题，可在仓库 “Commits” 页面找到历史版本，点击右侧的 “…” → “Revert this commit”，恢复到之前的版本。
添加网站统计
使用 Google Analytics 或百度统计，在 HTML 文件的 <head> 标签中插入对应的跟踪代码，即可访问网站流量数据。
相关问答 FAQs
问题 1：GitHub Pages 是否支持动态网站（如 PHP、数据库）？
解答：GitHub Pages 仅支持静态网站，无法直接运行 PHP、Python 等服务器端语言或连接数据库，如果需要动态功能，可结合第三方服务（如 Firebase、Netlify）或使用 GitHub Actions 部署到其他云平台。
问题 2：如何为 GitHub Pages 网站配置 404 错误页面？
解答：在仓库根目录下创建 html 文件，编写自定义 404 页面内容（需包含 <meta name="robots" content="noindex"> 避免被搜索引擎收录），访问不存在的页面时，GitHub 会自动显示该文件。
<!DOCTYPE html>
<html>
<head>页面未找到</title>
<meta name="robots" content="noindex">
</head>
<body>
<h1>404 - 页面不存在</h1>
<p>抱歉，您访问的页面不存在。</p>
<a href="https://用户名.github.io">返回首页</a>
</body>
</html>
提交后,即可通过访问任意不存在的路径测试 404 页面。
原文来源：https://www.dangtu.net.cn/article/9014.html
