本文分享了一位编程新手如何借助GPT完成自建网站的过程，包括确定需求、设计、编写代码（HTML、CSS、JavaScript）、部署和SEO优化。详细介绍了从零开始的步骤，以及在实践中遇到的问题和解决方案。
网站已上线，欢迎访问：体制内找工指南
本人编程半小白（不会写代码，只知道html、css、javascript分别是什么用的、代码结构，但不知道字段和代码的具体意思）。但在gpt的帮助下，用一个下午就完成了一个自建网站的设计、部署、上线。
网站大概长这样，不复杂，但基本用到了所有前端必备知识，很适合零基础建站。
我把建站详细过程分享出来，纯小白也能够根据步骤实现自己的网站。
一、我是怎么做的/自建站的步骤
主要根据@哥飞 大大提供的步骤（教程地址），针对性做了简化，更适合小白人群
1. 确定想要做什么样的网站【必要】
网站的主题、满足了什么样的用户需求、希望放置什么样的内容。
2. 分析需求可行性【可选】
利用similarweb、aizhan、semrush等网站分析「类似主题站点的关键词+自然流量（搜索导流的日访问量）+SEO难度（即搜索量增长难度）」，验证这个网站ROI是正的，值得做，会有人用。
3. 网站设计和写代码【必要】
1）画出网站页面的原型草图【可选】
2）使用gpt生成代码，用代码实现草图，在本地浏览器上展示网站【必要】（教程地址）
- 简单版主要有几个步骤【必要】
- 描述你的原型草图，让gpt生成html代码
- 在本地新建一个txt文件，将html代码复制进去，另存为html后缀
- 用浏览器（如chrome等）打开html，查看你的网站实际的样子。到这一步，恭喜你，你的网站就已经设计好了
- 复杂版就再加上css、javascript代码，优化样式功能【可选】
- ①网站样式代码css（调整字体、颜色、间距等）
- 描述你的UI要求，让gpt生成css代码
- 在本地新建一个txt文件，将css代码复制进去，另存为css后缀（放在与html文件一个目录下面）
- 打开html文件，在和之间增加一行，保存。
- 在浏览器里打开html文件，这时候网站在打开的时候就会用到这个css文件里面的设置，来显示网页
- ②网站交互代码javascript（增加了动态交互的 能力）
- 描述你的功能要求，让GPT生成javascript代码
- 打开html文件，将javascript代码复制到html代码的之间，保持html文件
- 在浏览器里打开html文件，这时候网站在打开的时候就会用到这个javascipt代码实现的，来显示网页（因为javascript相对复杂，这里面如果运行不成功的话，可以让gpt解释代码，询问出了什么问题，再一步步微调，直到成功运行）
- ①网站样式代码css（调整字体、颜色、间距等）
过程中有任何语法问题，随时去搜索引擎搜索，也可以在「菜鸟教程」网站上看用法
4. 联网，让其他用户可以根据url访问你的网站【必要】
直接参考@哥飞的教程（地址）。联网比网站设计复杂，因为每一步都涉及不同家的产品，可以根据教程一步步搞。
- 1）注册域名，即网站url
- 阿里云官网购买域名，需付费，一年￥10-100不等（你也可以用别家产品，不一定要阿里云）。
- 2）域名解析为DNS服务器地址。
- 这步让域名地址与IP地址链接，让用户直接能够支持输入域名就能访问网站
- cloudflare官网注册，用cloudflare提供的DNS服务器地址，替换阿里云解析的DNS服务器地址（域名注册完后在域名列表里点域名详情可以找到）。
- 3）提交代码到github仓库
- 代码的管理中心，云端服务器可以基于github上的代码去展示网站。如果只放在本地的话，只有本机能够读取代码了
- 4）将github仓库的代码部署到Vercel（免费服务器）
- vercel其实提供了免费子域名，但不确定偷懒不买会不会带来额外麻烦，所以就还是按照教程步骤一步步来了
- 5）在浏览器输入URL，可以直接访问网站啦！
5. 在搜索引擎申请收录网站，让用户能够根据关键词查询到你的网站并访问
直接参考@哥飞的教程第8步（教程地址）
1）打开搜索引擎，搜索 site:xxxx域名xxx，在展示结果里 进入网站收录
2）新建站点地图的xml文件，提交到 对应位置，然后等待收录成功就行
- 在谷歌搜索site:xxx域名
- 添加google analytic统计代码到 html代码
- 在谷歌站长工具google search console中提交站点地图，让谷歌爬取网站的每个页面。站点地图：
- ①按照谷歌教程，新建一个XML文件
- ②上传到github上，确定站点地图的url（一般是https://网站域名/sitemap.xml）。
- ③在浏览器里打开该URL，确保站点地图可以正常加载。④在google search console的站点地图处提交，等待，抓取状态为「成功」即可
- 之后就是等待谷歌收录。
- 谷歌和百度大同小异，先弄谷歌，再弄百度就简单。按照教程一步步来就
- 在百度搜索site:xxx域名xx，根据步骤操作。基本同谷歌一样，比谷歌要简单点，在一个平台就完成了。之后就是等待收录
二、在建站过程中用到的prompt
gpt我使用的是kimi.ai。免费可用，无次数限制，也不用翻墙，体验不错
- prompt1：根据设计草图 给出html代码
你是一个SEO专家和前端开发专家，擅长使用html+css实现符合SEO要求的前端页面。
我现在要建立一个关于“xxxx”的导航网站， 要求能够收录「yyy」的网站
我的想法是先在网站顶部用h1写出“xxx”， 之后列出各个网站的名字 之后生成很多的 h2
每一个 h2 就是一个网站的名字+网站的url网址，网站名字和Url网址之间用空格隔开
所以完整的 h2 举例是“百度 https://www.baidu.com/”。
每一个h2下方会有一小段描述文字，用p标签
描述文字下方是一个按钮，按钮文字为“访问该网站”，不同的网址需要替换成不同的名字，
点击按钮后打开新页面，按照h2里给出的url网址去访问对应网站
如百度则页面url为“https://www.baidu.com/”。
现在，请帮我生成页面，要求符合SEO规范。 对于我没有提要求的地方，你可以按照你的理解去做。
- prompt2：给出css代码
请帮我生成styles.css，要求用简洁大气的配色
- prompt3：增加网站的搜索功能
h1标题和h2标题之间，希望能够增加一个搜索框，支持页面上的网站。每当搜索到对应结果后，网页上只显示该结果，其他结果不显示。我希望能够实现该效果，应该如何修改我的HTML代码
- prompt4：解释代码的意思
请逐行解释一下，<script>里面每一行代码的含义
- prompt5：分析代码问题，修改代码
以下代码出现了问题，在输入搜索词之后，搜索结果没有过滤，而是仍然显示所有搜索结果。 请你帮忙分析下
1、为什么会出现这个问题
2、应该如何修改 并给出修改后的完整代码
————
复制当前html文件里的所有代码 ....<!DOCTYPE html>
1834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
