GitHub Pages简介

First Post:

Last Update:

Word Count:
814

Read Time:
3 min

Page View: loading...

GitHub Pages 是 GitHub 提供的免费静态网站托管服务，允许用户通过 GitHub 仓库直接发布个人博客、项目文档或静态网站。以下是其核心功能的详细解析：

一、核心特性

  1. 免费托管

    • 支持自定义域名（免费 SSL 证书）。
    • 提供 username.github.io 默认域名。
    • 存储空间无限制（单仓库建议 ≤1GB）。

  2. 静态内容支持

    • 直接托管 HTML/CSS/JS 文件。
    • 兼容 Jekyll、Hexo 等静态站点生成器。
    • 支持 Markdown 渲染（自动转换为 HTML）。

  3. 自动化部署

    • 提交代码到指定分支（如 main/gh-pages）自动更新网站。
    • 可与 GitHub Actions 集成实现高级 CI/CD 流程。

  4. 访问控制

    • 公开仓库对应公开网站。
    • 私有仓库需付费订阅 GitHub Pro 或 Team 方可启用 Pages。

二、部署方式

1. 基础部署（手动上传）

  • 步骤:
    1. 创建仓库：命名格式 <username>.github.io（个人主页）或任意名称（项目主页）。
    2. 上传文件：将静态文件（如 index.html）推送到默认分支（main）。
    3. 访问网站：https://<username>.github.io。

2. 使用 Jekyll（GitHub 原生支持）

  • 流程:
    1
    2
    3
    4
    5
    # 本地安装 Jekyll
    gem install jekyll bundler
    jekyll new my-site
    cd my-site
    bundle exec jekyll serve
  • 配置:
    • 在 _config.yml 中自定义元数据。
    • 支持 Liquid 模板和插件（需适配 GitHub 安全策略）。

3. 静态生成器集成（如 Hexo）

  • 步骤:
    1. 初始化项目：
      1
      2
      3
      npm install hexo-cli -g
      hexo init my-blog
      cd my-blog
    2. 部署配置（_config.yml）：
      1
      2
      3
      4
      deploy:
        type: git
        repo: https://github.com/username/username.github.io.git
        branch: main
    3. 生成并推送：
      1
      hexo clean && hexo g && hexo d

三、自定义域名配置

  1. 域名绑定

    • 在仓库设置 → Pages → Custom domain 输入域名（如 example.com）。
    • 添加 CNAME 文件到仓库根目录：
      1
      example.com

  2. DNS 解析

    • A 记录：指向 GitHub IP（如 185.199.108.153）。
    • CNAME 记录：指向 <username>.github.io。

  3. HTTPS 强制启用

    • 启用 GitHub Pages 的 Enforce HTTPS 选项。
    • 证书由 Let’s Encrypt 自动签发（更新周期 24 小时）。

四、适用场景

场景 技术方案 优势
个人博客 Jekyll/Hexo + Markdown 内容版本控制，写作流高效
项目文档 VuePress/Docusaurus 自动化文档生成，API 集成
作品集展示 原生 HTML/CSS + Bootstrap 轻量快速，定制灵活
开源项目主页 GitHub Pages + Actions 与代码仓库无缝集成

五、常见问题与解决

  1. 404 错误

    • 确认仓库命名和分支正确。
    • 检查 index.html 是否存在。

  2. Jekyll 构建失败

    • 禁用不兼容插件（如 jekyll-paginate）。
    • 验证 _config.yml 语法。

  3. HTTPS 证书未生效

    • 等待最长 24 小时自动更新。
    • 手动清除浏览器缓存。

  4. 访问速度优化

    • 使用 CDN（如 Cloudflare）。
    • 压缩图片与静态资源。

六、高级技巧

  • GitHub Actions 自动化
    创建 .github/workflows/deploy.yml 实现自动构建：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    name: Deploy
    on:
      push:
        branches: [main]
    jobs:
      build-deploy:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v2
          - run: npm install && npm run build
          - uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: ./public

  • 多环境部署
    通过分支管理开发/生产环境（如 dev 分支预览，main 分支正式发布）。

七、资源推荐

掌握以上内容，即可高效利用 GitHub Pages 构建专业级静态站点。

≡