如何快速搭建 GitHub 个人项目发布网站？-网站相关-佑然科技平台

什么是 GitHub Pages？

GitHub Pages 是 GitHub 提供的一个静态网站托管服务，你可以将你的 HTML、CSS、JavaScript 文件上传到 GitHub 仓库，GitHub 就会自动把它们变成一个可以通过公网访问的网站。

（图片来源网络，侵删）

优点：

免费： 对于个人和开源项目完全免费。
简单： 无需配置服务器，所有操作都在 GitHub 上完成。
版本控制： 你的网站内容就是你的代码，每一次修改都有历史记录，可以轻松回滚。
与 Git/GitHub 深度集成： 使用你最熟悉的工具（Git命令行、GitHub Desktop、VS Code等）来管理网站内容。
自动部署： 可以设置在每次推送代码到指定分支时自动更新网站。

使用 GitHub Pages 官方功能（最推荐）

这是最直接、最简单的方法，适合绝大多数用户。

第一步：准备工作

拥有一个 GitHub 账号： 如果没有，请先注册 github.com。
安装 Git： 确保你的电脑上已经安装了 Git，可以从 git-scm.com 下载安装。
（图片来源网络，侵删）

准备好网站文件： 你需要一个包含网站内容的文件夹，至少应该有一个 index.html 文件。

你可以创建一个简单的 my-website 文件夹，里面包含：

index.html
style.css
script.js

index.html 的内容可以很简单：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个 GitHub 网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这个网站托管在 GitHub Pages 上。</p>
    <script src="script.js"></script>
</body>
</html>

第二步：创建 GitHub 仓库

登录你的 GitHub 账号。
点击右上角的 "+" 号，选择 New repository (新建仓库)。
填写仓库信息：
- Repository name: 给你的仓库起一个名字。注意： 如果你想要使用 https://<你的用户名>.github.io 这种格式，仓库名必须是 <你的用户名>.github.io，如果你的用户名是 zhangsan，仓库名就必须是 zhangsan.github.io。
- Description: (可选) 描述一下你的仓库。
- Public: 选择 Public (公开)，因为 GitHub Pages 只能托管公开仓库。
- Initialize this repository with a README: 不要勾选，因为我们已经有自己的网站文件了。
点击 Create repository。

第三步：上传你的网站文件

你有几种方式可以将本地文件上传到 GitHub 仓库，这里推荐使用 命令行，因为它最灵活。

（图片来源网络，侵删）

打开终端或 Git Bash，进入你存放网站文件的本地文件夹。
```
cd /path/to/your/my-website
```
初始化 Git 仓库：
```
git init
```
连接到 GitHub 仓库：将你的本地仓库与刚创建的远程 GitHub 仓库关联，请将 <你的用户名> 和 <你的仓库名> 替换成你自己的信息。
```
git remote add origin https://github.com/<你的用户名>/<你的仓库名>.git
```
git remote add origin https://github.com/zhangsan/zhangsan.github.io.git
添加文件到 Git：
```
git add .
```
表示添加当前目录下的所有文件。

提交更改：

git commit -m "Initial commit: Add website files"

推送到 GitHub：
```
git push -u origin main
```
如果你的默认分支是 master，则使用 git push -u origin master。

你的网站文件已经成功上传到 GitHub 仓库了。

第四步：启用 GitHub Pages

这是最关键的一步！

进入你的 GitHub 仓库页面。
点击顶部的 Settings (设置) 标签页。
在左侧菜单栏的底部,找到并点击 Pages。
在 Source (源) 部分，进行如下设置：
- Branch: 选择 main (或 master)。
- Folder: 选择 / (root)。
- Action: 保持默认的 Deploy from a branch。
点击 Save (保存)。

稍等片刻（通常不到一分钟），GitHub 会自动构建你的网站。

第五步：访问你的网站

