用 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 諮詢