想搭个个人博客,看了半天 VPS 价格,最便宜的一年也要两三百,配置 1 核 1G,装完环境就没多少内存了。再一看 GitHub Pages——免费、无限流量、自带全球 CDN、还送你一个
username.github.io的域名?那你为什么还要花钱买服务器?
GitHub Pages 是什么?
GitHub Pages 是 GitHub 提供的静态网站托管服务。你只需要把 HTML/CSS/JS 文件推到一个仓库里,它自动帮你构建并发布成网站。
| 特性 | GitHub Pages | 传统 VPS |
|---|---|---|
| 费用 | 免费 | 最低 $5/月 |
| 流量 | 无限(合理使用) | 按带宽计费 |
| HTTPS | 自动提供 | 需手动配置 Let's Encrypt |
| 部署方式 | git push 自动上线 |
SSH + 手动上传 |
| 维护 | 零运维 | 系统更新、安全补丁 |
| 动态内容 | 不支持(纯静态) | 支持 |
注意:GitHub Pages 只能托管静态网站,不能跑 PHP、Python、Node.js 后端。但对个人博客、项目文档、产品主页来说完全够用。
一、创建仓库
登录 GitHub,点击右上角 + → New repository:
- 仓库名:必须填
你的用户名.github.io(比如我叫xiaozheng,就填xiaozheng.github.io) - 可见性:选 Public(私有仓库要付费才能用 Pages)
- 勾选 "Add a README file"
创建完成后,你的网站地址就是 https://你的用户名.github.io。
二、克隆到本地
git clone https://github.com/你的用户名/你的用户名.github.io.git
cd 你的用户名.github.io
现在这个文件夹还是空的(除了 README.md),接下来往里放网页文件。
三、写第一个页面
在仓库根目录创建一个 index.html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的个人网站</title>
</head>
<body>
<h1>Hello World!</h1>
<p>这是我的第一个 GitHub Pages 网站。</p>
</body>
</html>
提交并推送:
git add index.html
git commit -m "第一个页面"
git push origin main
四、检查部署状态
推送后 GitHub 会自动触发构建。去仓库的 Settings → Pages,看到顶上显示 "Your site is live at https://xxx.github.io" 就说明部署成功了。
如果没看到,检查几点:
| 问题 | 解决 |
|---|---|
仓库名不是 用户名.github.io |
其他仓库要去 Settings → Pages 手动选分支 |
| 分支没选对 | Source 选 main 分支,目录选 / (root) |
| 刚 push 完还没好 | 等 1-2 分钟,首次部署稍慢 |
五、绑定自定义域名
用户名.github.io 虽然能用,但总归不如自己的域名专业。GitHub Pages 支持绑定自定义域名,还自动给你配好 HTTPS。
5.1 域名 DNS 配置
去你的域名 DNS 管理后台,添加一条 CNAME 记录:
| 类型 | 主机记录 | 记录值 |
|---|---|---|
| CNAME | @(或 www) | 你的用户名.github.io |
如果你用的是 www 子域名,主机记录填 www;如果想裸域名(不加 www),主机记录填 @。
5.2 在仓库中配置域名
在仓库根目录创建一个 CNAME 文件,里面只写你的域名:
www.zjunwei.com
然后去 Settings → Pages → Custom domain,填入你的域名,点 Save。GitHub 会自动申请 Let's Encrypt SSL 证书,几分钟后 HTTPS 就生效了。
六、用静态网站生成器(推荐)
手写 HTML 太痛苦了。推荐用静态网站生成器写博客:
| 工具 | 语言 | 特点 |
|---|---|---|
| Hugo | Go | 构建极快,单文件二进制 |
| Hexo | Node.js | 中文社区大,主题多 |
| Jekyll | Ruby | GitHub Pages 原生支持 |
| VitePress | Vue | 适合文档站 |
以 Hexo 为例,三行命令就能跑起来:
npm install -g hexo-cli
hexo init myblog
cd myblog && hexo server
写好文章后,Hexo 一键生成静态文件,直接推到 GitHub Pages 仓库就行:
hexo generate --deploy
七、GitHub Actions 自动部署(省掉手动 build)
每次写完文章手动 hexo generate 再 push 太麻烦。在仓库里加一个 .github/workflows/deploy.yml,让 GitHub Actions 帮你自动构建和部署:
name: Deploy to Pages
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm install
- run: npm run build
- uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
配好后,以后你只需要写文章、git push,剩下的构建、部署全部自动完成。
免费方案的局限性
GitHub Pages 有几点硬限制,用之前心里要有数:
| 限制项 | 具体值 |
|---|---|
| 仓库大小 | 建议不超过 1GB |
| 网站大小 | 不超过 1GB |
| 每小时构建次数 | 10 次 |
| 每月带宽 | 100GB(软限制) |
对于个人博客来说这些限制基本碰不到。就算日 PV 上万的博客,100GB 月带宽也绰绰有余。
GitHub Pages 是目前最省心的免费建站方案,没有之一。不用管服务器、不用配 Nginx、不用操心 HTTPS 证书过期,你只管写内容,剩下的事情 GitHub 全包了。10 分钟搭好,以后所有精力都放在输出内容上,这才是建站该有的体验。