Vibe Coding Github 部署网页

大家是否已经使用 AI 写出一手漂亮的网页程序码了呢？虽然 Vibe Coding 可以产生漂亮的网页或实用的功能，但只能在 AI 工具里进行体验，总感觉缺少了些什么。这篇文章将带领大家进入 GitHub 的世界，透过简单的步骤，把各种创意从电脑硬盘释放到互联网上，让全世界的人只要点开网址，就能看见精彩的作品！

更多参考：Vibe Coding 全方位开发导读

快速导览：

• 什么是 GitHub？
• GitHub 可以做什么？
• 使用 GitHub 的优缺点
• GitHub 的使用限制
• GitHub 上传文件的方式
• Github 起手式：建立 GitHub 储存库 ( Repository )
• 建立 gh-pages 分支，产生对外公开网址
• 上传第一个网页
• 修改网页内容，重新上传部署

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

什么是 GitHub？

GitHub 是由 Tom Preston-Werner、Chris Wanstrath、P. J. Hyett 和 Scott Chacon 几位创办人共同建立，最初的目的只是为了让开发者更方便地分享与协作使用 Git 管理的程序码，而随着它的快速成长，在 2018 年被微软 ( Microsoft ) 以 75 亿美元收购，这象征着 GitHub 正式确立了在软件开发界的霸主地位。

发展至今，GitHub 已经进入全盛时期，成为全球最大的程序码代管与社群平台，下列是几个 Github 的特点：

• 全球规模

  拥有超过一亿名活跃开发者，高达数亿个托管专案数量。

• 开发者的数字履历

  工程师通常会透过 GitHub 页面来取代传统纸本履历。

• AI 与开源软件的圣地

  最火热的 AI 技术、各种机器学习框架，甚至是 Vibe Coding 的许多工具与 Prompt，绝大多数都是在 GitHub 上进行开发与共享。

• 主要使用族群

  开源专案维护者、协作开发团队、以及需要展示作品集的个人开发者。在 Vibe Coding 的时代，许多独立开发者、大学生，甚至是刚接触程序的爱好者，都会使用 GitHub 存放或展示“Prompt”与“成果”。

GitHub 可以做什么？

除了“存文件”，GitHub 还有许多强大的功能：

• 版本管控 ( Version Control )

  记录程序码的每一段的修改纪录，如果 AI 改坏了网页，随时可以“坐时光机”回到上一个正常运行的版本。

• 静态网页空间 ( GitHub Pages )

  把 HTML/CSS/JS 文件放在 Github，产生一个专属网址，让它变成真正的网站。

• 协作开发

  邀请朋友一起协同编辑同一个专案，或者去“叉 ( Fork )”别人的程序码来研究学习。

• GitHub Actions

  自动化流程。例如：上传程序码之后，它会自动帮你检查错误或部署网页。

使用 GitHub 的优缺点

使用 GitHub 有下列的优缺点：

优点：

• 完全免费：对于个人静态网页而言，几乎不需要花钱。
• 方便管理：所有的作品一目了然，适合建立个人数字作品集。
• 业界标准：学会 GitHub 是通往软件开发领域的必经之路。
• 整合性强：主流 AI 工具都能与 GitHub 完美连动。

缺点：

• 新手门槛较高：必须认识 Commit、Push、Repository 等专业术语。
• 全英文界面：对于英文不好的学用户，英文界面稍微有些压力。
• 公开性问题：免费版的“公开存储库”会向所有人公开源代码。

GitHub 的使用限制

虽然 GitHub 很大方，但还是有一些基本的规范：

• 文件大小限制

  单一文件建议不超过 50MB，整个专案 ( Repo ) 建议控制在 1GB~5GB 内。

• 静态网页限制

  GitHub Pages 只能运行“纯前端”程序码 ( HTML/CSS/JS )，不能执行数据库 ( 如 MySQL ) 或后端语法 ( 如 PHP、Python 网页服务器 )。

• 流量与容量

  免费版每个月有 100GB 的流量限制 ( 对于个人小专案而言非常足够 )。

• 隐私权

  免费账号虽然可以开“私有库”，但如果打开 GitHub Pages 网页功能，该专案必须设定为“公开 ( Public )”（ 升级付费版可变成私有 ）。

