# GitHub Pages教程：免费托管静态网站
## 什么是GitHub Pages
GitHub Pages是GitHub提供的免费静态网站托管服务，它允许你：
– 托管个人、组织或项目的网站
– 直接从GitHub仓库生成网站
– 支持自定义域名
– 无需服务器配置
## 类型的GitHub Pages
### 1. 个人/组织站点
– 仓库名称：`username.github.io` 或 `organization.github.io`
– 网站URL：`https://username.github.io`
– 内容来自 `main` 分支
### 2. 项目站点
– 仓库名称：任意
– 网站URL：`https://username.github.io/repository`
– 内容可以来自 `main` 分支的 `docs` 文件夹或 `gh-pages` 分支
## 创建个人站点
### 步骤1：创建仓库
1. 登录GitHub
2. 点击”New repository”
3. 仓库名称设置为 `your-username.github.io`
4. 选择公开仓库
5. 勾选”Initialize this repository with a README”
6. 点击”Create repository”
### 步骤2：添加内容
1. 克隆仓库到本地
“`bash
git clone https://github.com/your-username/your-username.github.io.git
cd your-username.github.io
“`
2. 创建 `index.html` 文件
“`html
Hello, World!
Welcome to my GitHub Pages site.
“`
3. 提交并推送更改
“`bash
git add .
git commit -m “Initial commit”
git push origin main
“`
### 步骤3：访问网站
– 等待几分钟，然后访问 `https://your-username.github.io`
## 使用Jekyll构建网站
### 什么是Jekyll
Jekyll是一个静态站点生成器，GitHub Pages默认支持它。它可以：
– 自动生成静态网站
– 支持Markdown和Liquid模板
– 提供主题系统
– 简化网站维护
### 安装Jekyll（本地开发）
“`bash
# 安装Ruby（如果未安装）
# 然后安装Jekyll和bundler
gem install bundler jekyll
# 在仓库目录中初始化Jekyll
jekyll new . –force
# 安装依赖
bundle install
# 本地预览
bundle exec jekyll serve
“`
### 配置Jekyll
编辑 `_config.yml` 文件：
“`yaml
name: Your Site Name
description: Your site description
permalink: pretty
# 主题设置
theme: minima
# 插件
gems:
– jekyll-feed
– jekyll-seo-tag
“`
## 自定义域名
### 步骤1：购买域名
从域名注册商（如GoDaddy、Namecheap等）购买域名。
### 步骤2：配置DNS
在域名注册商的控制面板中添加DNS记录：
– **A记录**：指向GitHub Pages的IP地址
– 185.199.108.153
– 185.199.109.153
– 185.199.110.153
– 185.199.111.153
– **CNAME记录**：对于项目站点
– 主机记录：`www`
– 指向：`username.github.io`
### 步骤3：在GitHub中设置
1. 进入仓库设置
2. 找到”GitHub Pages”部分
3. 在”Custom domain”字段中输入你的域名
4. 点击”Save”
5. 在仓库根目录创建 `CNAME` 文件，内容为你的域名：
“`
yourdomain.com
“`
## 最佳实践
### 内容组织
– 使用 `_posts` 目录存放博客文章
– 使用 `_pages` 目录存放静态页面
– 使用 `assets` 目录存放图片、CSS和JavaScript
### 主题选择
– 使用GitHub Pages支持的默认主题
– 从GitHub Marketplace选择主题
– 自定义主题
### 性能优化
– 压缩图片
– 最小化CSS和JavaScript
– 使用CDN
– 启用缓存
### 搜索引擎优化（SEO）
– 使用 `jekyll-seo-tag` 插件
– 编写清晰的标题和描述
– 使用语义化HTML
– 提交站点地图
## 高级功能
### 使用GitHub Actions自动构建
创建 `.github/workflows/build.yml` 文件：
“`yaml
name: Build and Deploy
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
– uses: actions/checkout@v2
– name: Set up Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: ‘2.7’
– name: Install dependencies
run: |
bundle install
– name: Build site
run: bundle exec jekyll build
– name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./_site
“`
### 集成第三方服务
– Google Analytics：跟踪网站访问
– Disqus：添加评论功能
– Netlify：增强部署选项
通过GitHub Pages，你可以免费托管专业的静态网站，无论是个人博客、项目文档还是作品集，都可以轻松实现。
