🌸 【專屬資源】免寫程式!一鍵套用 AI 賞櫻地圖模板與提示詞
嗨大家!最近正是賞櫻季,我用 AI 工具快速做了一個「賞櫻地圖」的網頁 App。 🔗 先來玩玩看成品:https://sakura-map-pi.vercel.app/ 歡迎來到實戰單元!看到上面那個超酷的櫻花地圖了嗎? 現在,我們要把它變成「你自己的」網頁,而且完全不用寫任何一行程式碼。 只要跟著以下 3 個步驟「點擊、上傳」,5 分鐘後你就會擁有一個專屬的網頁連結,可以傳給 Line 的親朋好友炫耀囉!😎 📍 第一步:下載地圖模板(取得武器) 1. 請點擊這篇貼文下方的附件。 2. 下載我幫你準備好的 index.html 檔案,把它存在你的電腦桌面。(⚠️ 注意:請確保檔名就是 index.html,不要改名喔!) 📍 第二步:註冊 GitHub 並上傳檔案(建立雲端基地) GitHub 就像是工程師的 Google Drive,我們要把檔案存上去。 1. 前往 GitHub 官網,點擊右上角的 Sign up,用 Email 註冊一個免費帳號。 2. 登入後,點擊左上角綠色的 「New」 按鈕來建立一個新專案(Repository)。 3. Repository name(專案名稱):隨便取一個英文名字,例如 my-map。 4. 往下捲動,點擊綠色的 「Create repository」。 5. 在下一個畫面,找到並點擊 「uploading an existing file」(上傳現有檔案)這行藍色小字。 6. 把你剛剛下載在桌面的 index.html 拖曳進去,最後點擊下方的綠色按鈕 「Commit changes」,檔案就上傳成功啦!🎉 📍 第三步:註冊 Vercel 並發布上線(一鍵變網頁!) Vercel 是一個超強的免費平台,能把你在 GitHub 的檔案直接變成一個網址。 1. 前往 Vercel 官網,點擊 Sign up。 2. 註冊時,請直接選擇 「Continue with GitHub」(用剛剛註冊的 GitHub 帳號連動登入)。 3. 登入後,點擊右上角黑色的 「Add New...」 ➔ 選擇 「Project」。 4. 這時你會看到你剛剛在 GitHub 建立的 my-map 專案出現在畫面上,請點擊旁邊的 「Import」。 5. 什麼都不用改,直接勇敢地按下 「Deploy」(部署)! 6. 等待大約 30 秒,畫面會撒花慶祝 🎊,這時候點擊畫面上的網址,你的專屬地圖就正式誕生在網路上了! 🎯 課後小任務: 鼓勵大家套用這個模板,改成你自己的版本(例如:台北拉麵地圖、全台秘境咖啡廳地圖),做好之後把連結貼在下方留言區跟大家分享吧!👇