news 2026/7/12 17:44:19

零基础玩转GitHub Pages：把你的项目免费变成在线网站（保姆级教程）

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
零基础玩转GitHub Pages：把你的项目免费变成在线网站（保姆级教程）

零基础玩转 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 个真实场景）

你可能觉得"静态网站"听起来很弱，其实它的用途非常广：

  1. 📚 个人技术博客—— 写文章、记录学习笔记（配合 Jekyll / Hexo / VuePress）
  2. 📄 在线简历—— 把 HTML 简历放上去，投简历时附个链接，逼格拉满
  3. 📖 项目文档—— 给开源项目写使用文档（很多知名项目都这么做）
  4. 🎮 作品集 / 小游戏—— 展示你做的前端作品、H5 小游戏
  5. 🧪 学习练手—— 把 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：创建仓库

  1. 登录 GitHub，点右上角+→New repository
  2. 填写信息：
    • Repository name：username.github.io（把username换成你的 GitHub 用户名）
    • Public（必须公开，私有仓库的 Pages 需要付费会员）
    • ✅ 勾选Add a README file
  3. 点Create repository

步骤 2：添加一个 HTML 文件

进入仓库后：

  1. 点Add file→Create new file
  2. 文件名输入：index.html
  3. 粘贴以下代码（这是一个超简单的欢迎页）：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>我的第一个 GitHub Pages 网站</title><style>body{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></head><body><divclass="emoji">🚀</div><h1>Hello, GitHub Pages!</h1><p>我的第一个网站已经上线啦～</p><p>部署时间：2024 年</p></body></html>
  1. 滚动到底部，点Commit changes…→ 再点Commit changes

步骤 3：开启 Pages 功能

  1. 进入仓库，点顶部标签Settings（设置）
  2. 左侧菜单找到Pages
  3. 在Build and deployment→Source选择Deploy from a branch
  4. Branch选择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.io

2. 本地修改文件

用 VS Code 打开文件夹，随意修改index.html，或新增 CSS/JS/图片文件。

💡本地预览小技巧：GitHub Pages 不支持本地直接打开预览（会有跨域问题），推荐用 VS Code 的Live Server插件，右键index.html→ Open with Live Server，就能实时预览。

3. 推送到 GitHub（网站自动更新）

gitadd.gitcommit-m"更新网站内容"gitpush

推送后等几秒到一分钟，访问网址就能看到最新内容。这就是"自动部署"的魔力。

六、项目站点怎么搞？（带子路径）

如果你不想占用"用户站点"，而是给某个项目做一个展示页：

  1. 创建一个普通仓库（比如my-demo）
  2. 把 HTML 文件放进去（或放在docs/文件夹里）
  3. Settings → Pages → Branch 选main/root（或main//docs）
  4. 访问：https://username.github.io/my-demo/

⚠️项目站点的大坑：资源路径会多一层/my-demo/！

如果你的 CSS/图片用的是绝对路径/style.css，在项目站点里会 404。解决方法：

<!-- ❌ 绝对路径（项目站点会出错） --><linkrel="stylesheet"href="/style.css"><!-- ✅ 相对路径（两种站点都兼容） --><linkrel="stylesheet"href="./style.css">

七、绑定自己的域名（让网址更专业）

默认的username.github.io已经很好用了，但如果你想要www.yourname.com这样的专属域名，也可以轻松实现。

步骤：

  1. 买域名：去阿里云/腾讯云/Namecheap 买一个域名（几十块/年）

  2. 添加 DNS 解析记录（在域名服务商后台）：

    记录类型主机记录记录值
    CNAMEwwwusername.github.io
    A@185.199.108.153
    A@185.199.109.153
    A@185.199.110.153
    A@185.199.111.153

    这些 IP 是 GitHub 官方提供的，配置完需要等几分钟到几小时生效。

  3. 在仓库里设置：

    • 仓库根目录新建一个文件，名字必须叫CNAME（无后缀）
    • 内容只写你的域名，例如：www.yourname.com

  4. Settings → Pages → Custom domain填入你的域名，点 Save

  5. ✅ 勾选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标签看部署日志，红色 ❌ 会告诉你具体错误。

坑 2：CSS/图片加载不出来

原因：项目站点用了绝对路径/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 自动构建 → 全球可访问的网站 ↑ ↓ └────────────── 随时更新，秒级生效 ←────────────┘

核心要点回顾：

  1. GitHub Pages = GitHub 提供的免费静态网站托管
  2. 两种站点：用户站点（username.github.io）+ 项目站点（带子路径）
  3. 开启方法：仓库 Settings → Pages → 选分支 → Save
  4. 推送代码 = 自动部署，无需手动操作
  5. 支持自定义域名 + HTTPS
  6. 只能放静态资源，不能跑后端代码

现在就动手试试吧！花 3 分钟创建一个username.github.io仓库，把上面的 HTML 代码粘进去，你就能拥有自己的第一个网站了。🎉

💬互动：你在使用 GitHub Pages 时遇到过什么坑？或者用它做了什么有趣的项目？欢迎在评论区分享交流～

如果这篇文章对你有帮助，点个赞👍 + 收藏⭐，让更多小伙伴看到这份保姆级教程！

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/7/12 17:34:39

Substrate区块链开发终极指南：从零到专家的完整学习路径

Substrate区块链开发终极指南&#xff1a;从零到专家的完整学习路径 【免费下载链接】awesome-substrate A curated list of awesome projects and resources related to the Substrate blockchain development framework. 项目地址: https://gitcode.com/gh_mirrors/aw/awes…

作者头像 李华
网站建设 2026/7/12 17:26:05

QUANTAXIS 2.1.0：构建100倍性能的量化金融架构

QUANTAXIS 2.1.0&#xff1a;构建100倍性能的量化金融架构 【免费下载链接】QUANTAXIS QUANTAXIS 支持任务调度 分布式部署的 股票/期货/期权 数据/回测/模拟/交易/可视化/多账户 纯本地量化解决方案 项目地址: https://gitcode.com/gh_mirrors/qu/QUANTAXIS QUANTAXIS …

作者头像 李华
网站建设 2026/7/12 17:25:44

DBeaver 连接神通数据库 7.0：JDBC驱动配置与Public模式数据操作指南

DBeaver 连接神通数据库 7.0&#xff1a;JDBC驱动配置与Public模式数据操作指南在国产化技术快速发展的今天&#xff0c;神通数据库作为国产数据库的重要代表&#xff0c;在企业级应用中扮演着越来越重要的角色。对于习惯使用图形化工具的数据库开发人员和数据分析师来说&#…

作者头像 李华
网站建设 2026/7/12 17:23:47

分布式存储容量规划与成本模型：从IOPS预估到TCO计算的工程方法论

分布式存储容量规划与成本模型&#xff1a;从IOPS预估到TCO计算的工程方法论 一、"又不够用了"——当容量规划变成永无止境的救火 上季度预算评审会上&#xff0c;财务总监拿着我们的存储扩容申请&#xff0c;问了一个直击灵魂的问题&#xff1a;"为什么每季度都…

作者头像 李华