用 AI 做你的第一個網頁｜零基礎 30 分鐘完成

為什麼美業人需要一個網頁？

你的指甲做得很漂亮，你的客人也都說好。但你有沒有想過，那些還不認識你的人，根本找不到你？

IG 很好，但 IG 上的內容不會被 Google 搜到。當一個人搜尋「台北日式美甲推薦」，跳出來的是有網頁的店家。你做得再好，沒有網頁就是隱形的。

以前做網頁要找工程師，要花三萬五萬。現在用 AI，30 分鐘就能做出一個乾淨、好看、會被搜到的個人頁面。不用學程式，不用花錢。

場景：美甲師小薰的故事

小薰在板橋做日式美甲三年了，IG 粉絲快兩千。但新客人幾乎都靠朋友介紹，搜尋「板橋日式美甲」完全找不到她。她用這個方法花了一個下午做好網頁，第二個月就有客人說「我是 Google 搜到你的」。

你需要準備什麼

只要三樣東西，全部免費。

第一，一台電腦或筆電。手機也可以但電腦比較方便。

第二，一個 GitHub 帳號。等一下會教你怎麼申請，三分鐘的事。

第三，ChatGPT 或 Claude。免費版就夠用了。

這是馥靈之鑰美業合作夥伴的專屬內容

加入美業平台，解鎖所有深度教學、模板庫、實戰攻略。
讓 AI 幫你的美業事業翻倍成長。

了解美業合作方案

或直接 LINE 諮詢

Step 1：申請 GitHub 帳號

打開 github.com，點右上角「Sign up」。輸入你的 email、設一個密碼、取一個帳號名稱。帳號名稱建議用你的品牌名，像是 xiaoxuannails 或 beautybyami。

為什麼用 GitHub？因為 GitHub Pages 是完全免費的網頁託管服務。你把網頁檔案放上去，它自動幫你變成一個真正的網站。不用租伺服器，不用付任何費用。

小提醒

帳號名稱就會變成你的網址。如果你的帳號叫 xiaoxuannails，你的網站網址就是 xiaoxuannails.github.io。所以取名的時候想一下。

Step 2：用 AI 生成你的網頁

打開 ChatGPT 或 Claude，把下面的 Prompt 複製貼上，然後把括號裡的資訊換成你自己的。AI 會直接給你一整份 HTML 程式碼。你不需要看懂它，只要複製就好。

Prompt 模板：生成個人網頁

幫我做一個美業個人品牌網頁，用純 HTML + CSS，一個檔案就好。我的資料： - 品牌名稱：（你的品牌名） - 服務項目：（例如：日式美甲、凝膠美甲、手足保養） - 地點：（例如：台北市大安區） - 預約方式：（例如：LINE @xxxx） - IG：（你的 IG 帳號） - 一句話介紹自己：（例如：做指甲是我表達溫柔的方式）風格要求： - 手機優先的響應式設計 - 配色用米白底 + 大地色系，有質感 - 要有以下區塊：品牌介紹、服務項目與價目、作品展示區（先放placeholder）、預約方式、聯絡資訊 - 底部要有 Google Map 嵌入的 placeholder - SEO 基本設定：title、description、Open Graph - 乾淨簡約，不要太花俏

Step 3：建立 GitHub 儲存庫

登入 GitHub 之後，點右上角的「+」，選「New repository」。

Repository name 填你的帳號名稱加上 .github.io。例如你的帳號是 xiaoxuannails，就填 xiaoxuannails.github.io。這個命名格式很重要，GitHub 才知道要幫你生成網站。

其他設定都不用改，直接按綠色的「Create repository」。

Step 4：把程式碼放上去

建好儲存庫之後，GitHub 會顯示一個空白頁面，上面有幾個選項。點「creating a new file」這個連結。

在檔案名稱的欄位輸入 index.html。然後把 AI 生成的那段程式碼全部貼進去。

往下捲，找到綠色的「Commit new file」按鈕，按下去。

等大約一到兩分鐘，打開瀏覽器輸入你的網址（例如 xiaoxuannails.github.io），你的網頁就上線了。

上線後看到空白頁？

通常是 GitHub Pages 還沒部署完成。等兩分鐘再刷新。如果超過五分鐘還是空白，去 Settings → Pages 確認 Source 是「Deploy from a branch」，Branch 選「main」。

Step 5：加上你的作品照片

網頁做好了，但上面的圖片還是 placeholder。你需要把真正的作品照放上去。

最簡單的方法：把照片上傳到 Imgur（imgur.com），複製圖片網址，然後用 AI 幫你替換。

Prompt 模板：替換作品照片

這是我的網頁程式碼：（貼上你的 index.html 全部內容）請幫我把作品展示區的 placeholder 圖片換成以下網址： 1. https://i.imgur.com/（你的圖片1）.jpg 2. https://i.imgur.com/（你的圖片2）.jpg 3. https://i.imgur.com/（你的圖片3）.jpg 每張圖下面加一行小字說明： 1.（例如：日式暈染春季限定款） 2.（例如：法式漸層氣質款） 3.（例如：手繪花卉客製設計）

Step 6：讓 Google 找到你

網頁上線不代表 Google 馬上搜得到你。你需要主動跟 Google 說：「我的網站在這裡。」

打開 Google Search Console（search.google.com/search-console），用你的 Google 帳號登入。選「URL prefix」，輸入你的網址。驗證方式選「HTML tag」，把那段 meta tag 加到網頁的 head 裡面。

Prompt 模板：SEO 優化

這是我的網頁程式碼：（貼上你的 index.html 全部內容）請幫我做以下 SEO 優化： 1. 在 head 裡加入這段 Google 驗證碼：（貼上 Google 給你的 meta tag） 2. 優化 meta description，融入這些關鍵字：（例如：板橋美甲、日式美甲推薦、凝膠美甲預約） 3. 加入 LocalBusiness 的 Schema 結構化資料 4. 確保所有圖片都有 alt 標籤 5. 加入 Open Graph 標籤，讓分享到 LINE 和 FB 時有預覽圖

Step 7：綁定你自己的網域（選做）

xiaoxuannails.github.io 已經可以用了，但如果你想要更專業的網址，像是 xiaoxuannails.com，也很簡單。

去 Namecheap 或 GoDaddy 買一個網域，一年大約 300 到 500 台幣。買好之後在 GitHub 的 Settings → Pages → Custom domain 填入你的網域，然後在網域商那邊設定 DNS 指向 GitHub 的 IP。

聽起來很複雜，但其實就是填四個數字的事。而且你可以直接問 AI 怎麼設定，它會一步步教你。

做好之後的下一步

網頁上線只是第一步。接下來你可以做這些事情讓它更完整。

第一，每個月更新一次作品照片。新作品放上去，舊的換掉。Google 喜歡有在更新的網站。

第二，把網址放到你的 IG 個人簡介、LINE 個人頁面、Google 商家檔案。

第三，請客人幫你在 Google 商家檔案留評價。評價越多，搜尋排名越前面。

你的網頁做好了嗎？

如果你在過程中卡住了，或是想要更進階的客製化，歡迎加入馥靈之鑰美業合作平台。我們有完整的手把手教學和即時諮詢。

了解美業合作方案 LINE 諮詢