主页/专题实战 1

🌐 用 GitHub Pages 免费建一个网站

你在教程里建的那个仓库,其实可以变成一个全世界都能访问的真正网站—— 不用买服务器、不用花一分钱。跟着做,10 分钟搞定。

✅ 前置要求:已完成主页教程第 1~4 步(有账号、会建仓库、会上传文件)
Step 1

准备一个带 index.html 的仓库

GitHub Pages 的规矩很简单:访问你的网址时,它会把仓库里的 index.html 当作首页展示。所以第一步,仓库里必须有这个文件。

A

新建仓库或复用旧的

可以复用 hello-github,但更推荐新建一个专门当网站的仓库,名字建议叫 my-website(Public 公开)。

💡 小知识:如果你把仓库名取成 你的用户名.github.io,这个仓库就会直接变成你的个人主站,网址更短更帅。
B

新建 index.html 文件

在仓库页点 Add file → Create new file,文件名输入 index.html,粘贴下面这段最简网页代码:

index.html · 你的第一个网页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个网站</title>
</head>
<body>
  <h1>你好,世界!👋</h1>
  <p>这是我用 GitHub Pages 建的网站。</p>
</body>
</html>

拉到最下面,写个提交说明(如 创建首页),点 Commit changes。

Step 2

开启 Pages:一开关,网站就上线

A

进入设置页面

  1. 在仓库页顶部点 ⚙️ Settings(设置)
  2. 左侧菜单找到 Pages(在 "Code and automation" 分组下)
B

选择发布来源

  1. 在 Branch 区域,第一个下拉框选 main,第二个保持 / (root)
  2. 点旁边的 Save 按钮
💡 这句话的意思是:"请把 main 分支根目录下的文件作为网站内容发布。"
C

等待部署,拿到网址 🎉

  1. 刷新页面,等 1~2 分钟,顶部会出现一个绿色提示框,里面有你的网址:
    https://你的用户名.github.io/my-website/
  2. 点开链接——你的网站上线了!把它发给朋友吧。
✅ 从此你拥有了一个永久免费、全球可访问的网站。所有静态网页(HTML/CSS/JS)都能这样托管。
Step 3

以后怎么更新网站?

流程就是主页教程第 4 步的重复:编辑文件 → 写提交说明 → Commit。GitHub 会自动检测到新提交并重新发布,通常 1 分钟内生效。

🔁 更新流程

每次修改都重复这三步

  • 打开要改的文件,点 ✏️ 铅笔编辑
  • 写提交说明,点 Commit changes
  • 等 1 分钟,浏览器按 Ctrl + F5 强制刷新看效果
→

🚀 进阶方向

不满足于一个页面之后

  • 加 CSS 文件美化样式(如 style.css)
  • 去网上找免费 HTML 模板,上传替换
  • 用 Jekyll 主题写博客,或绑定自己的域名
疑难解答

Pages 常见问题

打开网址是 404?
按顺序检查:① 仓库里确实有名为 index.html 的文件(注意全小写,不能叫 Index.html);② 刚点完 Save 的话再等 1~2 分钟;③ Settings → Pages 里 Branch 是否选了 main 并保存成功;④ 仓库是否为 Public(免费账号的私有仓库不能开 Pages)。
改了文件,网站上却没变化?
两件事:① 部署需要约 1 分钟,可以去仓库的 Actions 标签页看 "pages build and deployment" 是否打勾完成;② 浏览器缓存了旧页面,按 Ctrl + F5(Mac:Cmd + Shift + R)强制刷新。
私有仓库可以做网站吗?
免费(Free)账号不行,Pages 需要 Public 公开仓库。升级 Pro 或通过学生认证后,私有仓库也能开 Pages。对新手来说,直接用公开仓库就好。
网址能换成我自己的域名吗?
可以。在 Settings → Pages 的 Custom domain 里填入你购买的域名(如 www.example.com),再回到域名服务商处添加一条 CNAME 解析记录指向 你的用户名.github.io。具体步骤官方文档(docs.github.com 搜 "Custom domain")写得很细。
会被百度/谷歌搜到吗?
会,但新站需要时间被收录。想加快的话,可以在仓库根目录添加 sitemap.xml,并在谷歌 Search Console 提交网址。这属于进阶玩法,初期不用急。
← 返回
GitHub 新手村主页