上週四上完 Karen 的直播課程後一直在忙, 都沒時間完成作業, 今天晚上要上第二堂課了, 趕緊來把作業寫完吧! 我已經在筆電安裝好 Vercel CLI 與 Vercel 佈署技能包 agent-skills, 參考 :
先到 Claude Console 儀錶板查看目前的儲值餘額, 目前帳上有 9.8 美元 (上回安裝沒有進 Claude Code 啊, 奇怪哪裡用掉 0.2 美元?), 方便專案完成後計算花了多少錢 :
第一堂課的作業是用 Claude Code 將一個文件製作成網站, 並發佈到 Vercel 平台上.
首先建立一個專案資料夾, 然後切換到此資料夾下開啟 claude :
D:\claude_code\projects\mkdir karen_class_1
D:\claude_code\projects\cd karen_class_1
D:\claude_code\projects\karen_class_1\clasude
接下來準備網站素材, 剛好我今天用 agy 製作了 11 月底京都奈良賞楓之旅的行程規劃書, 那就用這個 pdf 檔作為素材, 把這次的旅遊行程製作成一個 Web app 吧! 參考 :
這份行程規畫書我放在 GitHub :
將此 pdf 檔放在專案目錄 karen_class_1 下後在 Claude Code 輸入提示詞即可 :
>請讀取專案資料夾下的行程規劃書 "20261123-28京都大阪奈良賞楓之旅行程規劃_v1.pdf", 根據此文件內容幫我設計一個京都大阪 6 日家族賞楓旅遊的一頁式行程網站。採用溫暖的秋日楓紅配色，包含出發倒數計時、Day 1 到 Day 6 的時間軸切換頁籤、每個景點的交通與長輩友善提示卡片，以及一個使用 LocalStorage 記錄勾選狀態的行前打包清單，介面需針對手機瀏覽最佳化。
然後 Claude 就開始進行讀檔與網頁設計, 只用了 4 分鐘左右就完成了 :
這時專案目錄下就多了一個 index.html 檔 (因為是一頁式網頁), 點擊用瀏覽器開啟, 發現效果真不錯哩, 功能非常完整, 布局也很俐落, 可以發布到 Vercel 交差啦 :
回到 Clude Code, 直接叫它幫我佈署 :
> 請幫我佈署到 Vercel
只花了一分鐘就搞定了 :
點中間的預覽網址 (preview link) 會開啟瀏覽器顯示此 Web app, 但若分享給別人則會要求登入 Vercel, 因為這是非正式網址, Vercel 專案預設開啟了部署保護機制, 必須登入開發者的 Vercel 帳號才能看到網站.
取得正式網址須進入 Vercel 儀錶板後點擊專案 :
在 Domain 項目下就可以找到正式網址了 :
沒有留言 :
張貼留言