零基础玩转 GitHub Pages把你的项目免费变成在线网站保姆级教程很多同学第一次听说GitHub Pages时都会愣一下这是什么难不难要花钱吗一句话回答它是 GitHub 送给每个开发者的一份免费礼物——只要你有一个 GitHub 账号就能把你的项目变成一个对全世界公开的网站完全免费、无需服务器、无需域名也支持自定义域名。这篇文章会用最通俗的语言 大量截图级的步骤说明带你从 0 到 1 把一个网站部署上线。读完你就能自己建博客、放简历、托管项目文档。一、GitHub Pages 到底是什么用一个生活化的比喻来理解普通 GitHub 仓库 你电脑里的一个文件夹只有你自己能看 GitHub Pages 把这个文件夹变成了一个网站全世界都能通过网址访问官方定义GitHub Pages 是 GitHub 提供的静态网站托管服务Static Site Hosting。你可以直接从 GitHub 仓库发布网站享受以下特性特性说明 完全免费不花一分钱无服务器费用 自带网址自动获得username.github.io这样的域名 自动部署git push推送代码后网站自动更新 支持 HTTPS默认开启安全证书浏览器不报不安全 自定义域名可绑定自己的域名如www.yoursite.com 每个仓库都能用每个账号还能有 1 个主站点 无限个项目站点二、它能用来做什么5 个真实场景你可能觉得静态网站听起来很弱其实它的用途非常广 个人技术博客—— 写文章、记录学习笔记配合 Jekyll / Hexo / VuePress 在线简历—— 把 HTML 简历放上去投简历时附个链接逼格拉满 项目文档—— 给开源项目写使用文档很多知名项目都这么做 作品集 / 小游戏—— 展示你做的前端作品、H5 小游戏 学习练手—— 把 HTML/CSS/JS 练习作业部署上线随时手机查看关键认知GitHub Pages 只能托管静态网站HTML/CSS/JS/图片等不能跑后端代码如 PHP、Java、数据库。如果你的网站需要服务端逻辑得用别的方案如 Vercel、云服务器。三、两种站点类型先搞懂再动手GitHub Pages 分为两种网址格式不同① 用户站点User Site—— 每人只能有 1 个 仓库名必须是username.github.io 网址https://username.github.io ② 项目站点Project Site—— 每个项目都可以有 仓库名任意如 my-project 网址https://username.github.io/my-project该选哪种想做个人主页/博客→ 选用户站点网址更短更干净想给某个项目做展示页 → 选项目站点四、手把手实战3 分钟部署你的第一个网站我们用最简单的方式——直接在网页上操作连 Git 都不用装。步骤 1创建仓库登录 GitHub点右上角→New repository填写信息Repository nameusername.github.io把username换成你的 GitHub 用户名Public必须公开私有仓库的 Pages 需要付费会员✅ 勾选Add a README file点Create repository步骤 2添加一个 HTML 文件进入仓库后点Add file→Create new file文件名输入index.html粘贴以下代码这是一个超简单的欢迎页!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title我的第一个 GitHub Pages 网站/titlestylebody{font-family:Microsoft YaHei,sans-serif;text-align:center;padding:100px 20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;min-height:100vh;margin:0;}h1{font-size:3em;margin-bottom:10px;}p{font-size:1.2em;opacity:0.9;}.emoji{font-size:5em;}/style/headbodydivclassemoji/divh1Hello, GitHub Pages!/h1p我的第一个网站已经上线啦/pp部署时间2024 年/p/body/html滚动到底部点Commit changes…→ 再点Commit changes步骤 3开启 Pages 功能进入仓库点顶部标签Settings设置左侧菜单找到Pages在Build and deployment→Source选择Deploy from a branchBranch选择main文件夹选/ (root)点Save步骤 4等待并访问 大概等1~2 分钟第一次部署稍慢刷新 Pages 设置页顶部会出现一个绿色提示Your site is live at https://username.github.io/点开这个链接你的网站就对全世界公开了⚠️ 如果显示未构建或 404别急再等 1 分钟刷新页面。也可以去仓库的Actions标签查看部署日志。五、用 Git 本地开发进阶推荐网页上直接编辑太局限了。真实开发中我们都在本地写代码再用 Git 推送。1. 克隆仓库到本地gitclone https://github.com/username/username.github.io.gitcdusername.github.io2. 本地修改文件用 VS Code 打开文件夹随意修改index.html或新增 CSS/JS/图片文件。本地预览小技巧GitHub Pages 不支持本地直接打开预览会有跨域问题推荐用 VS Code 的Live Server插件右键index.html→ Open with Live Server就能实时预览。3. 推送到 GitHub网站自动更新gitadd.gitcommit-m更新网站内容gitpush推送后等几秒到一分钟访问网址就能看到最新内容。这就是自动部署的魔力。六、项目站点怎么搞带子路径如果你不想占用用户站点而是给某个项目做一个展示页创建一个普通仓库比如my-demo把 HTML 文件放进去或放在docs/文件夹里Settings → Pages → Branch 选main/root或main//docs访问https://username.github.io/my-demo/⚠️项目站点的大坑资源路径会多一层/my-demo/如果你的 CSS/图片用的是绝对路径/style.css在项目站点里会 404。解决方法!-- ❌ 绝对路径项目站点会出错 --linkrelstylesheethref/style.css!-- ✅ 相对路径两种站点都兼容 --linkrelstylesheethref./style.css七、绑定自己的域名让网址更专业默认的username.github.io已经很好用了但如果你想要www.yourname.com这样的专属域名也可以轻松实现。步骤买域名去阿里云/腾讯云/Namecheap 买一个域名几十块/年添加 DNS 解析记录在域名服务商后台记录类型主机记录记录值CNAMEwwwusername.github.ioA185.199.108.153A185.199.109.153A185.199.110.153A185.199.111.153这些 IP 是 GitHub 官方提供的配置完需要等几分钟到几小时生效。在仓库里设置仓库根目录新建一个文件名字必须叫CNAME无后缀内容只写你的域名例如www.yourname.comSettings → Pages → Custom domain填入你的域名点 Save✅ 勾选Enforce HTTPS强制 HTTPS更安全等 DNS 生效后访问你的域名就能看到网站了八、用静态站点生成器搭博客高阶玩法手写 HTML 太累用静态站点生成器写 Markdown 就能自动生成漂亮网站。三大主流选择工具技术栈适合人群特点HexoNode.js喜欢折腾主题的博主主题丰富中文社区活跃VuePressVue技术文档/博客默认主题简洁搜索强大JekyllRubyGitHub 原生支持无需构建push 即部署以 Hexo 为例超快上手# 1. 安装 Hexonpminstall-ghexo-cli# 2. 初始化博客hexo init my-blogcdmy-blognpminstall# 3. 本地预览hexo server# 访问 http://localhost:4000# 4. 写新文章hexo new我的第一篇文章# 文章会生成在 source/_posts/我的第一篇文章.md用 Markdown 写内容# 5. 生成静态文件hexo generate# 生成到 public/ 文件夹然后把public/文件夹的内容推送到 GitHub 仓库即可。终极懒人方案用hexo-deployer-git插件配置好后一条命令hexo deploy自动推送到 GitHub全自动部署。九、常见坑 解决方案踩过的都帮你列出来了坑 1访问显示 404原因部署还没完成等 1~2 分钟仓库名拼写错误用户站点必须是username.github.io用户名要完全一致仓库是 Private免费版只支持 Public 仓库的 Pages解决去Actions标签看部署日志红色 ❌ 会告诉你具体错误。坑 2CSS/图片加载不出来原因项目站点用了绝对路径/xxx.css。解决改成相对路径./xxx.css见第六节。坑 3更新了代码网站没变化原因浏览器缓存。解决Ctrl F5强制刷新或开无痕窗口访问。坑 4自定义域名访问不了原因DNS 还没生效或 CNAME 文件没配置。解决用ping yourname.com看 DNS 是否解析到 GitHub IP确认仓库根目录有CNAME文件且内容正确坑 5单仓库大小 / 流量限制限制要知道仓库建议不超过 1GB每月带宽100GB每小时构建10 次解决别把大视频/大图片放进去图片用图床或压缩后上传。十、GitHub Pages vs 其他托管方案市面上类似服务不少帮你对比一下方案免费自动部署支持后端上手难度GitHub Pages✅✅❌ 仅静态⭐ 简单Vercel✅✅✅ 支持 Serverless⭐⭐ 中等Netlify✅✅✅ 支持 Functions⭐⭐ 中等云服务器阿里云/腾讯云❌ 需付费需自己配✅ 完全自由⭐⭐⭐ 复杂选型建议纯静态网站 / 博客 / 文档 →GitHub Pages免费省心需要 API 接口 / 动态功能 →Vercel / Netlify需要完全控制权 / 跑数据库 →云服务器总结用一张图回顾 GitHub Pages 的核心流程本地写代码 → git push → GitHub 仓库 → Pages 自动构建 → 全球可访问的网站 ↑ ↓ └────────────── 随时更新秒级生效 ←────────────┘核心要点回顾GitHub Pages GitHub 提供的免费静态网站托管两种站点用户站点username.github.io 项目站点带子路径开启方法仓库 Settings → Pages → 选分支 → Save推送代码 自动部署无需手动操作支持自定义域名 HTTPS只能放静态资源不能跑后端代码现在就动手试试吧花 3 分钟创建一个username.github.io仓库把上面的 HTML 代码粘进去你就能拥有自己的第一个网站了。互动你在使用 GitHub Pages 时遇到过什么坑或者用它做了什么有趣的项目欢迎在评论区分享交流如果这篇文章对你有帮助点个赞 收藏⭐让更多小伙伴看到这份保姆级教程
