本文由 莫潇羽@无忆研习社 原创撰写，转载请注明出处：www.wuyi.wiki
在这个人工智能飞速发展的时代，搭建一个属于自己的个人网站已经不再是程序员的专属技能。借助Claude、ChatGPT等大语言模型的强大能力，即使你是零基础的小白，也能在几分钟内生成一套完整的网站代码。但问题来了：怎样才能让AI准确理解你的需求？生成的代码如何修改和优化？最后又该怎么把网站部署到服务器上让全世界都能访问？
这篇文章将以一个真实的个人博客网站制作案例为蓝本，手把手带你走完从提示词编写到网站上线的全部流程。无论你是想做个人博客、作品展示站还是企业官网，这套方法论都能帮到你。
一、为什么要用AI来生成网站代码
在传统的建站方式中，你要么花几千甚至上万块钱请专业团队定制开发，要么自己啃着枯燥的HTML、CSS、JavaScript教程摸索几个月。而现在，AI彻底改变了这个游戏规则。
我（莫潇羽）在无忆研习社运营这几年，见证了太多朋友从"完全不懂代码"到"一天搭建三个站"的蜕变过程。这背后的核心秘诀就是学会与AI对话的艺术——也就是我们常说的"提示词工程"（Prompt Engineering）。
好的提示词就像是给一位经验丰富但初来乍到的设计师下达工作指令。你描述得越清晰、越具体，他给你的成品就越符合预期。反之，如果你只是含糊地说"帮我做个网站"，那得到的结果八成会让你失望。
用AI生成网站代码的优势非常明显。首先是效率极高，原本需要几天甚至几周的开发工作，AI几分钟就能完成初稿。其次是成本几乎为零，你只需要一个AI对话账号。第三是迭代方便，不满意的地方可以随时让AI修改，不用担心改坏了回不去。最后也是最重要的一点，在这个过程中你还能顺带学习网站开发的基础知识，可谓一举多得。
当然，AI生成的代码并非完美无缺。它可能存在兼容性问题、安全漏洞或者不符合最佳实践的地方。但对于个人博客、展示型网站来说，这些小瑕疵通常无伤大雅。我们的目标是先把网站跑起来，后续再慢慢优化迭代。
二、提示词拆解：每一句话都有它的用意
现在让我们来看一个真实的网站制作提示词案例，并逐句分析为什么要这样写。这个案例来自一位AI研究员想要搭建个人博客的需求：
我现在想做一个个人博客网站，html架构
要求实现的功能如下：
1、导航栏：首页，博客，联系，关于等页面
2、整个博客的UI设计要炫酷AI科技风格，加一些粒子星云的动效，比如星云可以追随鼠标的移动，然后鼠标离开之后又会自己恢复之类的，特效你自己发挥一下
3、网站的title：[李老师]的个人博客
网站的description：李老师，AIGC研究员，一个热爱人工智能的老师，用这个博客记录和AI一起度过的每一天~
keywords：AI, AIGC, 人工智能, 李老师, 李老师的个人博客, 博客, 个人博客, AI技术, AI技术博客
4、关于页面的一些信息：李老师，毕业于哈尔滨工业大学，从事AI行业4年多的时间，喜欢安安静静的研究，安安静静的教学，没有太多的波澜，没有太多的名誉，谈不上有多专业，但信俯仰不愧天地，褒贬自有春秋！联系方式：微信165255185
5、博客栏目里的文章采用20260129-1.html这样的文章格式，比如29号的第2篇文章就是20260129-2.html以此类推，生成四篇示例的文章
6、文章栏目专门用一个文件夹来保存文章，然后每加入一个新文件，博客就多一篇文章
7、博客底部留出备案号和网安备案的位置和版权信息
8、首页的内容你自己发挥设计一下吧
开始工作吧这段提示词虽然看起来很长，但每一条都有其存在的价值。接下来我们逐条拆解，看看背后的设计思路。
2.1 明确技术栈与项目类型
提示词的开头就点明了"个人博客网站，html架构"。这句话看似简单，实际上传递了几层重要信息。
第一，告诉AI这是一个纯静态网站项目。HTML架构意味着不需要PHP、Python这样的后端语言，不需要MySQL、MongoDB这样的数据库，整个网站就是一堆HTML、CSS、JavaScript文件的组合。这种架构的好处是部署简单、运行稳定、几乎不存在安全漏洞，非常适合个人博客这类内容展示型网站。
第二，为AI划定了技术边界。如果你不说明技术栈，AI可能会给你生成React、Vue这样的前端框架代码，甚至可能用Node.js搭建一个完整的后端服务。对于小白来说，框架代码的学习成本和部署难度都要高出不少。
作为无忆研习社的站长，我（莫潇羽）经常建议新手从纯HTML静态站开始入门。等你对网站的基本结构有了了解，再去学习更高级的技术也不迟。
2.2 规划导航结构
"导航栏：首页，博客，联系，关于等页面"这条要求确定了网站的基本骨架。
导航栏是用户浏览网站的"地图"。一个设计合理的导航应该让访客在三次点击之内找到他想要的任何内容。对于个人博客来说，首页、博客、联系、关于这四个板块基本涵盖了所有常见需求。
首页通常用来展示博主的核心信息和最新动态。博客页面汇总所有文章列表，方便读者浏览和检索。联系页面提供各种社交方式，让感兴趣的朋友能找到你。关于页面则是博主的个人介绍，塑造人设、建立信任的重要阵地。
你可能注意到提示词里用了"等"字，这是给AI留出发挥空间的小技巧。AI可能会额外添加一些有用的功能，比如搜索框、返回顶部按钮之类的。当然，如果你不喜欢AI的自由发挥，也可以把需求写得更具体明确。
2.3 定义视觉风格与交互效果
"整个博客的UI设计要炫酷AI科技风格，加一些粒子星云的动效，比如星云可以追随鼠标的移动"这条是整个提示词中最有意思的部分。
一个网站的视觉风格直接决定了访客的第一印象。AI科技风通常意味着深色背景、霓虹光效、几何线条、粒子动画等元素。这种风格非常契合AI从业者的身份定位，也容易给人留下"技术大佬"的印象。
粒子特效是近年来非常流行的网页动效技术。通过Canvas或WebGL绑定，可以在页面背景绘制成千上万个随机运动的小点，组成星空、星云、流星雨等效果。再配合鼠标交互，比如鼠标移动时粒子会追随或躲避，能极大提升网站的科技感和趣味性。
需要注意的是，动效虽然好看，但也会消耗设备性能。如果你的目标用户中有大量使用低配置手机或老旧电脑的人群，可能需要考虑提供关闭动效的选项，或者适当降低粒子数量。
2.4 SEO三要素的详细设定
这一点非常重要，值得我们展开详细讨论。
提示词中明确指定了网站的title、description和keywords，这就是所谓的"SEO三要素"。SEO全称是Search Engine Optimization，即搜索引擎优化。简单来说，就是让百度、Google等搜索引擎更容易理解和收录你的网站，从而在用户搜索相关关键词时把你的网站展示在更靠前的位置。
Title（标题）是SEO的重中之重。 它出现在浏览器的标签页上，也是搜索结果中最醒目的那行蓝色大字。案例中的标题是"[李老师]的个人博客"，简洁明了地传达了网站的主题和所属。
好的标题应该控制在50-60个字符以内（中文约25-30个字），因为超过这个长度的部分在搜索结果中会被截断显示为省略号。同时，应该把最重要的关键词尽量放在标题的前面部分，因为搜索引擎会给靠前的词语赋予更高的权重。
Description（描述）虽然不是直接的排名因素，但它对点击率的影响巨大。 描述文字会显示在搜索结果标题下方，是用户决定是否点击进入你网站的重要参考。案例中的描述是"李老师，AIGC研究员，一个热爱人工智能的老师，用这个博客记录和AI一起度过的每一天"，既介绍了博主身份，又透露了网站内容，还带有一丝温情色彩，读来让人有点击一探究竟的冲动。
好的描述应该控制在150-160个字符以内（中文约75-80个字），需要包含目标关键词但不能堆砌，应该用自然流畅的语言描述页面内容的核心价值。
Keywords（关键词）曾经是SEO的核心元素，但如今它的重要性已经大大降低。 Google早在2009年就公开声明不再将keywords标签作为排名因素，百度虽然没有明确表态，但普遍认为它的权重也已经很低。不过，设置合理的keywords标签仍然有助于你自己梳理网站的核心主题，对于某些仍在使用的搜索引擎（如部分行业垂直搜索）也可能有帮助。
案例中设置的关键词包括"AI, AIGC, 人工智能, 李老师, 李老师的个人博客, 博客, 个人博客, AI技术, AI技术博客"，涵盖了领域词（AI、AIGC、人工智能）、品牌词（李老师）和长尾词（李老师的个人博客、AI技术博客）三个层次，覆盖面比较全面。
我（莫潇羽）在无忆研习社发布过很多关于SEO优化的教程，如果你对这个话题感兴趣，欢迎到www.wuyi.wiki深入学习。这里只是概述性的介绍，实际操作中还有很多细节需要注意。
2.5 关于页面的人设塑造
"关于页面的一些信息"这条要求，表面上是在提供内容素材，实际上涉及到网站运营中一个非常重要的概念——人设建立。
互联网上充斥着千篇一律的网站，访客凭什么记住你？答案是人格化。一个有血有肉、有故事、有观点的博主，远比一个冷冰冰的"XX科技博客"更容易获得关注和信任。
案例中的关于页面内容很有意思。"毕业于哈尔滨工业大学"建立了学历背书，"从事AI行业4年多"说明了专业经验，"喜欢安安静静的研究，安安静静的教学"勾勒出性格特点，"俯仰不愧天地，褒贬自有春秋"展现了处世态度。短短几句话，一个谦逊低调但内心坚定的AI老师形象跃然纸上。
最后提供的联系方式也很讲究。微信号直接给出来，比写"请通过邮件联系"显得更加真诚和亲近。当然，如果你的网站流量很大，可能需要考虑用企业微信或公众号来替代个人微信，避免被加满好友的尴尬。
2.6 文章命名与文件管理规范
"博客栏目里的文章采用20260129-1.html这样的文章格式"这条要求涉及到网站的长期维护问题。
为什么要用日期加序号的方式来命名文章文件？主要有几个好处。
第一是便于排序和查找。当你的博客积累了几百上千篇文章后，按日期命名可以快速定位到某一时期的内容。第二是避免文件名冲突。如果用标题拼音来命名，可能会遇到重名的麻烦。第三是便于程序处理。如果将来想给博客加上自动归档功能，日期格式的文件名会让编程变得简单很多。
"文章栏目专门用一个文件夹来保存"则是良好的代码组织习惯。把不同类型的文件分门别类存放，可以让整个项目结构清晰明了，无论是自己维护还是后来者接手都会轻松很多。
一般来说，一个标准的静态网站目录结构会包含：根目录存放主要页面（index.html、about.html等）；css文件夹存放样式表；js文件夹存放脚本；images文件夹存放图片；articles或posts文件夹存放博客文章。
2.7 备案信息预留位置
"博客底部留出备案号和网安备案的位置和版权信息"这条看起来简单，却关系到网站能否合法运营的大问题。
在中国境内使用服务器提供网站服务，必须完成两项备案：工信部ICP备案和公安部网安备案。
ICP备案是基础性备案，所有使用境内服务器的网站都必须完成。流程大致是：通过服务器供应商（阿里云、腾讯云等）的备案系统提交主体信息和网站信息，进行人脸核验，等待初审和管局终审。审核周期根据各省情况不同，一般在7-20个工作日。
公安备案是ICP备案通过后30天内必须完成的第二道程序。需要登录全国互联网安全管理服务平台填写网站信息，包括网站名称、服务器IP、网站负责人等。对于涉及论坛、博客等交互功能的网站，部分地区可能要求到公安机关当面核验。
备案成功后，你会获得形如"京ICP备12345678号"的ICP备案号和形如"京公网安备11010502012345号"的公安备案号。这两个号码必须放置在网站首页底部，并分别链接到工信部备案查询系统和公安备案查询系统。
如果你使用的是境外服务器（香港、美国等），则不需要进行备案。但这也意味着你的网站在国内的访问速度可能较慢，也无法使用某些需要备案才能开通的服务（如CDN加速、支付接口等）。
2.8 给AI留出创意空间
"首页的内容你自己发挥设计一下吧"这句话看似随意，实则是与AI协作的重要技巧。
当你已经给出了足够多的约束条件后，适当给AI留一些发挥空间，往往能收获意想不到的惊喜。AI见过无数优秀网站的设计案例，它的"审美"可能比你想象的要好得多。
当然，这种"放权"是有前提的。如果前面的约束条件不够清晰，AI的自由发挥就可能偏离你的预期。比如你没有明确风格要求就让AI自由设计首页，它可能给你一个卡通可爱风，跟你的AI科技风博客格格不入。
一个好的策略是：核心需求明确写出来，次要细节留给AI发挥，最后根据生成结果再做针对性调整。这样既保证了方向正确，又发挥了AI的创造力，还减少了你写提示词的工作量。
三、网站SEO深度解析：不仅仅是三个标签
前面我们介绍了title、description、keywords这三个基础SEO元素，但真正的网站优化远不止于此。作为无忆研习社的站长，我（莫潇羽）认为有必要给大家补充一些进阶知识。
3.1 页面结构与语义化标签
搜索引擎的爬虫在抓取网页时，不仅会读取文字内容，还会分析页面的HTML结构。使用正确的语义化标签，能帮助搜索引擎更好地理解你的内容。
比如，页面的主标题应该用<h1>标签，而且每个页面最好只有一个h1。副标题用<h2>，小节标题用<h3>，以此类推。正文段落用<p>，文章列表用<ul>或<ol>，导航区域用<nav>，文章主体用<article>，侧边栏用<aside>，页脚用<footer>。
这些标签在视觉上可能跟<div>没什么区别，但对搜索引擎来说意义重大。一个语义结构清晰的页面，往往比标签混乱的页面更容易获得好的排名。
3.2 URL结构优化
URL是网页的"门牌号"，好的URL应该简洁、可读、包含关键词。
比如www.wuyi.wiki/ai-website-guide/就比www.wuyi.wiki/post?id=12345更友好。前者人类一眼就能看出这是关于AI网站指南的内容，后者则完全不知所云。
对于博客文章来说，可以考虑的URL结构包括：按日期加标题（/2026/01/ai-website-guide/）、按分类加标题（/tech/ai-website-guide/）、或者直接用标题（/ai-website-guide/）。不同的结构各有优劣，关键是保持一致性。
案例中使用的日期序号命名方式（20260129-1.html）对SEO来说不是最优的，因为它不包含任何关键词。但考虑到维护便利性和技术简单性，对于个人博客来说也是可以接受的折中方案。
3.3 图片优化
网站中的图片不仅要好看，还要对SEO友好。
首先是图片要添加alt属性。alt是"替代文本"的意思，当图片无法加载时会显示这段文字，搜索引擎也通过它来理解图片内容。好的alt应该准确描述图片内容，并在自然的情况下包含关键词。
其次是图片文件名。不要用IMG001.jpg这样毫无意义的名字，改成descriptive-name.jpg会好很多。
再次是图片体积。过大的图片会拖慢页面加载速度，而页面速度是重要的排名因素。一般来说，网页用图压缩到100KB以内比较合适，必要时可以使用WebP格式替代传统的JPG/PNG。
3.4 网站速度优化
现代搜索引擎越来越重视用户体验，而页面加载速度是用户体验的核心指标之一。
影响网站速度的因素很多，常见的优化手段包括：压缩HTML、CSS、JavaScript文件（去除空格、注释等冗余字符）；合并多个小文件减少HTTP请求次数；使用浏览器缓存让访客不必重复下载相同资源；开启Gzip压缩减少传输体积；使用CDN加速将资源分发到离用户更近的节点。
对于静态博客来说，速度优化相对简单，因为没有复杂的后端计算。把图片压缩好、CSS/JS文件合并压缩，再配上一个不错的服务器，基本就能达到不错的加载速度了。
3.5 移动端适配
现在超过一半的网页浏览发生在手机上，如果你的网站在手机上显示效果很差，不仅用户体验糟糕，搜索引擎也会降低你的排名。
好消息是，通过CSS的响应式设计，可以让一套代码同时适配PC端和移动端。基本原理是使用media query媒体查询，根据屏幕宽度的不同应用不同的样式。
写提示词时如果想要AI生成移动端友好的代码，可以加上"响应式设计"或"移动端适配"的要求。现代的AI模型通常默认会考虑响应式，但明确提出会让结果更有保障。
四、AI生成代码后的检查与修改
当你把精心编写的提示词交给AI后，它会生成一大堆HTML、CSS、JavaScript代码。这时候千万不要直接复制粘贴就完事，有几个检查步骤是必不可少的。
4.1 在本地预览效果
把AI生成的代码保存成对应的文件（index.html、style.css、script.js等），然后用浏览器打开index.html预览效果。
观察的时候要注意几个方面：页面布局是否符合预期？字体大小、颜色是否舒适？各种按钮、链接是否能正常点击？动效是否流畅？在不同尺寸的窗口下显示是否正常？
4.2 检查链接和路径
静态网站最容易出问题的地方就是文件路径。如果CSS样式没有加载，八成是路径写错了；如果图片显示不出来，也通常是路径的问题。
打开浏览器的开发者工具（按F12），切换到Console控制台或Network网络面板，可以看到哪些资源加载失败了。根据错误提示去修改相应的路径即可。
4.3 核对SEO信息
打开生成的HTML文件，检查<head>部分的meta标签是否正确设置了title、description、keywords。这些内容直接决定了你的网站在搜索结果中的展示效果。
同时检查各个页面的标题是否有区分。首页、博客页、关于页应该有不同的title和description，如果所有页面都是一样的标题，说明代码有问题需要修改。
4.4 个性化内容填充
AI生成的代码通常会包含一些示例文字，比如"Lorem ipsum"拉丁文占位符或者"这里是示例内容"之类的提示语。在正式上线之前，务必把这些占位内容替换成你自己的真实内容。
特别是关于页面的个人信息、联系页面的联系方式、备案信息的具体号码，这些都需要你自己填写真实信息。
4.5 请AI进行优化迭代
如果发现某些地方不满意，完全可以把问题反馈给AI，让它帮你修改。比如：
"导航栏的颜色太暗了，能不能改成渐变蓝色？"
"文章列表的间距看起来太挤了，每篇文章之间加大一些空隙。"
"粒子特效在我的电脑上有点卡，能不能减少粒子数量？"
AI对于这种针对性的修改请求通常能给出很好的解决方案。不断迭代，直到你满意为止。
五、将网站部署到服务器：宝塔面板完整教程
代码写好了，本地预览也没问题了，下一步就是把网站部署到服务器上，让全世界都能访问。
对于小白来说，命令行操作Linux服务器无疑是一大门槛。好在有宝塔面板这样的神器，把复杂的服务器管理操作都图形化了，鼠标点点就能完成部署。
5.1 准备工作
在开始之前，你需要准备以下几样东西：
一台云服务器。可以选择阿里云、腾讯云、华为云等国内大厂的产品。对于个人博客来说，最低配置（1核1G）就足够用了。如果你在国内访问，建议选择国内节点，速度会更快，但需要完成备案才能绑定域名。如果不想折腾备案，可以选择香港或海外节点，缺点是国内访问速度可能略慢。
一个域名。域名就是网站的"门牌号"，比如www.wuyi.wiki就是无忆研习社的域名。域名需要通过域名注册商购买，阿里云、腾讯云、Namesilo等都可以。如果选择.com、.cn等主流后缀，每年费用在几十到一百元左右。
如果使用国内服务器并希望绑定域名，还需要完成ICP备案，这个我们后面会详细讲。
5.2 安装宝塔面板
购买服务器后，你会获得服务器的公网IP地址和登