GitHub 上传文件的方式

根据用户的技术熟悉度，可以选择以下几种方式：

• 网页上传 ( 最简单 )

  类似使用 Google 云端硬盘的方式，直接在 GitHub 里选择上传文件，选择要上传的网页文件就可以上传 ( 或拖拉文件上传 )，适合少量文件的小作品。

• Git 视觉化工具 ( GitHub Desktop、Fork、SourceTree 等 )

  使用 GitHub 官方的桌面软件或其他 Git 视觉化工具，就可以透过图形化界面观察专案状况，并运用界面功能就能完成上传或修改命令，适合新手或喜欢视觉化界面的专业工程师。

• Command Line ( Git 指令 )

  使用终端机输入 Git 指令进行上传、合并或修改的功能 ( git commit、git push 等 )，属于专业工程师的做法。

• IDE 直接同步

  使用 VS Code 或 Cursor 等程序码编辑器 ( IDE ) 时，内建有源代码管理功能，写完程序码直接按一下就能上传，同样属于专业工程师的常见做法。

Github 起手式：建立 GitHub 储存库 ( Repository )

在开始上传之前，需要先在注册 GitHub 账号，进入 Github 网站后，点击右上角“Sign Up”按钮，就可以注册账号 ( 可以直接使用 Google 第三方注册登录，也可以输入 email 注册 )。

前往 Github：https://github.com/

不论用何种方式注册，都需要建立一个“Username 用户名称”，只能使用英文数字加上破折号“-”。

注册账号进入 Github 后，点击左上角“Create Repository”建立一个储存库 ( Repository )，储存库可以存放专案的程序码或相关数据 ( 如果用户界面设定为暗色系，背景就会是黑底白字，下方画面是亮色系画面 )。

进入建立储存库画面后，在上方输入字段输入这个储存库的名称，接着并进行一些储存库设定 ( 建议勾选“Add README”，相关说明参考下表 )，完成后点击最下方的绿色按钮“Create repository”，专属的储存库就建立完成。

点击建立按钮后，如果看到下方的画面，表示储存库已经建立完成，可以开始准备上传文件，这时候储存库中会存在一个名为“README.md”的文件。

建立 gh-pages 分支，产生对外公开网址

如果只是建立储存库，仍然无法让网页变成真正的网站，如果要让储存库变成网页空间，必须要建立“gh-pages”分支，透过 Github Pages 的功能，让储存库变成网页空间。点击左上方“main”下拉选单，选择“View all branches” 查看所有分支。

Git 里面的分支类似“树干和枝叶”，以 main ( 主线、主干 ) 沿伸出不同的分支 ( branch )，不同分支或主干互不干扰，但又可以互相整合。

点击右上方“New branch”建立新分支。

输入分支名称“gh-pages”，特别注意，只能够这个名称，其他所有名称都不行！完成后点击“Create new branch”。

建立完成后，在画面中就可以看到 gh-pages 分支。

点击最上方的“Setting”，从左侧选择“Pages”，中间画面就可以看到这个储存库专属的网址。

因为还没有上传任何文件，所以点击网址后，只会看到刚刚建立储存库时自动产生的 README.md 内容，但这已经是一个公开的网址，全世界所有人都可以看到这个网站了。

上传第一个网页

建立储存库和公开网址后，接着要把网页文件上传到储存库里，如果没有网页文件，可以先右键下载下方的范例网页，下载后打开网页可以看到下方画面。

直接右键“另存链接”，或打开网页后点击鼠标右键“另存新档”：范例网页

点击上方的“Code”回到刚刚建立的储存库页面，切换为“gh-pages”的 branch ( 特别注意，要切换成这个 branch 才会是分享的网页 )，接着点击“Add file > Upload files”。

如果已经会使用 Git 或相关视觉化工具，直接在工具里面操作会更方便。

进入上传页面之后，上传准备要发布的网页文件，范例使用“hello-world.html”这个文件，完成后输入这次 Commit 的名称 ( 注解非必填，可自行填写相关说明 )，完成后按下“Commit changes”。

