零成本上线个人网站，GitHub Pages 保姆级实战手册（从注册到 HTTPS 全流程）

适用人群：完全没买过服务器、没碰过命令行的设计系学生小林；手头有个闲置域名但不知道怎么解析的运营阿May；以及所有想搭一个简历页、作品集或技术博客，却不想为虚拟主机每月掏50块钱的“白嫖党”，本文默认你用的是 Windows 或 macOS 系统，浏览器为 Chrome 或 Edge。

第一步：注册 GitHub 账号（5分钟）

打开 github.com，点击 Sign up,注意两点：

登录后，右上角 “+” 号选择 New repository。

仓库名：必须填 你的用户名.github.io（例如你叫 tom，就填 tom.github.io），这是 GitHub Pages 的硬性规定,别的名字一律不认。
权限：选 Public（公开），如果你选 Private，免费版无法启用 Pages 服务。
初始化：勾选 Add a README file,方便后面直接编辑网页。

点击 Create repository 完成，此时你的网站“空壳”已建好。

进入仓库后，点击 Add file → Create new file，命名为 index.html（必须是这个名字，这是站点访问的默认首页）。

在编辑框里粘贴以下代码：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的第一个网站</title></head>
<body>
<h1>🎉 Hello World! 我上线了！</h1>
</body>
</html>

点击下方绿色 Commit changes 按钮。

重要一瞬：点击仓库页面顶部的 Settings → 左侧菜单拉到 Pages（在“Code and automation”分类下），在 Branch 处选择 main（不是 master），文件夹选 / (root)，点击 Save。

等待1-2分钟，浏览器新开标签页访问 https://你的用户名.github.io，你会看到你的网页，如果看到 404，不要急，是缓存延迟，刷新三次仍不行，就去仓库的 Actions 标签页看构建日志,大概率是分支选错了。

如果你有域名，myname.com，想让它指向 GitHub Pages,进行如下操作。

域名解析处（你的域名商后台）：

添加两条记录（A 记录），指向 GitHub Pages 两套 IP（目前是 199.108.153 和 199.109.153，务必去 GitHub 官方文档核对最新值）。
添加一条 CNAME 记录，主机记录填 www，指向 你的用户名.github.io。

GitHub 仓库里配置：

回到仓库 Settings → Pages → 在 Custom domain 输入框填你的域名（不带 www），点 Save。
重要：GitHub 会要求你在仓库根目录创建一个名为 CNAME 的文件（无扩展名），里面只写一行 myname.com，如果不创建，每次 push 代码后自定义域名会失效,这是新手最常踩的坑。

HTTPS 强制开启：在 Pages 设置页面，勾选 Enforce HTTPS（必须等证书自动签发，通常几分钟，如果灰色不可选，说明 CNAME 没配置对）。

个人介绍页用 html 够了，但如果你想写技术博客，推荐用 VuePress，这里的关键是本地操作 + 推送 GitHub。

安装环境：去 nodejs.org 下载 LTS 版本，一路默认安装，打开命令提示符（win）或终端（mac），输入 node -v 和 npm -v,有版本号即可。

创建项目：

mkdir my-blog && cd my-blog
npm init -y
npm install -D vuepress@next

写配置：在 docs/.vuepress/config.js 里设置导航栏、主题，这是纯 JS 语法,不会就抄官方文档。
部署核心：在项目根目录新建 deploy.sh 文件，粘贴以下代码（这一步是把编译后的静态文件推送到你那个 用户名.github.io 仓库）：
```
#!/usr/bin/env sh
set -e
npm run docs:build
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:你的用户名/你的用户名.github.io.git main
```
注意：这里用的是 SSH 协议，你需要在 GitHub 设置里添加本机的 SSH 公钥（教程：设置→SSH and GPG keys→New SSH key）。

删掉仓库重建：如果你之前把仓库名打错了（myblog.github.io），直接进仓库 Settings 最底部 Danger Zone 点 Delete，重新建一个即可,不用找客服。
中文乱码：HTML 文件里务必写 <meta charset="UTF-8">，否则浏览器默认用 locale 编码显示成乱码。
自定义域名突然 404：检查两个 CNAME 是否一致——GitHub 里保存的，和你域名商后台的解析记录，如果域名商那边你把 A 记录删了，只留 CNAME 指向 github.io，也会挂，因为 CNAME 无法做裸域（不带 www 的）解析，必须用 A 记录到官方 IP。
修改代码后网站不更新：清浏览器缓存（Ctrl+Shift+R），有时 GitHub 的 CDN 缓存最长有 10 分钟延迟,这是正常现象。
图片显示裂了：仓库内图片路径要用绝对路径（/images/a.png）或者相对路径（./images/a.png），不能用 file:///C:/... 这种本地路径。

打开你的自定义域名，点击所有链接、刷新几次、手机流量访问一次（确认不是本地缓存），在输入框检查地址栏左上角有没有“锁”图标（HTTPS 生效）。

如果没有问题，恭喜你——你现在拥有一个零成本、免服务器、免备案、自带全球 CDN 加速的个人网站，你无需再为续费发愁,这份网站会一直陪伴你直到你主动删掉它。

去把地址丢到朋友圈吧，记得配文：“自己搭的，也就花了两小时。”