使用 AI 快速制作个人主页并部署到云服务器上的操作步骤

1、前期工作

• 注册域名

• 购买云服务器

• 备案网站

2、制作网页文件

2.1、使用 AI 生成网页代码

如上图所示，使用类似 DeepSeek 这样的 AI 工具，即可快速生成一份网页代码，本示例的提示词（有部分省略）如下：

编写一份网页代码，所有代码（包括 css 和 js ）都能集中在一个 html 文件里。

网页名称叫“Javaer1995的数字分身”，这个名称要能显示在浏览器的标签页上面。

这个网页既要像个人主页一样具备展示性，也要像导航页一样具备工具性，页面布局和颜色要简约。

要有一个搜索框，搜索引擎默认是“必应”，还能可选“百度”和“谷歌”。

要能显示所在城市、天气、温度、日期（公历和农历）、以及星期几。

有一个名称是“tx.png”的图片文件，和 html 文件在同一个目录中，图片实际分辨率是 2048 x 2048；
这个图片的属性是一个头像，你要以合适的尺寸和位置，将其在网页中展示出来；
头像图片附近合适的位置要显示我的博客地址： https://www.cnblogs.com/Javaer1995 ；
点击头像的时候，能播放音乐（同目录下的 music.mp3 文件），头像像唱片一样旋转，再点击就暂停音乐和头像旋转。

要响应式，同时适配电脑和手机浏览器。

要显示一些常用网站的导航（点击能在新标签页打开）：

1、Java
Spring（ https://spring.io/ ）
IntelliJ IDEA（ https://www.jetbrains.com/idea/ ）

2、DataBase
MySQL（ https://dev.mysql.com/ ）
PostgreSQL（ https://www.postgresql.org/ ）

3、Linux
Oracle Linux（ https://www.oracle.com/linux/ ）
Rocky Linux（ https://rockylinux.org/zh-CN ）

4、Security
Let's Encrypt（ https://letsencrypt.org/ ）
CVE（ https://www.cve.org/ ）

5、Tool
微词云（ https://www.weiciyun.com/ ）
微信文件传输助手（ https://filehelper.weixin.qq.com/ ）

6、Media
荔枝网（ https://www.gdtv.cn/ ）
央视网（ https://www.cctv.com/ ）

7、Study
WPS 学堂（ https://www.wps.cn/learning/ ）
藏经阁（ https://developer.aliyun.com/ebook/ ）

8、Other
Gitee（ https://gitee.com/ ）
GitHub（ https://github.com/ ）

要显示我掌握的技术栈（这部分放在左侧竖排，像一个栈一样）：
SpringBoot（ https://www.cnblogs.com/Javaer1995/category/2365102.html ）
IntelliJ IDEA（ https://www.cnblogs.com/Javaer1995/category/2496358.html ）

最后显示我的 ICP 备案号：粤ICP备xxxxxx号-x

2.2、使用网页代码

如上图所示，新建一个 txt 文件，将 AI 生成的代码复制到这里并保存。

如上图所示，将这个新建的 txt 文件名称，修改为“index.html”，即制作好了网页文件。

2.3、查看网页效果

如上图所示，可以使用浏览器打开查看网页文件的显示效果；效果不好的话，可以提意见让 AI 修改调整。

3、部署网页文件到云服务器

3.1、安装 Nginx 服务

如上图所示，使用 MobaXterm 等工具连接云服务器， 通过 yum 源安装 Nginx 。

yum install nginx -y

3.2、上传网页文件

如上图所示，使用 MobaXterm 等工具，将网页文件拖拽上传到云服务器的“/usr/share/nginx/html/”目录中，覆盖原有的 index.html 文件。

提示：tx.png 和 music.mp3 是本示例网页文件 index.html 中使用到的文件，放在与 index.html 文件的相同目录下是比较简单做法。

3.3、修改 nginx.conf 配置文件

如上图所示，进入 Nginx 的安装目录，使用 vi 工具修改 nginx.conf 配置文件。

cd /etc/nginx/

vi nginx.conf

如上图所示，在 server_name 这里设置具体的域名。

提示：关于 vi 工具的模式切换和保存操作，请参考 Vim常用操作速查表 这篇文章的第 2 小节和 3.2 小节。
或者使用 MobaXterm 等工具的图形文本编辑器直接修改文件并保存：

3.4、启动 Nginx 服务

systemctl start nginx

3.5、开放云服务器的防火墙端口

3.5.1、控制台的防火墙

如上图所示，在云服务器的防火墙配置中，添加一条“入方向规则”。

协议类型是 Web HTTP 协议，访问来源是任何位置，目的端口 80 是 Nginx 服务的端口。

3.5.1、服务器的防火墙

如上图所示，除了在阿里云的控制台开放端口外，还需要在服务器内开放相关端口。

firewall-cmd --add-port=80/tcp --permanent

firewall-cmd --reload

做到这一步，就可以通过 http://云服务IP 的方式访问到个人主页了；待域名备案通过后，再将域名解析到云服务器。

提示：“firewall-cmd --reload”命令是重启服务器内的防火墙，让刚刚的防火墙配置修改生效。

3.6、解析域名到云服务器

如上图所示，在阿里云DNS控制台中，点击域名的“解析设置”操作。

如上图所示，给域名（本示例为 liaojy.online ）添加一条记录。

让 www 二级域名（本示例为 www.liaojy.online ）通过 IP 地址解析到云服务器。

注意：如果云服务器的 IP 不小心填错，修改后要等大约十分钟，DNS 才能更新；浏览器访问时，要按 Ctrl + F5 强制刷新才能清除缓存。

3.7、使用域名访问网页

如上图所示，使用域名可以正常访问网页了。

这样只要记住自己的域名，在任何地方，使用任何电脑（或手机），都可以通过域名来访问自己的个人主页。

如果是自己的手机或电脑，还可以将其设置成浏览器的默认主页，每次启动浏览器看到的是为自己定制的主页，而不是第三方充满广告的主页。

注意：自通过域名能访问网站后的 30 日内，需完成公安联网备案。