生成备案需要的官网
大家好,上节课我们已经完成了域名的解析以及 Nginx 相关的配置,并且能够正常访问到我们的网站了。
当前状态
我们再来访问一下试一下。
前面它会给我们拦截,跳转到一个百度云的网页上面,提示还没有备案。那么现在又可以访问了,就是间歇性的,有点不太稳定。
关于备案的影响
网站在未备案状态下,访问会不稳定,时而可以访问,时而被拦截。所以我们需要尽快完成备案。
为什么要生成官网?
那么接下来,我们要去做一下网站的备案。
备案之前,我们肯定是需要修改一下这个网站的,因为不能直接提交这个网站去做审核。
我们需要一个正式的官网页面来进行备案审核,而不能用 Nginx 的默认页面。
使用 AI 生成官网
那么我们怎么去改呢?我们可以用 AI 来给我们生成一个可以提供给审核的网站。
编写提示词
我们用 Cursor 的 Agent 模式来给我们设计一个吧。
我开发了一个记账软件,现在想要做一个软件的官网。
要求:
- 只需要一个 HTML 文件就行
- 所有的样式都放在 style 标签中
- 所有的脚本都放在 script 标签中
- 不依赖任何外部资源
- 不使用外部的 CDN
- 可以直接放在项目的根目录下面
软件名称:小喵记账
包含模块:账单管理、分类管理、统计分析、个人中心我们写了一下提示词,强调只需要一个 HTML 文件就行,并且告诉它这个软件的名称以及包含了哪些模块,然后回车。
查看 AI 生成结果
我们来看一下给我们生成的文档。
我们看一下技术约束:
- ✅ 单一的 HTML 文件
- ✅ 所有的样式都是放在这个文件中的
<style>标签中(也就是说不会有其他的文件) - ✅ 脚本也是放在这个 HTML 文件中
- ✅ 不依赖任何外部的资源
- ✅ 不使用外部的 CDN
- ✅ 直接放在项目的根目录下面
然后下面是页面的结构、视觉风格,这个我们就不去看了。
我们直接生成好之后,然后看一下效果。
点击采纳,然后点击开始任务,生成好之后,我们直接点接受。
预览生成的网页
然后我们来看一下这个网页。
点击源代码管理器,然后找到这个页面(也就是这个文件),双击打开。
这个是给我们生成的官网的代码,这个代码我们就不去看了。
然后直接复制路径,然后到浏览器粘贴,我们来看一下效果:
页面内容:
- 最上面是导航栏
- 左侧是”小喵记账”的名称,它给我们做了一个 Logo(当然我们后面可以替换它)
- 右侧是几个按钮,并且按钮应该都是可以点的
- 然后下方是”小喵记账 - 您的贴心记账助手”(一个 slogan)
- 然后下面列出了核心的功能、产品的特色
修复页面问题(如果有)
这里貌似有一些重复的,刷新一下看一下。
如果发现页面内容有重复,可以让 AI 修复。
我们来描述一下这个问题:
- 先点击采纳
- 然后打开 AI 对话框
- 新建一个对话
- 找到刚才生成的这个设计文档
- 把它添加到对话中
- 描述问题:“整个页面的内容都重复了”
现在问题已经修复了,我们来刷新一下看看(因为这个路径没有变,所以我们直接刷新)。
刷新之后正常了!然后再放大一下界面看看效果,看起来是没有什么问题的。
部署官网到服务器
接下来我们需要把这个文件放到服务器上。
连接到服务器
首先我们还是打开 Xshell,然后打开 Xftp。
进入到 home 目录。
上传 HTML 文件
然后我们找到这个文件,复制路径。
我们还是新建一个文件夹,比如就叫 web。
然后把这个文件传到 web 目录下面。
修改 Nginx 配置
这个时候,我们需要修改一下 Nginx 的配置,把静态文件的目录指向 /home/web。
进入到这个 conf.d 下面,然后找到这个 443.conf。
然后我们还是把它传到本地,然后先用服务器上的 443.conf 覆盖本地的这个,然后我们再去修改它。
主要就是修改这个路径:
修改前:
location / {
root /usr/share/nginx/html;
index index.html;
}修改后:
location / {
root /home/web;
index index.html;
}现在这个路径指向的是我们原来看到的那个 demo 页面,也就是 Nginx 配置相关信息的页面。
这个时候我们要改一下,改到 home 目录下面,也就是这个 /home/web。
Nginx 进来之后,它会默认找这个目录下面 index.html 这个文件。
关于配置文件的修改
我们所有配置相关的修改都是在 Windows 电脑上面,因为这样修改看起来会比较方便一点。
如果说你想在服务器上直接去修改的话也是可以的,但是初学者的话,我建议还是这样去操作会方便一点,没有学习成本。
上传配置文件
然后这个时候我们再把它传回去,先保存一下,然后再传回去,传到 Nginx 目录下。
重载 Nginx 配置
然后这个时候我们再回到 Xshell,然后执行一下:
nginx -s reload也就是让 Nginx 重新加载一下配置。
验证部署结果
然后我们再来访问一下看看,看看现在还能否访问这个网址(也不一定能访问)。
诶,现在已经可以正常访问进来了! 🎉
那么接下来,我们就可以用这个网址去做备案了!
完整的 Nginx 配置示例
修改后的 443.conf 配置文件:
server {
listen 443 ssl;
server_name xiaomiaojizhang.top www.xiaomiaojizhang.top;
ssl_certificate /home/ssl/xiaomiaojizhang.top.pem;
ssl_certificate_key /home/ssl/xiaomiaojizhang.top.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
# 修改为新的静态资源目录
location / {
root /home/web;
index index.html;
}
}目录结构
服务器上的文件结构:
/home/
├── ssl/ # SSL 证书目录
│ ├── xiaomiaojizhang.top.pem
│ └── xiaomiaojizhang.top.key
└── web/ # 网站根目录
└── index.html # 官网页面总结
生成和部署备案官网的关键步骤:
- 使用 AI 生成单页 HTML 官网
- 确保所有资源都在一个 HTML 文件中
- 本地预览验证效果
- 在服务器创建
/home/web目录 - 上传 HTML 文件到服务器
- 修改 Nginx 的
443.conf配置 - 重载 Nginx 配置
- 访问域名验证部署成功
下一步
官网部署完成后,我们就可以开始进行网站备案流程了。
AI 生成网站的提示词模板
如果你也想生成类似的网站,可以参考这个提示词模板:
我开发了一个[软件类型]软件,现在想要做一个软件的官网。
要求:
- 只需要一个 HTML 文件
- 所有样式放在 <style> 标签中
- 所有脚本放在 <script> 标签中
- 不依赖外部资源和 CDN
- 响应式设计,支持移动端
软件名称:[你的软件名称]
主要功能:[功能1、功能2、功能3]
目标用户:[目标用户群体]
设计风格:[简约/现代/科技感等]遇到问题？
如果生成或部署过程中遇到任何问题,可以下方微信扫码帮您看下(免费咨询)
