### Meta描述

本文详细介绍使用GitHub Pages部署静态网站的专业操作流程，涵盖仓库创建、Jekyll配置、自定义域名绑定、HTTPS启用及持续集成优化。提供代码示例、技术数据和常见问题解决方案，适合开发者快速实现高效静态站点托管。

—

# 使用GitHub Pages部署静态网站: 具体操作步骤

`GitHub Pages` 是GitHub提供的免费静态网站托管服务，支持自动构建、HTTPS加密和自定义域名。据GitHub官方统计，截至2023年，超过65%的开源项目文档使用此服务部署。本文将系统讲解其操作流程与技术细节。

## 一、前期准备：创建仓库与本地环境

### 1.1 初始化GitHub仓库

1. **命名规范**：仓库名必须为`.github.io`（用户/组织站点）或任意名称（项目站点）。

2. **创建步骤**：

“`bash

# 在GitHub网页端创建新仓库

Repository name: “username.github.io” # 替换为你的用户名

Visibility: Public

Initialize with README: ✅

“`

3. **权限验证**：

“`bash

git clone https://github.com/username/username.github.io

cd username.github.io

“`

### 1.2 本地静态网站开发

以基础HTML项目为例：

“`html

GitHub Pages示例

成功部署！

“`

> **技术要点**：GitHub Pages默认从根目录或`/docs`加载`index.html`，文件路径需严格匹配。

—

## 二、静态网站生成器深度配置

### 2.1 Jekyll自动化构建

`Jekyll` 是GitHub Pages官方支持的静态站点生成器(Static Site Generator, SSG)。

**步骤1：安装Ruby与Jekyll**

“`bash

# 安装Ruby（版本≥2.5.0）

sudo apt install ruby-full

# 安装Jekyll与Bundler

gem install jekyll bundler

“`

**步骤2：初始化Jekyll项目**

“`bash

jekyll new my-site

cd my-site

# 目录结构说明

├── _config.yml # 配置文件

├── _posts/ # Markdown博客目录

├── _site/ # 构建输出目录（GitHub自动生成）

└── index.md # 首页

“`

**步骤3：关键配置（_config.yml）**

“`yaml

title: “技术博客”

baseurl: “”

url: “https://username.github.io”

plugins:

– jekyll-feed # 启用RSS订阅

“`

### 2.2 手动构建非Jekyll项目

若使用Vue/React等框架，需在本地构建后提交产物：

“`bash

# React项目示例

npm run build

mv build/* . # 将构建产物移至仓库根目录

“`

—

## 三、部署流程与高级设置

### 3.1 推送代码触发部署

“`bash

git add .

git commit -m “首次提交”

git push origin main # 默认部署分支为main/gh-pages

“`

**部署结果验证**：

– 访问 `https://username.github.io`

– 在仓库Settings > Pages查看状态（一般3分钟内完成）

### 3.2 自定义域名绑定

**步骤1：域名DNS配置**

“`bash

# DNS记录示例（A记录）

主机记录：@

目标地址：185.199.108.153 # GitHub官方IP

“`

**步骤2：仓库内添加CNAME文件**

“`bash

echo “yourdomain.com” > CNAME # 无后缀文件名！

“`

### 3.3 强制启用HTTPS

在仓库Settings > Pages中勾选：

> **Enforce HTTPS** ✅

> *证书由Let s Encrypt自动签发，更新周期90天*

—

## 四、持续集成与性能优化

### 4.1 GitHub Actions自动化构建

**场景**：当项目使用Webpack等非Jekyll工具时，需自定义构建流程。

“`yaml

# .github/workflows/deploy.yml

name: Deploy to GitHub Pages

on:

push:

branches: [main]

jobs:

build-deploy:

runs-on: ubuntu-latest

steps:

– uses: actions/checkout@v4

– run: npm install && npm run build

– uses: peaceiris/actions-gh-pages@v3

with:

github_token: ${{ secrets.GITHUB_TOKEN }}

publish_dir: ./dist # 构建产物目录

“`

### 4.2 性能优化策略

| 方案 | 实施方法 | 效果提升 |

|———————|———————————–|———-|

| CDN缓存 | 添加`_headers`文件设置缓存策略 | 加载速度↑40% |

| 图片压缩 | 使用`imagemin`插件自动优化 | 体积↓70% |

| 资源预加载 | 在HTML中配置“| FCP时间↓30% |

—

## 五、故障排查与解决方案

### 5.1 常见构建失败缘由

1. **Jekyll版本冲突**

– 错误信息：`Dependency Error`

– 修复：在Gemfile中指定版本

“`ruby

gem “jekyll”, “~> 4.3.0”

“`

2. **文件路径错误**

– 现象：404页面

– 验证：访问 `https://username.github.io/assets/main.css`

### 5.2 HTTPS证书错误

**场景**：浏览器提示”不安全连接”

– 检查域名DNS配置是否生效（TTL最长48小时）

– 在GitHub Pages设置中重新触发HTTPS启用

—

## 结语

通过GitHub Pages，开发者可零成本实现自动化部署、全球CDN加速和安全HTTPS访问。结合Actions持续集成，能高效管理复杂前端项目的发布流程。提议定期查阅[官方文档](https://pages.github.com/)获取最新功能更新。

> **技术数据参考**：

> – 全球访问延迟：平均<50ms（Cloudflare CDN）

> – 单仓库容量限制：1GB

> – 月流量限制：100GB

—

**技术标签**：

`GitHub Pages` `静态网站部署` `Jekyll` `持续集成` `HTTPS配置` `前端优化`