这类从零到一上线个人网站的经历最值得关注的不是用了哪些技术栈而是如何把“想法”变成“线上可访问的服务”这个完整链条。很多人卡在部署、配置、域名、服务器这些环节不是因为技术多难而是因为流程不熟缺少一个能照着做的、带避坑点的完整路径。我花了两个月时间用 AI 辅助从零跑通了这条路。整个过程的核心不是编码而是用 AI 工具如 Claude Code、ChatGPT来加速决策、生成代码片段、排查部署错误把精力集中在业务逻辑和流程整合上。如果你也想独立上线一个网站无论是展示作品、跑个小应用还是学习全栈这篇文章会拆解从环境准备到公网访问的每一步重点讲清楚哪里容易踩坑以及如何用 AI 高效解决问题。1. 先明确目标你要做一个什么样的网站动手之前先别急着写代码。花点时间把网站的目标、核心功能和内容结构想清楚。这步做扎实了后面选技术栈、设计数据库、写接口都会顺畅很多。1.1 定义网站类型与核心功能个人网站通常分几类静态博客/作品集内容相对固定以展示为主。技术栈轻量部署简单。动态内容管理系统CMS需要后台管理文章、用户评论等。涉及数据库和后台逻辑。工具型/应用型网站提供某个具体功能比如文件转换、数据查询等。业务逻辑是核心。全栈学习项目为了学习技术而做可能包含用户系统、数据交互等完整功能。我的目标是做一个动态的个人博客系统包含文章发布、分类、标签、评论初期可简化和简单的后台管理。这样既能展示内容又能覆盖前后端联调、数据库操作等常见开发场景。1.2 用 AI 辅助进行技术选型与架构设计确定功能后技术选型很容易让人纠结。这时可以借助 ChatGPT 或 Claude 来快速分析和对比。我的提问思路供参考“我想开发一个个人博客系统需要前台展示文章、分类、标签以及一个后台管理页面来发布和管理文章。我希望前端用 Vue 3后端用 Java。请帮我推荐一个具体的技术栈组合并说明每项技术的选型理由和大概的学习/上手成本。”AI 给出的参考建议经我整理和确认前端Vue 3 Composition API TypeScript Vite Pinia Element Plus / Ant Design Vue。Vue 3 生态成熟Composition API 逻辑组织更灵活TypeScript 能提升代码质量Vite 开发体验快。后端Spring Boot 3 Spring Security MyBatis-Plus / JPA MySQL。Spring Boot 是 Java 领域事实标准快速构建 RESTful API。Spring Security 处理认证授权。MyBatis-Plus 简化数据库操作。部署前端打包后由 Nginx 托管后端打包成 Jar 包在服务器运行。数据库直接用云服务商提供的 MySQL 或自建。辅助工具用 Docker 容器化部署可以简化环境问题但对新手不是必须。关键点不要完全依赖 AI 的推荐。拿到建议后去搜索引擎如百度、知乎或技术社区如 CSDN、掘金搜索“Vue 3 Spring Boot 博客实战”看看主流教程和开源项目用什么组合验证 AI 的建议是否流行、资料是否多。最终我选择了Vue 3 TS Vite Pinia Element Plus作为前端Spring Boot 3 JPA MySQL作为后端因为这套组合社区资源丰富遇到问题好解决。2. 开发环境搭建与项目初始化环境是第一步也是最容易出幺蛾子的地方。建议严格按照顺序来每一步都验证通过再进入下一步。2.1 基础软件安装与验证Node.js npm/yarn/pnpm前端构建依赖。去官网下载 LTS 版本。安装后在终端执行node -v和npm -v确认版本。Java JDK后端运行环境。推荐 JDK 17 或 21Spring Boot 3 支持。安装后执行java -version和javac -version确认。IDE/编辑器VSCode前端和 IntelliJ IDEA后端社区版免费是常见选择。确保安装好相关插件Vue、Spring Boot、MySQL 等。MySQL本地开发用。可以下载安装包也可以用 Docker 快速启动一个。安装后用命令行或图形工具如 Navicat, DBeaver能成功连接即可。Git代码版本管理。安装后配置用户名和邮箱。避坑点路径不要有中文和空格安装 JDK、Node.js 时安装路径尽量用英文。环境变量Java 和 Node.js 安装后要确认环境变量是否配置成功终端能否全局调用。端口占用MySQL 默认端口 3306后端服务常用 8080前端开发服务器常用 5173Vite。提前用netstat -anoWindows或lsof -i:端口号Mac/Linux检查端口是否被占用。2.2 前后端项目初始化前端项目初始化# 使用 Vite 官方模板创建 Vue TS 项目 npm create vuelatest my-blog-frontend # 根据提示选择需要的特性TypeScript, Vue Router, Pinia, ESLint cd my-blog-frontend npm install # 安装 UI 库 (以 Element Plus 为例) npm install element-plus element-plus/icons-vue # 安装 axios 用于网络请求 npm install axios # 运行开发服务器 npm run dev浏览器打开http://localhost:5173看到 Vue 欢迎页即成功。后端项目初始化访问 Spring Initializr 。选择项目类型Maven/Gradle、语言Java、Spring Boot 版本3.x。添加依赖Spring Web(开发Web应用)、Spring Data JPA(数据库操作)、MySQL Driver(连接MySQL)、Lombok(简化代码可选)。点击生成下载压缩包并解压用 IDEA 打开。等待 Maven/Gradle 下载完依赖项目结构加载完毕。避坑点Spring Boot 版本与 JDK 版本匹配Spring Boot 3.x 需要 JDK 17。如果版本不匹配项目会无法编译。依赖下载慢配置 Maven 国内镜像源如阿里云镜像可以极大加速。前端代理配置开发时前端请求后端接口会遇到跨域问题。在vite.config.ts中配置代理将/api开头的请求转发到后端地址如http://localhost:8080。3. 核心功能开发让 AI 成为你的编程助手这是耗时最长的阶段也是 AI 辅助价值最大的地方。核心思路是你自己设计流程和数据结构让 AI 帮你生成重复性、模式化的代码并解释你不懂的语法或错误。3.1 数据库设计与实体类生成自己设计表结构想清楚博客需要哪些表。最基本的有用户表(user)、文章表(article)、分类表(category)、标签表(tag)、文章-标签关联表(article_tag)。列出每个表的字段、类型、主键、外键。用 AI 生成 JPA 实体类将设计好的表结构描述给 ChatGPT/Claude。提问示例“帮我生成一个 Spring Boot JPA 的实体类Article。字段有id (Long 主键自增)title (字符串非空)content (长文本)summary (字符串)coverImage (字符串封面图链接)viewCount (整数默认0)createTime (创建时间)updateTime (更新时间)。它与Category是多对一关系与Tag是多对多关系。请使用 Lombok 注解简化 getter/setter。”检查和调整AI 生成的代码可能不完美比如关系注解 (OneToMany,ManyToMany) 的配置如mappedBy、cascade可能需要根据你的业务逻辑调整。把生成的代码贴到 IDEA 里结合 IDE 的提示和 JPA 文档进行微调。3.2 后端 API 开发Controller、Service、Repository这是典型的 MVC 分层结构。可以让 AI 生成每一层的骨架代码。生成 Repository 接口ArticleRepository extends JpaRepositoryArticle, Long。这个通常很简单AI 能准确生成。生成 Service 接口和实现类描述清楚业务逻辑。提问示例“为Article写一个ArticleService接口和其实现类ArticleServiceImpl。需要包含以下方法PageArticle findAll(Pageable pageable)分页查询所有文章OptionalArticle findById(Long id)根据ID查询Article save(Article article)保存或更新文章void deleteById(Long id)删除文章。在实现类中使用上面生成的ArticleRepository。”生成 Controller描述清楚 API 路径、请求方法和返回格式。提问示例“为Article写一个 RESTful 风格的ArticleController。需要以下端点GET /api/articles分页获取文章列表接受page和size参数GET /api/articles/{id}根据ID获取文章详情POST /api/articles创建新文章请求体为 JSONPUT /api/articles/{id}更新文章DELETE /api/articles/{id}删除文章。使用RestController和RequestMapping(\/api/articles\)。注入上面写的ArticleService。”避坑点DTO 与 VO直接使用实体类 (Article) 接收请求和返回响应可能会暴露敏感字段或导致循环引用如文章包含分类分类又包含文章列表。更佳实践是创建专用的ArticleDTO用于接收请求和ArticleVO用于返回响应。可以让 AI 根据实体类帮你生成对应的 DTO/VO。全局异常处理让 AI 帮你生成一个GlobalExceptionHandler用ControllerAdvice统一处理异常返回结构化的错误信息给前端。参数校验在 DTO 字段上使用NotBlank,Size等注解并在 Controller 方法参数前加Valid注解。AI 可以帮你快速补充这些校验注解。3.3 前端页面与组件开发前端部分更侧重交互和样式AI 在生成 Vue 组件模板和基础 JS/TS 逻辑方面很有帮助。生成页面组件骨架描述你想要的页面结构。提问示例“用 Vue 3 Composition API 和 TypeScript 写一个博客首页组件HomeView.vue。页面顶部有一个导航栏中间是文章列表显示文章标题、摘要、发布时间、分类支持分页。使用 Element Plus 的el-card,el-pagination组件。文章数据通过 axios 从/api/articles获取。”生成工具函数或 Hook比如封装 axios 请求。提问示例“帮我写一个用于 Vue 3 的 axios 请求封装包含请求拦截器添加 token和响应拦截器处理错误。导出get,post,put,delete方法。”解决具体样式或交互问题当你遇到某个 Element Plus 组件不知道如何配置时直接问 AI。提问示例“Element Plus 的el-table如何实现自定义列模板在操作列添加‘编辑’和‘删除’按钮”避坑点TypeScript 类型定义让 AI 为从后端 API 返回的数据生成对应的 TypeScript 接口定义interface ArticleVO { ... }。这能极大提升开发体验和代码质量。响应式数据更新在 Vue 3 的script setup中使用ref和reactive定义响应式数据修改值时要注意.value的使用。AI 生成的代码有时会漏掉.value需要你仔细检查。路由配置确保router/index.ts中正确配置了路由路径和组件映射。页面跳转失败首先检查这里。3.4 前后端联调这是验证整个数据流是否打通的关键。启动后端在 IDEA 里运行 Spring Boot 的主类。观察控制台确保没有错误并且看到类似Tomcat started on port(s): 8080的日志。启动前端在终端执行npm run dev。测试 API先用 API 测试工具如 Postman、Apifox 或浏览器插件直接调用后端接口如GET http://localhost:8080/api/articles确保后端 API 本身工作正常返回正确的 JSON 数据。前端调用在前端页面触发操作如加载首页打开浏览器开发者工具的Network面板查看前端发出的请求是否正确URL、方法、参数以及后端返回的响应是什么。跨域问题、404、500 错误都会在这里显示。常见联调错误与 AI 辅助排查404 Not Found检查前端请求的 URL 是否和后端RequestMapping定义的路径完全一致包括/api前缀。检查 Vite 的代理配置是否正确。405 Method Not Allowed检查请求方法GET/POST/PUT/DELETE是否与 Controller 方法定义的GetMapping、PostMapping等匹配。500 Internal Server Error这是后端错误。查看后端控制台日志会有详细的异常堆栈信息。把完整的错误日志复制给 AI让它帮你分析可能的原因如空指针、数据库连接失败、SQL 语法错误。跨域错误 (CORS)如果没配代理且前端直接访问localhost:8080就会跨域。解决方案1) 使用 Vite 代理开发环境2) 在后端配置CrossOrigin注解或全局的 CORS 过滤器生产环境也需考虑。4. 部署上线从本地到公网可访问开发完成只是第一步部署上线才是让网站“活”起来的关键。这个过程涉及服务器、域名、Nginx 配置等对新手来说信息量较大。4.1 服务器准备与基础环境搭建购买云服务器国内可选阿里云、腾讯云等国外可选 AWS、DigitalOcean 等。新手建议选择最基础的配置如 1核2G系统选Ubuntu 22.04 LTS或CentOS 7/8注意 CentOS 7 即将停止维护。远程连接服务器使用 SSH 工具如 PuTTY、Xshell、或系统终端连接。基础环境安装在服务器上安装 Java、Node.js用于构建前端、Nginx、MySQL或使用云数据库服务和 Git。务必记录下所有安装的版本号。# Ubuntu 示例 sudo apt update sudo apt install openjdk-17-jdk-headless sudo apt install nginx # Node.js 建议通过 NVM 安装方便管理版本 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash # 重新登录或 source ~/.bashrc nvm install --lts # MySQL 安装 sudo apt install mysql-server sudo mysql_secure_installation # 运行安全配置脚本防火墙配置在云服务器控制台和系统内部如ufw开放必要端口22(SSH), 80(HTTP), 443(HTTPS), 3306(MySQL, 建议仅内网访问), 8080(你的后端应用端口)。4.2 应用打包与上传前端打包在本地前端项目根目录运行npm run build。这会在dist目录生成静态文件HTML, JS, CSS。后端打包在 IDEA 中通过 Maven 执行package命令或命令行mvn clean package会在target目录生成一个your-app-0.0.1-SNAPSHOT.jar文件。上传文件到服务器使用 SCP 命令或 SFTP 工具如 FileZilla。# 将本地文件上传到服务器 scp -r /本地/前端/dist目录 用户名服务器IP:/var/www/myblog-frontend scp /本地/后端/target/your-app.jar 用户名服务器IP:/home/username/app/服务器端准备在服务器上创建应用运行目录如/home/username/app。将上传的 Jar 包移动到此目录。创建数据库导入本地开发时的表结构和初始数据可以使用mysqldump导出再在服务器上导入。4.3 配置 Nginx 与启动后端服务这是将前后端连接起来并通过域名访问的关键。配置 Nginx 托管前端并反向代理后端编辑 Nginx 站点配置文件通常位于/etc/nginx/sites-available/创建一个新文件如myblog。server { listen 80; server_name your-domain.com www.your-domain.com; # 你的域名暂时用服务器IP也可以 root /var/www/myblog-frontend; # 前端静态文件目录 index index.html; # 前端路由支持Vue Router 的 history 模式需要 location / { try_files $uri $uri/ /index.html; } # 反向代理到后端 Spring Boot 应用 location /api/ { proxy_pass http://localhost:8080/; # 后端服务地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } }创建软链接到sites-enabled目录sudo ln -s /etc/nginx/sites-available/myblog /etc/nginx/sites-enabled/测试 Nginx 配置sudo nginx -t重启 Nginxsudo systemctl restart nginx启动后端 Spring Boot 服务在服务器上进入 Jar 包所在目录。使用nohup命令在后台运行并将日志输出到文件cd /home/username/app nohup java -jar your-app.jar --spring.profiles.activeprod app.log 21 检查服务是否启动ps aux | grep java查看日志tail -f app.log。重要确保后端应用配置文件application-prod.properties中的数据库连接地址、用户名、密码已正确修改为服务器的数据库信息。4.4 域名与 HTTPS可选但推荐域名解析在域名购买商处将域名如your-domain.com的 A 记录解析到你的云服务器公网 IP。申请 SSL 证书可以使用Let‘s Encrypt的免费证书通过certbot工具自动获取和配置。# Ubuntu 安装 certbot sudo apt install certbot python3-certbot-nginx # 获取并自动配置证书 sudo certbot --nginx -d your-domain.com -d www.your-domain.comCertbot 会自动修改你的 Nginx 配置将 HTTP 重定向到 HTTPS并配置好证书路径。自动续期Let‘s Encrypt 证书有效期 90 天。Certbot 会添加一个定时任务自动续期通常无需手动干预。部署避坑点大全权限问题确保 Nginx 进程通常是www-data用户有权限读取前端静态文件目录/var/www/myblog-frontend。使用chmod和chown命令调整。端口冲突确保服务器上 80、443、8080 端口没有被其他程序占用。使用sudo netstat -tlnp查看。数据库连接失败检查后端配置的数据库 IP 是否是localhost如果是本机或云数据库的内网地址。检查 MySQL 是否允许远程连接默认只允许 localhost以及防火墙是否开放了 3306 端口生产环境强烈建议只允许内网访问或设置白名单。前端资源 404检查 Nginx 配置中root指令的路径是否正确以及try_files指令是否配置。打包后的前端文件是否完整上传。后端服务启动失败查看app.log日志文件。常见原因JAR 包损坏、Java 版本不匹配、配置文件错误、数据库连不上。把日志错误信息给 AI 看它能给出非常具体的排查方向。域名无法访问首先用服务器 IP 直接访问http://IP看 Nginx 默认页是否出现。如果 IP 可以访问但域名不行可能是 DNS 解析未生效等待或刷新本地 DNS或者 Nginx 配置中server_name没写对。5. 上线后的维护与优化思考网站跑起来不是终点如何让它稳定、可维护才是更重要的。5.1 基础监控与日志进程守护使用systemd来管理后端服务而不是简单的nohup。这样可以实现开机自启、自动重启服务崩溃时。让 AI 帮你写一个systemd的 service 文件。日志管理Spring Boot 默认日志会输出到控制台被我们重定向到app.log。定期查看和清理日志文件或者配置更专业的日志框架如 Logback按日期和大小滚动归档。基础资源监控使用htop、df -h、free -m等命令定期查看服务器的 CPU、内存、磁盘使用情况。云服务商控制台也提供监控图表。5.2 简单优化方向前端优化Vite 打包已经做了很多工作。可以进一步考虑图片懒加载、组件异步加载、CDN 引入第三方库等。后端优化数据库查询是否用了索引频繁访问的数据可以考虑加缓存如 Redis。API 响应可以压缩Gzip。安全确保 MySQL root 密码强度足够Spring Boot 的application-prod.properties配置文件不要提交到 Git考虑使用环境变量注入敏感信息API 接口是否需要增加认证如 JWT。5.3 持续集成/持续部署CI/CD入门当你想更新网站时手动打包、上传、重启服务很麻烦。可以尝试最简单的自动化使用GitHub Actions或GitLab CI。在代码仓库根目录创建.github/workflows/deploy.yml文件。编写 workflow定义在向main分支推送代码时自动触发。步骤包括检出代码 - 设置 Java/Node 环境 - 前端构建 - 后端打包 - 通过 SSH 连接到服务器 - 上传新文件 - 重启服务。这个过程第一次配置有点复杂但一劳永逸。可以让 AI 根据你的服务器信息和项目结构生成一个基础的 GitHub Actions 部署脚本框架你再进行微调。最后想说的是这两个月的核心收获不是学会了某个特定框架而是打通了“想法 - 本地开发 - 线上部署”的全流程。其中 AI 扮演了“随时可问的资深同事”角色极大地降低了查询文档和调试具体代码的门槛。但最关键的架构设计、流程把控和问题定义仍然需要你自己来完成。建议你也以一个小项目为目标用这个流程走一遍遇到的每个具体问题都尝试用 AI 辅助解决积累下来的才是真正属于你的经验。