用 AI 做你的第一个网页|零基础 30 分钟完成|馥灵之钥
AI Tutorial ✦ Build Your Website

用 AI 做你的第一个网页
零基础 30 分钟完成

你的作品很美,但客人搜不到你。
一个个人网页,就是你 24 小时不打烊的名片。

馥灵之钥美业 AI 学苑|王逸君

为什么美业人需要一个网页?

你的指甲做得很漂亮,你的客人也都说好。但你有没有想过,那些还不认识你的人,根本找不到你?

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 商家档案留评价。评价越多,搜寻排名越前面。

你的网页做好了吗?

如果你在过程中卡住了,或是想要更进阶的客制化,欢迎加入馥灵之钥美业合作平台。我们有完整的手把手教学和即时咨询。

上一篇
AI 深度应用攻略
下一篇
做互动小工具教学