9/20/26

26279 直接用chat-GPT 或gemini 寫 HTML,然後貼到 GITHUB

Q:  我可以直接用chat-GPT 或gemini 寫 HTML,然後貼到 GITHUB, 不使用 VS CODE?


A:完全可以,而且這是很多初學者最喜歡的做法。


不需要在電腦安裝 VS Code、Git 或打任何指令,只要透過瀏覽器就能完成所有操作:

1.讓 AI 寫好完整的 HTML 程式碼:AI 生成。
向 ChatGPT 或 Gemini 提出需求(例如:「請幫我寫一個個人名片網頁,包含 CSS 樣式,並把所有 CSS 都寫在同一個 HTML 檔案內」),然後複製生成的整段程式碼。

  • 驗證方式:確認複製的程式碼開頭包含 <!DOCTYPE html>,結尾包含 </html>。
2.在 GitHub 建立 Repository:瀏覽器端。
  1. 打開瀏覽器登入 GitHub,點擊右上角 「+」 > New repository。

  2. 輸入名稱,勾選 Public,並勾選 Add a README file。

  3. 點擊 Create repository。

  • 驗證方式:儲存庫建立完成後,頁面中能看到剛建立的 README.md 檔案。

3.建立 index.html 並貼上程式碼:線上貼上。
  1. 在儲存庫頁面右上角點擊 Add file > Create new file。

  2. 檔案名稱輸入:index.html(必須全小寫)。

  3. 在下方的大文字框中,將 AI 產生的程式碼直接貼上。

  4. 點擊右上角綠色的 Commit changes...,再點一次確認。

  • 驗證方式:回到檔案列表,能看到 index.html 已經存在。

4.開啟 GitHub Pages 發布:啟用上線。
  1. 點擊儲存庫上方的 Settings,左側選單點選 Pages。

  2. 在 Branch 下拉選單將 None 改為 main,保持 /(root),按 Save。

  3. 等待 1~2 分鐘重新整理,上方會出現你的專屬網址。

  • 驗證方式:點擊網址,確認能在瀏覽器中正常看到 AI 設計的網頁。

日後修改網頁的方法

  1. 打開 GitHub 網站,點進你的 index.html。

  2. 點擊右上角的 鉛筆圖示(Edit this file)。

  3. 把 AI 幫你修改後的最新程式碼覆蓋貼上,點擊 Commit changes... 儲存。

  4. 等 1 分鐘左右重新整理網頁,內容就會自動更新。

提醒 AI 寫扣時的一個小技巧

請 AI 寫網頁時,建議加上一句:「請將所有 CSS 樣式和 JavaScript 腳本都直接寫在同一個 index.html 裡面(不要拆成 style.css 或 script.js 外部檔案)」。這樣你每次就只需要複製貼上這一個檔案,完全不用煩惱檔案連結路徑的問題。