github实战指南06- Pages 部署网站

江畔柳前堤

148人浏览 · 2026-06-14 11:01:18

江畔柳前堤 · 2026-06-14 11:01:18 发布

06 - GitHub Pages 部署网站

本章目标：用 GitHub Pages 免费部署你的静态网站，获得一个 https://your-name.github.io 的网站。

一、GitHub Pages 是什么？

GitHub Pages 是 GitHub 提供的免费静态网站托管服务。

特点：
✅ 免费
✅ 支持自定义域名
✅ 自动部署（配合 Actions）
✅ 支持 Jekyll / Hugo 等静态网站生成器
✅ 每个月 100GB 流量

两种类型

1. 用户/组织站点
   - 仓库名必须是：your-name.github.io
   - 访问地址：https://your-name.github.io

2. 项目站点
   - 仓库名任意
   - 访问地址：https://your-name.github.io/repo-name

二、实战：创建你的个人网站

2.1 创建仓库

# 仓库名必须是：your-name.github.io
# 例如：zhangsan.github.io

# 在 GitHub 上创建这个仓库
# ✅ Add a README file

2.2 克隆并创建网站

# 克隆仓库
git clone git@github.com:your-name/your-name.github.io.git
cd your-name.github.io

# 创建首页
cat > index.html << 'EOF'
<!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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            background: white;
            padding: 3rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            max-width: 600px;
            text-align: center;
        }
        h1 { font-size: 2.5rem; margin-bottom: 1rem; color: #667eea; }
        p { font-size: 1.2rem; color: #666; margin-bottom: 1.5rem; }
        .links a {
            display: inline-block;
            margin: 0.5rem;
            padding: 0.8rem 1.5rem;
            background: #667eea;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: transform 0.2s;
        }
        .links a:hover { transform: translateY(-2px); }
    </style>
</head>
<body>
    <div class="container">
        <h1>👋 你好，我是你的名字</h1>
        <p>联通产业互联网公司实习生 | 正在学习企业级 Git</p>
        <div class="links">
            <a href="https://github.com/your-name">GitHub</a>
            <a href="about.html">关于我</a>
        </div>
    </div>
</body>
</html>
EOF

# 创建关于页面
cat > about.html << 'EOF'
<!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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            padding: 2rem;
            max-width: 800px;
            margin: 0 auto;
        }
        h1 { color: #667eea; margin-bottom: 1.5rem; }
        .card {
            background: #f8f9fa;
            padding: 1.5rem;
            border-radius: 8px;
            margin-bottom: 1rem;
        }
        a { color: #667eea; }
    </style>
</head>
<body>
    <h1>关于我</h1>
    <div class="card">
        <h3>🎓 教育背景</h3>
        <p>XX 大学 计算机科学与技术</p>
    </div>
    <div class="card">
        <h3>💼 实习经历</h3>
        <p>联通产业互联网公司 实习生</p>
    </div>
    <div class="card">
        <h3>🛠 技术栈</h3>
        <p>Java, Python, JavaScript, Git, Docker</p>
    </div>
    <p><a href="index.html">← 返回首页</a></p>
</body>
</html>
EOF

# 提交并推送
git add .
git commit -m "feat: create personal website"
git push

2.3 启用 GitHub Pages

1. 打开仓库页面 → Settings → Pages
2. Source：Deploy from a branch
3. Branch：main
4. 文件夹：/ (root)
5. 点击 Save

等待 1-2 分钟，你的网站就上线了！
访问：https://your-name.github.io

三、实战：为项目创建文档网站

3.1 项目站点

# 在你的 my-git-practice 仓库中
cd my-git-practice

# 创建 docs 目录
mkdir docs

# 创建文档首页
cat > docs/index.html << 'EOF'
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Git 实战文档</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 2rem; }
        h1 { color: #0366d6; }
        .doc-list { list-style: none; }
        .doc-list li { padding: 1rem; border: 1px solid #e1e4e8; margin: 0.5rem 0; border-radius: 5px; }
        .doc-list a { color: #0366d6; text-decoration: none; }
    </style>
</head>
<body>
    <h1>📚 Git 实战文档</h1>
    <ul class="doc-list">
        <li><a href="01-setup.html">01 - 环境配置</a></li>
        <li><a href="02-basics.html">02 - 基础操作</a></li>
        <li><a href="03-branching.html">03 - 分支管理</a></li>
    </ul>
</body>
</html>
EOF

# 提交并推送
git add docs/
git commit -m "docs: add documentation site"
git push

3.2 启用项目站点

1. 仓库页面 → Settings → Pages
2. Source：Deploy from a branch
3. Branch：main
4. 文件夹：/docs
5. 点击 Save

访问：https://your-name.github.io/my-git-practice

四、Jekyll 静态网站生成器

Jekyll 是 GitHub Pages 内置支持的静态网站生成器，可以用 Markdown 写文章。

4.1 快速开始

# 在仓库根目录创建 _config.yml
cat > _config.yml << 'EOF'
title: My Git Practice
description: 企业级 Git 实战练习
theme: minima
EOF

# 创建 Markdown 文章
mkdir -p _posts
cat > _posts/2024-01-01-hello-world.md << 'EOF'
---
layout: post
title: "Hello World"
date: 2024-01-01
categories: git
---

# Hello World

这是我的第一篇博客文章。

## Git 基础

Git 是一个分布式版本控制系统。

```bash
git init
git add .
git commit -m "first commit"

EOF

提交并推送

git add .
git commit -m “docs: add Jekyll blog”
git push

### 4.2 Jekyll 主题

常用主题：

minima（默认）
Cayman
Dinky
Hacker
Leap Day

在 _config.yml 中设置：
theme: jekyll-theme-cayman

---

## 五、自定义域名

### 5.1 购买域名

推荐域名服务商：

阿里云（aliyun.com）
腾讯云（cloud.tencent.com）
Namecheap
GoDaddy

### 5.2 配置 DNS

在你的域名服务商添加 DNS 记录：

类型主机记录值
CNAME www your-name.github.io
A @ 185.199.108.153
A @ 185.199.109.153
A @ 185.199.110.153
A @ 185.199.111.153

### 5.3 在 GitHub 上设置

仓库 → Settings → Pages
Custom domain：填入你的域名（如 www.example.com）
点击 Save
✅ Enforce HTTPS（强制 HTTPS）

---

## 六、GitHub Actions 自动部署

```yaml
# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      
      - name: Setup Pages
        uses: actions/configure-pages@v4
      
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: '.'

  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@v4

七、常见问题

404 错误

# 检查文件名是否正确（大小写敏感）
# 检查是否在正确的目录（root 或 docs）
# 检查 Pages 是否已启用
# 等待几分钟（首次部署需要时间）

样式不生效

# 检查 CSS 路径是否正确
# 检查是否用了绝对路径
# 尝试硬刷新（Ctrl + F5）

八、练习清单

完成以下操作：

创建 your-name.github.io 仓库
创建一个简单的个人网站
启用 GitHub Pages 并访问网站
为 my-git-practice 创建文档站点
尝试用 Jekyll 创建博客
（可选）购买域名并配置自定义域名

上一章：05-Fork与开源协作
下一章：[07-GitHub CLI与高级技巧](07-GitHub CLI与高级技巧.md)

乐奇 Rokid 开放社区

更多推荐

AR巡检哪家好，和浪潮比哪家方案更成熟

乐奇 Rokid 开放社区

AR巡检哪家好

乐奇 Rokid 开放社区

瑞丰宝丽在AR巡检领域排名

乐奇 Rokid 开放社区

所有评论(0)

查看更多评论

江畔柳前堤

@qq_51605551

已为社区贡献7条内容

github实战指南06- Pages 部署网站

江畔柳前堤

06 - GitHub Pages 部署网站

一、GitHub Pages 是什么？

两种类型

二、实战：创建你的个人网站

2.1 创建仓库

2.2 克隆并创建网站

2.3 启用 GitHub Pages

三、实战：为项目创建文档网站

3.1 项目站点

3.2 启用项目站点

四、Jekyll 静态网站生成器

4.1 快速开始

提交并推送

七、常见问题

404 错误

样式不生效

八、练习清单

所有评论(0)

温馨提示：您尚未绑定手机号

江畔柳前堤