上传完成后，回到“Code”画面，就会看到 gh-pages 分支里出现了 hello-world.html 这个文件，如果切换回 main 分支就没有这个文件，因为这个文件是属于 gh-pages 分支。

注意，网站“首页”的文件名称必须是 index.html，GitHub Pages 会自动寻找这个名称作为首页，如果命名为 home.html 或其他名称，单纯输入主网域网址就不会显示，必须要输入完整档名，例如 https://xxxx.github.pages/ 会指向到 https://xxxx.github.pages/index.html。

回到刚刚的网址，在网址后方加上文件名称，就可以看到网页啰！这也表示网页正式部署成功！

修改网页内容，重新上传部署

如果网页内容有修改，也可以运用同样的方式重新上传，如果想快速尝试，可以下载下方的范例网页文件，解压缩之后可以得到一个如下方架构的文件夹 ( 首页文件 index.html、img 和 test 文件夹、img 文件夹里有一张 mona.jpg，test 文件夹里有 a1.html 和 a2.html )。

范例网页文件 ( 需解压缩 )：vibe-coding-demo.zip

回到自己的 Github 储存库 ( Repository )，点击 Code 页面左上角 branch 下拉选择“gh-pages”，接着点击“Add file > Upload files”。

如果已经会使用 Git 或相关视觉化工具，直接在工具里面操作会更方便。

进入上传页面之后，把修改的内容 ( 可以使用范例网页文件 ) 全部上传，完成后输入这次 Commit 的名称 ( 注解非必填，可自行填写相关说明 )，完成后按下“Commit changes”。

完成后回到 code 页面，可以看到在 gh-pages 的 branch 里已经出现刚刚上传的文件。

切换到 setting 页面，点击左侧选单 pages，点击公开网址，就可以打开网页。

下图是使用范例网页，打开后就可以看到简单的文字以及图片。

根据网页的大小，Github 会有 1～5 分钟的处理时间，处理后就可以看到网页。

小结

GitHub 不仅是存放程序码的地方，更是展现创意的舞台，在 Vibe Coding 的过程中，已经可以透过 AI 解决逻辑问题，而 GitHub 更近一步解决展示与管理的问题，未来可以把更多的 AI 生成作品部署上去，打造一个属于自己的 AI 作品集网站！

延伸阅读

Vibe Coding 的重点都不在于“写程序”，而是为了配合程序的各种“准备工作”，下方列出 Vibe Coding 相关的教学，透过一系列的教学，就更能掌握正确且顺畅的开发流程:

• 认识 Vibe Coding：程序不再是拼逻辑，而是拼“感觉”
• Vibe Coding 新手入门：从蓝图规划到 AI 开发的思维转型
• Vibe Coding 重要的准备工作：架构流程图
• Vibe Coding 网页必备知识：开发者的“沟通工具箱”
• Vibe Coding Python 必备知识：AI 与 Colab 打开程序直觉
• Vibe Coding 固定网页样式：解决样式不一致的恼人问题
• Vibe Coding 图片处理心法：从云端空间到 Base64 的完美配置
• Vibe Coding 玩家必备的 SVG 进阶操作指南
• Vibe Coding 字体指南：用文字风格定义网页灵魂
• 下载 Vibe Coding 网页程序码，掌握程序码的主导权
• Vibe Coding 实战：利用 Google Apps Script 打造免费网页部署基地
• Vibe Coding 实战：使用 GitHub 部署你的网页作品
• AI 时代的轻量级后端：当 Vibe Coding 遇上 Google Sheets
• 从灵感到即时同步：Vibe Coding 遇上 Firebase Realtime Database
• 数字灵魂的存放处：Vibe Coding 串接 Firebase Firestore
• 拒绝数据裸奔！Vibe Coding 必备 Firebase App Check 安全防护指南
• Vibe Coding + Firebase Authentication 打造顺畅的注册登录体验
• Vibe Coding 将 Google Drive 变身最强文件后端
• 灵感即程序：用 Gemini API 打开你的 Vibe Coding 新时代
• Vibe Coding 极速打造 LINE Bot 智能机器人
• Vibe Coding 实战：免写程序！把 Google 试算表变成超精美点餐系统
• Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
• Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
• Vibe Coding 实战：打造自己的英文单字卡！

意见反馈