启用 Pages 后，页面顶部会显示一个网址，格式通常是： https://<你的用户名>.github.io

点击这个链接,你就能看到你的网站了！你也可以在仓库的 Actions 标签页中看到部署的日志。

使用 GitHub Actions (更高级、更灵活)

如果你需要对网站构建过程进行更多控制（使用 Hugo, Jekyll, Gatsby, Vue, React 等现代框架），或者需要自定义域名和 HTTPS，GitHub Actions 是更好的选择。

基本原理： 你不是直接推送 HTML 文件，而是推送你的源代码（如 Markdown 文件、Vue 组件），你创建一个 GitHub Actions 工作流文件（.github/workflows/gh-pages.yml），这个文件会告诉 GitHub 在你推送代码时，自动运行构建命令（如 hugo、npm run build），然后将生成的最终 HTML 文件部署到 gh-pages 分支上，而 GitHub Pages 会从这个分支读取文件。

简要步骤：

创建工作流文件： 在你的仓库根目录下创建文件夹 .github/workflows，然后在其中创建一个 gh-pages.yml 文件。
配置工作流： 在 gh-pages.yml 中编写配置代码，定义触发条件（如 push to main）和执行步骤（如检出代码、安装依赖、运行构建、部署）。
推送代码： 将你的源代码和 .github/workflows/gh-pages.yml 文件推送到 GitHub。
启用 Pages： 和方法一类似，进入仓库的 Settings -> Pages，但这次 Source 要选择 gh-pages 分支。

示例 gh-pages.yml (适用于 Hugo 静态站点生成器):

name: Deploy Hugo site to Pages
on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false
jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true
      - name: Build
        run: hugo
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./public
  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

这个配置比较复杂,但 GitHub 官方为许多流行工具提供了现成的 Actions 模板，你只需要复制粘贴并稍作修改即可。

进阶主题：自定义域名

当你不想使用 yourname.github.io 这个域名时，可以绑定自己的域名。

准备域名： 你需要拥有一个域名（my-awesome-website.com）。
在 GitHub 上设置：
- 进入仓库的 Settings -> Pages。
- 在 Custom domain 输入框中，填入你的域名（如 my-awesome-website.com 或 www.my-awesome-website.com）。
- 勾选 Enforce HTTPS (强制 HTTPS)，GitHub 会自动为你申请并配置 SSL 证书。
- 点击 Save。
在你的域名提供商处配置 DNS：
- 登录你的域名注册商的控制面板（如 GoDaddy, Namecheap, 阿里云等）。
- 找到 DNS/域名解析设置。
- 添加一条 CNAME 记录。
  - Type: CNAME
  - Host/Name: www (如果你要绑定 www 子域名) 或者 (如果你要绑定根域名)。
  - Value/Points to: <你的用户名>.github.io。
  - TTL: 保持默认即可。
注意： 如果要绑定根域名（如 my-awesome-website.com），除了 CNAME 记录，你可能还需要添加一条 A 记录，将域名指向 GitHub 的 IP 地址（199.108.153, 199.109.153, 199.110.153, 199.111.153），使用 CNAME 绑定根域名在某些 DNS 提供商上可能不被支持。

等待 DNS 生效（可能需要几分钟到几小时），然后你的自定义域名就可以访问你的 GitHub Pages 网站了。

方法	优点	缺点	适用场景
GitHub Pages (直接推送)	简单、快速、零配置	灵活性低，只能托管静态文件	个人简历、简单的项目展示、纯 HTML/CSS/JS 网站
GitHub Actions (CI/CD)	极其灵活、可自动化构建、支持现代框架	配置稍复杂，需要理解 CI/CD 概念	技术博客 (Jekyll/Hugo)、单页应用、需要构建流程的项目

对于初学者,强烈推荐从方法一开始，当你需要更强大的功能时，再学习和使用方法二。

希望这份详细的指南能帮助你成功发布你的第一个 GitHub 网站！