哈罗，大家好，我是涛哥，上市公司程序员裸辞，All in AI，探索AI编程更多可能，主要使用Claude Code等AI编程工具进行开发，打造一人公司，立志在AI时代做出世界级产品。
现在在各种AI编程工具的加持下，让开发变得非常快，很多开发小白也能快速做出一个功能齐全的网站。
但是网站虽然开发完了，都会遇到一个棘手的问题，那就是如何才能把网站发上线，让其他人也能正常使用和访问呢？不用担心，今天就来告诉你用宝塔Linux面板这个神器，无需代码，界面操作就能把你的网站快速部署到线上。
网站要想被别人访问到，首先需要一台服务器，因为你家里的电脑一般来说是没有外部能访问的IP地址的。
大家也不要觉得服务器很神奇、很贵，阿里云那里有一个长期活动，只需要99元就可以购买一整年的使用权，这个教程既然是保姆级，我们就从购买服务器开始！
购买服务器
点击 这个地址 (www.aliyun.com/daily-act/e…) 进入阿里云的99元服务器活动页面。
阿里云99元套餐活动
注册并登录账号，新用户才可以参加这个活动过，只需要99元就可以购买一个服务器。
因为我已经不是新用户了，没法购买了。这里直接说说购买流程，在上面点击“立即购买”之后，按照要求设置基本参数，比如 带宽、密码等等。
如果有什么卡点，可以在私聊或者评论区找我。
需要注意，你选择系统镜像时，要选择下图中的这个 宝塔Linux面板：
选择上方的宝塔Linux面板
一定要记住你的密码。
继续下一步，带宽和其他的可以是默认的。
配置服务器
购买完成后，请耐心等待几分钟（通常5-10分钟），阿里云后台会自动为你安装并初始化好带有宝塔面板的系统。当服务器状态显示为 运行中 时，才可以进行下一步操作。
记录宝塔的相关信息
从系统准备完毕的输出内容中找到宝塔的登录信息，并复制记录下来。如果没有看到，那么参考这个文档 （help.aliyun.com/zh/ecs/use-…
根据下图步骤可以看到你的服务器的详细信息。
控制台-进入服务器
控制台-查看服务器的信息
这张图就可以看到服务器的运行状态和ip地址。
安全组设置
服务器默认有防火墙，只开放了少数端口（如SSH的22端口）。我们的网站（通常80/443端口）和宝塔面板（8888端口）需要被访问，所以必须在安全组里‘打开门禁’，允许外部流量访问这些端口。
上一步执行完后，在上图这个页面的左侧 网络与安全 下点击 安全组，通过新增规则，添加下图中框选出来的端口。
安全组-管理规则
点击下图中左上角增加规则来添加放开的端口,把9702这个 端口 也要加到安全组里面去。
安全组-放开端口
将上述端口放开之后，就可以通过浏览器中打开宝塔等页面了。
打开宝塔页面
打开上一步获取的宝塔访问的URL，假设是： 47.105.XX.XX:8888/cad432be 。进入到登录页，先注册账号，然后登录：
宝塔登录页
宝塔首页
好了，现在我们的‘服务器控制室’——宝塔面板已经准备就绪。接下来，我们就把本地的网站代码搬上来。
前端部署
部署前端页面很简单，只需要把html+css+javascript三种页面发到线上服务器的指定目录就可以了。全程在网页里操作，除了编译需要执行命令，上传和部署不需要任何命令。
编译本地VUE项目
由于我这个项目用的是前端Vue框架开发的，因此我们需要将Vue项目编译成HTML、CSS、Javascript文件。上传这些编译后的文件即可，如果你开发的本来就是HTML、CSS、Javascript文件，那么就不需要编译了。
请在你的本地电脑上，打开终端或命令提示符（CMD），进入你的Vue项目根目录，然后执行以下命令：
# 进入前端代码目录
cd nano-banana-prompt-web
# 全包已安装引用的第三方库
npm install
# 编译
npm run build
前端项目编译完成后的文件在 nano-banana-prompt-web/dist 目录下，在下一步添加HTML项目时，选择这个目录将其上传就好了。
上传HTML项目
第一步：在宝塔的“网站”页面，点击 上方的HTML项目，再点击添加html项目。
进入并添加HTML项目
在下面的弹框中有域名就输入域名（域名需要你先完成备案并解析到这台服务器的IP地址），没有域名就直接输入你的服务器的IP地址，这里以IP地址举例。
配置html项目信息
点击确定后，就可以看到下面的图片的目录，点击就可以进入上传页面里。
上传dist目录下的文件：
进入文件上传页面
到上传页面后，再点击下方的 上传/下载按钮，展示上传弹框：
在上传弹框中再点上传文件按钮，会弹出文件选择框，在文件弹出框中选择之前编译的“dist”文件。（如果你的是不需要编译的，那么就直接选择你的html、css、js文件）
点击后选择dist目录下的所有文件
注意：在上传dist目录时，会发现下面有一个assets文件夹，由于上传文件框无法上传这个二级目录，你需要自己先在”网站“中新建 assets目录。（点击前2张图的 上传/下载 按钮旁边的 新建 按钮创建assets目录，然后再进入assets目录上传assets目录的文件）
上传index页和vite文件
上传assets目录下的文件到assets目录下
完成上传
文件上传完之后，需要重启一下nginx服务，之所以要重启，是因为我们添加了新的站点配置，需要重启让nginx更新读取到：
重启nginx服务
重启非常快，然后你就可以通过访问你的URL，比如，我的url是： 47.105.XX.XX/index.html （前面那个数字是你服务器的IP地址），打开后就是如下页面。这样前端就上传完成了。
我也配了一个线上域名访问的网站：nano-banana.yueshu365.cn
打开的网站首页
现在，你的网站首页已经可以访问了！这是一个重要的里程碑。不过，你可能会发现页面上的数据加载不出来，或者登录等功能失效。这是因为网站的前端页面虽然部署好了，但它需要与后端服务器（API）通信才能获取动态数据，而我们的后端服务还没有部署。
本期内容就到这里，下一期我会带大家把后端服务也在宝塔里配置好。
如果本期内容对你有用，还请不要吝啬你的三连+关注呀。我会持续输出AI编程的使用技巧和工具。
（下方有重磅福利）
Claude Code优质内容
3个月变永久！claude code给我写了一套脚本，帮我把网站HTTPS成本降为0
Claude Code+Jenkins急速打造网站部署的上线系统
“别再让AI网站丑下去了！”涛哥用Claude code实战MinIO主题移植，效果炸裂！完全去掉AI味！
70%成本降幅！不装软件混搭Claude Code，我的年省2500元秘籍
【保姆级】零基础小白的AI编程环境搭建：Claude Code × Kimi K2 完全步骤-windows
claude code开发案例，提示词+效果图
claude code开发案例1：提示词+网站截图
粉丝福利
我这些天把我之前开发的提示词网站的开发全过程都整理了出来，形成了一篇非常详细的手册内容，目前已经有2万多字的内容，涵盖了环境搭建、开发、Claudeo code使用、所有功能的提示词、上线部署一整套工具的内容。 点击链接直接进入：egtmutdg24.feishu.cn/docx/OlzFdN…
