Vibe Coding 入門

前往 GitHub 首頁

開啟瀏覽器，前往 github.com。右上角可以看到 Sign in（登入）和 Sign up（註冊）按鈕。

已有帳號選 Sign in，第一次使用選 Sign up

註冊帳號

可以使用學校 Google 帳號快速註冊。在 Username 欄位填入你想要的使用者名稱。

Username 會成為你網站網址的一部分，請選擇好記的名稱

完成驗證

系統會要求進行帳號驗證，依照畫面指示完成即可（例如拼圖驗證）。

建立新專案

註冊成功後進入 Dashboard 頁面，點選左側的 Create repository 按鈕來建立你的第一個專案。

設定 Repository

在 Repository name 欄位輸入專案名稱，然後點選最下方的 Create repository。

命名建議用英文，並以 - (dash) 連接，例如 my-first-project

開啟 AI 工具

開啟 Gemini（或 ChatGPT、Claude）。記得切換至高階模型，例如 Gemini Pro，以獲得更好的程式碼品質。

輸入 Prompt

描述你想製作的網頁內容。例如：「我想製作單一 html，有關汽柴油使用與環境意識的小遊戲……」，並要求輸出完整 HTML 檔案。

描述越詳細，AI 生成的結果越符合需求

啟用 Canvas 預覽

在工具列中點選 Canvas，讓 Gemini 以即時預覽模式生成程式碼，方便你邊看邊調整。

等待生成完成

AI 會開始撰寫程式碼，右側 Canvas 區域會即時顯示程式碼內容與預覽畫面。

複製程式碼

生成完畢後，點選右上角的「複製」按鈕，將完整的 HTML 程式碼複製到剪貼簿。

確認是複製全部程式碼，不要只複製一部分

開啟記事本

在電腦上開啟記事本（Windows）或任何純文字編輯器。從開始選單搜尋「記事本」即可找到。

貼上程式碼

在記事本中按下 Ctrl + V 將剛才複製的程式碼貼上。你會看到一大段 HTML 程式碼。

儲存為 index.html

選擇「另存新檔」，檔案名稱務必設為 index.html，存檔類型選擇「所有檔案」。

這是最關鍵的步驟！檔名和類型都必須正確，否則無法顯示為網頁

上傳檔案

回到 GitHub 專案頁面，找到並點選 「uploading an existing file」 超連結。

拖曳上傳並 Commit

將 index.html 檔案直接拖曳到網頁上傳區域，上傳完成後點選下方的 Commit changes 按鈕。

進入 Settings

上傳成功後回到 Repository 頁面，點選上方的 Settings 頁籤（齒輪圖示）。

找到 Pages 設定

在左側選單中找到 Pages 選項並點選，這是 GitHub 免費網頁託管服務的設定頁面。

啟用 Pages

在 Branch 區域將下拉選單從 None 改為 main，然後按下 Save 按鈕。

儲存後需等待約 1-2 分鐘讓 GitHub 完成部署

瀏覽你的網頁！

在瀏覽器輸入網址：
https://你的帳號.github.io/你的repo名稱
就能看到你的作品囉！

例如 https://cjsui-utaipei.github.io/my-first-project

更新網頁

未來想修改網頁內容，只要回到 GitHub Repository 頁面，點選 Add file → Upload files 上傳新版 index.html 即可。