企业官网建设流程全解析

免费把 HTML5 游戏发布到公网：GitHub Pages 部署实战

【免费下载链接】github-pagesCreate a site or blog from your GitHub repositories with GitHub Pages.项目地址: https://gitcode.com/GitHub_Trending/gi/github-pages

你的 HTML5 游戏做完了，可要挂到公网上，得买服务器、配 DNS、维护 HTTPS 证书，太重了。GitHub Pages 是 GitHub 平台官方的免费静态托管服务：把游戏页放进仓库，commit 一次，公网地址就上线，服务器一件都不用管。

三分钟跑通：clone 到 push，commit 一次就上线

commit 就是提交一次代码。最短路径就四步：

git clone https://gitcode.com/GitHub_Trending/gi/github-pages cd github-pages # 把游戏的 index.html 和 js、css 资源放进根目录 git add . && git commit -m "add html5 game" git push origin main

再到仓库设置的 Pages 项里，选 main 分支和 / 根目录当发布源。push 完等 1~3 分钟，打开username.github.io/github-pages，游戏画面能加载出来，就算上线了。

平台替你在干的三件事：自动发布、CDN 加速、版本回滚

自动发布：它替你解决了"改完代码还得手动部署"。你 commit 到发布分支，平台就自动构建并上线，commit 这个动作本身就是部署的触发点。

全球 CDN + HTTPS：它替你解决了"加载慢、浏览器标不安全"。页面缓存在全球 CDN 边缘节点，玩家首屏时间更短；证书的申请和续期平台统一做，你不用碰。

版本回滚：它替你解决了"线上坏了不好修"。每次 commit 都是一个版本快照，把分支退回上一个提交，Pages 按恢复后的内容重新发布，回滚的成本就是一条 git 命令。

进阶路线：能用、像样、好维护

🚀 能用：main 分支直接发布

关键命令：git push origin main。避坑提醒：index.html 必须躺在发布源根目录，放进子目录里首次访问就是 404。

🔒 像样：CNAME 两行搞定自定义域名

echo "game.example.com" > CNAME git add CNAME && git commit -m "bind custom domain" && git push

避坑提醒：域名服务商 DNS 面板里加的 CNAME 记录，要和这个文件内容一字不差。DNS 生效后，新域名的 HTTPS 证书自动签发。

🧩 好维护：dist 推上 gh-pages，源码线上解耦

npx gh-pages -d dist -b gh-pages

避坑提醒：main 只放源码、管日常迭代，别再往 gh-pages 推源码，产物和源码各走各的分支。

不对劲时这样自查：四个高频症状

站点不更新：根因是 Pages 发布源指向了另一个分支。到仓库设置 Pages 项，把源改成你实际提交的分支。

首次访问 404：构建发布需要 1~3 分钟。稍等后看部署日志，再确认 index.html 在发布源根目录。

音频、图片全 404：HTML 里用了绝对路径引资源。改成./js/game.js这类相对路径，并确认资源文件已随代码提交。

自定义域名访问失败：CNAME 文件和 DNS 记录不一致。核对两处配置一致，等 DNS 生效，一般不超过 48 小时。

顺手接上生态：gh-pages 包与 CI 自动发布

npm 的gh-pages包就是干这事的：把推送命令写进package.json的 scripts，每次构建完自动部署。有 CI 环境的话，把这条命令放进流水线，push 之后全程自动上线，过程都留在仓库日志里。

收尾：三步行动清单，先做第一件事

免费把 HTML5 游戏发布到公网，就这三步：

• 把 index.html 加核心玩法的最小版本提交到 main 分支，打开username.github.io/github-pages验证能玩
• 加 CNAME 文件、配好 DNS，绑上自己的域名
• 用 npx gh-pages 把 dist 产物推到 gh-pages 分支，和源码彻底解耦

仓库结构与基础用法见 README.md。

【免费下载链接】github-pagesCreate a site or blog from your GitHub repositories with GitHub Pages.项目地址: https://gitcode.com/GitHub_Trending/gi/github-pages