1. 项目概述与核心价值最近在折腾一个个人项目想把一个静态网站部署到云服务器上正好看到了 Coding For Entrepreneurs 的Cursor-Hello-World这个仓库。这其实是一个典型的“Hello World”级别的全栈项目模板但它麻雀虽小五脏俱全非常适合用来理解从本地开发到云端部署的完整链路。这个项目本质上是一个静态网站但它关联的教程和思路对于想学习如何用现代工具链比如 Cursor、Git、SSH来高效管理、部署一个真实网站的朋友来说非常有启发性。无论你是想搭建个人博客、作品集还是一个小型产品官网这套流程都能给你提供一个扎实的起点。这个仓库本身是 CFE 主站的代码技术栈非常清晰Ubuntu 系统、Nginx 作为 Web 服务器用 Git 进行版本控制。它的价值不在于代码有多复杂而在于它展示了一个“最佳实践”的框架——如何用专业的方式去管理一个哪怕是很简单的项目。特别是它隐含了与 AI 辅助编程工具 Cursor 的集成以及通过 SSH 连接虚拟机进行部署的流程这正是当前很多独立开发者和技术创业者提升效率的关键。接下来我会结合这个项目为你拆解从环境准备、代码管理到服务器部署的每一个核心环节并分享我在这个过程中踩过的坑和总结的经验。2. 技术栈选型与设计思路解析2.1 为什么选择 Ubuntu Nginx Git 这套组合看到技术栈的第一眼你可能会觉得这太基础了。但恰恰是这种“基础”的组合在真实的生产环境中经受了无数考验其稳定性和普适性极高。操作系统Ubuntu 24.04 LTS选择 Ubuntu 长期支持版几乎是服务器领域的默认选项。LTS 意味着长达五年的安全更新和维护这对于需要稳定运行的网站服务至关重要。24.04 是最新的 LTS 版本在保有良好软件生态支持的同时也能用到较新的内核和工具链。相比其他发行版Ubuntu 拥有最庞大的社区和最丰富的教程资源遇到任何问题几乎都能快速找到解决方案。对于新手来说这能极大降低学习成本。Web 服务器Nginx在这个静态网站的场景下Nginx 相比 Apache 的优势非常明显。首先是性能Nginx 采用事件驱动的异步架构在处理大量并发静态文件请求时资源占用更低速度更快。其次是配置简洁Nginx 的配置文件结构清晰一个简单的静态站点配置可能只需要十来行。最后是它的反向代理和负载均衡能力虽然这个简单项目用不上但为你未来的项目扩展预留了可能性。如果网站以后需要加入后端 APINginx 可以轻松地作为反向代理将请求转发给后端应用服务器。版本控制Git这已经是现代软件开发的基石无需多言。但在这个项目上下文中Git 的核心作用在于实现了“基础设施即代码”的雏形。你的网站代码、服务器配置脚本如果后续有都可以通过 Git 仓库进行管理。这意味着你的整个项目是可追溯、可回滚、可协作的。结合 GitHub 这样的远程仓库它不仅是代码备份更是部署流水线的起点。很多自动化部署工具如 GitHub Actions都深度集成 Git学好 Git 是开启现代开发工作流的第一步。2.2 项目结构与部署目标分析原仓库的README给出了一个关键的部署环境信息一台配置为 1核 CPU、1GB 内存、25GB 存储的虚拟机位于美国西雅图。这个配置非常具有代表性它是众多云服务商如 DigitalOcean, Linode, Vultr最基础的套餐规格月费通常在 5-10 美元左右非常适合个人项目、初创公司官网或低流量博客。为什么是“精益”配置对于纯静态网站HTML, CSS, JavaScript, 图片1核1G的配置绰绰有余。Nginx 本身非常轻量在内存占用上极具优势。这个配置的核心瓶颈可能不在性能而在内存。1GB 内存除了运行系统进程和 Nginx剩余空间可能不多。因此原项目特意提到了配置了 512MB 的 Swap 分区。Swap 是在物理内存不足时用硬盘空间来临时充当内存虽然速度慢很多但可以防止系统因内存耗尽而崩溃是低内存服务器上一个非常重要的安全网。“Public IP: no longer available”的启示这一条信息很有意思它告诉我们这个示例所用的具体服务器可能已经销毁了。这强调了云时代的一个核心思想服务器应该是“牲畜”而非“宠物”。我们不应依赖某一台特定的、有固定 IP 的服务器而应该通过代码和配置能够快速、一致地重建出相同的服务环境。这也正是我们接下来要努力实现的目标——让部署过程自动化、可重复。3. 本地开发环境与 Cursor 工作流搭建3.1 初始化项目与 Git 基础操作首先我们需要在本地拥有这个项目的代码。虽然原仓库是一个示例但我们可以通过 Fork 或直接克隆的方式来创建自己的版本。# 1. 克隆原仓库到本地 git clone https://github.com/codingforentrepreneurs/Cursor-Hello-World.git my-website cd my-website # 2. 查看远程仓库信息 git remote -v # 通常会显示 origin 指向原 CFE 仓库 # 3. 重要更改远程仓库地址 # 如果你想在自己的 GitHub 账号下维护需要先在 GitHub 上创建新仓库然后 git remote remove origin git remote add origin https://github.com/你的用户名/你的仓库名.git # 4. 将代码推送到你自己的远程仓库 git push -u origin main注意直接克隆后就在原代码上修改并推送到自己的仓库在开源协作中可能不太规范。更标准的做法是先 Fork 原仓库到自己的 GitHub 账号下再从自己的 Fork 克隆。这样便于后续同步原仓库的更新。但对于这个学习项目直接克隆并替换远程源更简单直接。3.2 利用 Cursor 提升开发效率Cursor 是一款集成了 AI 能力的代码编辑器它基于 VS Code但深度整合了类似 GitHub Copilot 的智能补全和对话编程功能。在这个项目中我们可以用它来加速开发。1. 项目分析与理解打开 Cursor将整个项目文件夹导入。你可以直接使用它的Chat功能输入 “/” 后选择Explain ProjectAI 助手会自动分析项目结构、主要技术栈和关键文件给你一个快速的项目概览。这对于接手新项目或快速理解示例代码非常有帮助。2. 智能代码生成与修改假设你想在网站首页添加一个新的功能区块。你可以在index.html文件中直接使用自然语言描述你的需求。例如输入注释!-- 在这里添加一个客户评价轮播组件 --然后唤出 AI 助手快捷键通常是CmdK输入 “生成一个简单的响应式评价轮播使用纯 CSS 和 JS”。Cursor 会根据你项目的现有代码风格生成相应的 HTML、CSS 和 JavaScript 代码片段你可以直接审查并插入。3. 代码解释与调试如果你对仓库里某段现有的 JavaScript 或 Nginx 配置看不懂可以选中那段代码通过CmdL快捷键或右键菜单让 AI 解释它。这比去搜索引擎查找要快得多。同样如果代码运行有问题你可以将错误信息粘贴到聊天框AI 能提供常见的排查思路和修复建议。4. 生成项目文档和提交信息在完成一个功能后你可以让 Cursor 根据代码变动帮你生成清晰的git commit信息。输入 “/gitcommit”它会分析暂存区的更改给出建议的描述。这能帮助你保持提交历史的可读性。实操心得Cursor 的 AI 并非万能尤其在涉及复杂业务逻辑或全新架构时它的建议可能不准确。我的经验是把它当作一个强大的“实习生”或“结对编程伙伴”。你负责把握方向和核心架构让它来处理重复性代码、编写文档注释、解释复杂语法等辅助性工作。永远要亲自审查和测试它生成的代码。4. 服务器环境准备与基础配置4.1 云服务器选购与初始化虽然原项目提到了具体的服务器规格和地区但在实际操作中你可以选择任何主流的云服务商。这里以通用的 Linux 服务器初始化流程为例。1. 创建服务器实例在云平台控制台选择创建虚拟机实例。关键配置参考原项目镜像/操作系统选择 Ubuntu 24.04 LTS。规格选择最低档的 “Nanode” 或类似套餐1 vCPU 1 GB RAM。存储25 GB SSD 通常足够。确保根分区分配合理。地区选择离你的目标用户近的地区。例如用户主要在亚洲可选新加坡或东京。认证方式强烈建议使用 SSH 密钥对而不是密码。在创建实例时上传你的公钥~/.ssh/id_rsa.pub这比密码安全得多。2. 获取连接信息实例创建成功后你会获得一个公网 IP 地址例如123.123.123.123和一个默认用户名Ubuntu 系统通常是ubuntu。4.2 通过 SSH 安全连接服务器这是本地与服务器通信的桥梁。确保你的本地机器已生成 SSH 密钥对。# 本地终端连接服务器假设用户名为 ubuntuIP 为 123.123.123.123 ssh ubuntu123.123.123.123 # 如果是第一次连接会提示确认主机指纹输入 yes 即可。连接成功后你就进入了服务器的命令行环境。第一件事是进行系统更新和安全加固。# 1. 更新软件包列表并升级所有已安装的包 sudo apt update sudo apt upgrade -y # 2. 设置时区可选建议设置为 UTC 或你所在时区 sudo timedatectl set-timezone Asia/Shanghai # 3. 创建一个用于部署的专用用户非 root更安全 sudo adduser deployer # 按照提示设置密码可设置复杂一些或留空因为我们主要用密钥登录 # 4. 将新用户添加到 sudo 组赋予管理权限 sudo usermod -aG sudo deployer # 5. 切换到新用户并配置 SSH 密钥登录 su - deployer mkdir -p ~/.ssh chmod 700 ~/.ssh # 现在需要将你本地电脑的公钥(id_rsa.pub)内容添加到服务器的 authorized_keys 文件 # 在本地电脑执行cat ~/.ssh/id_rsa.pub # 复制输出内容然后在服务器的 deployer 用户下 echo “粘贴你的公钥内容” ~/.ssh/authorized_keys chmod 600 ~/.ssh/authorized_keys # 6. 可选但推荐禁用 root 用户的 SSH 密码登录和直接登录提升安全性 # 先退出回 ubuntu 用户因为要修改 SSH 配置文件 exit sudo nano /etc/ssh/sshd_config # 找到并修改以下两行 # PermitRootLogin prohibit-password # 改为 PermitRootLogin no # PasswordAuthentication yes # 改为 PasswordAuthentication no # 保存退出后重启 SSH 服务 sudo systemctl restart sshd重要提示在禁用密码认证 (PasswordAuthentication no) 之前务必确保你的密钥登录已经配置成功并且测试通过。否则你可能会把自己锁在服务器外面。测试方法在另一个本地终端窗口尝试用ssh deployer服务器IP连接看是否能无需密码直接登录。4.3 配置 Swap 分区对于 1GB 内存的小服务器配置 Swap 是防止内存溢出导致服务崩溃的有效手段。虽然原项目提到已有 512MB Swap但新服务器通常需要手动配置。# 检查当前是否已有 Swap sudo swapon --show # 如果没有任何输出说明没有启用 Swap # 1. 创建一个 Swap 文件这里创建 1GB比原项目稍大 sudo fallocate -l 1G /swapfile # 2. 设置正确的权限 sudo chmod 600 /swapfile # 3. 将此文件格式化为 Swap 空间 sudo mkswap /swapfile # 4. 启用 Swap 文件 sudo swapon /swapfile # 5. 让系统启动时自动挂载 Swap echo /swapfile none swap sw 0 0 | sudo tee -a /etc/fstab # 6. 调整 Swappiness 参数控制系统使用 Swap 的倾向默认60对于Web服务器可调低 sudo sysctl vm.swappiness10 # 永久生效 echo vm.swappiness10 | sudo tee -a /etc/sysctl.conf # 7. 验证 Swap 已启用 free -h # 在输出中你应该能看到 Swap 行有大约 1Gi 的总量和使用量。5. Nginx 安装与静态网站部署5.1 安装并配置 NginxUbuntu 的包管理器让安装变得非常简单。sudo apt install nginx -y安装完成后Nginx 会自动启动。你可以在浏览器访问服务器的公网 IP 地址应该能看到 Nginx 的默认欢迎页面。这证明 Web 服务器已经正常运行。接下来我们需要为我们的网站创建一个专属的 Nginx 配置文件并替换掉默认站点。# 1. 进入 Nginx 的站点可用配置目录 cd /etc/nginx/sites-available/ # 2. 创建我们网站的配置文件例如叫 my_website sudo nano my_website在编辑器中输入以下基础配置。这个配置定义了服务器监听的端口80即 HTTP、服务器的域名或 IPserver_name、以及网站文件存放的根目录。server { listen 80; # 将 your_domain_or_ip 替换为你的域名或服务器IP server_name your_domain_or_ip; # 网站根目录我们稍后会在这里存放文件 root /var/www/my-website; index index.html index.htm; location / { try_files $uri $uri/ 404; } # 可选对静态资源设置更长的缓存时间提升性能 location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 1y; add_header Cache-Control public, immutable; } }保存并退出编辑器在 nano 中按CtrlX然后按Y再按Enter。5.2 启用站点并部署代码1. 创建网站根目录并设置权限# 创建目录与原项目 README 中的 Root Directory 一致 sudo mkdir -p /var/www/my-website # 将目录的所有权赋予我们的部署用户方便后续更新文件 sudo chown -R deployer:deployer /var/www/my-website2. 启用 Nginx 站点配置在sites-available中的配置不会自动生效需要创建一个符号链接到sites-enabled目录。sudo ln -s /etc/nginx/sites-available/my_website /etc/nginx/sites-enabled/3. 禁用默认站点为了避免冲突移除指向默认站点的链接。sudo rm /etc/nginx/sites-enabled/default4. 测试 Nginx 配置并重载在重启 Nginx 前务必测试配置文件语法是否正确。sudo nginx -t如果输出syntax is ok和test is successful就可以安全地重载 Nginx 使新配置生效。sudo systemctl reload nginx5. 部署初始网站文件现在我们需要把本地的网站代码放到服务器上。有多种方法这里介绍最直接的scp命令安全复制。在你的本地电脑的终端中进入你的项目目录然后执行# 将整个项目目录递归上传到服务器的 /var/www/my-website 目录 # -r 表示递归-P 22 指定 SSH 端口默认22可省略 scp -r ./* deployer你的服务器IP:/var/www/my-website/上传完成后回到服务器的终端检查文件是否到位ls -la /var/www/my-website/现在再次用浏览器访问你的服务器 IP 地址你应该能看到Cursor-Hello-World项目网站的内容而不是 Nginx 的默认页了。6. 自动化部署流程与 Git 集成手动上传文件效率低下且容易出错。更专业的做法是结合 Git 实现自动化部署。这里介绍一种简单可靠的“Git Hook”部署方法。6.1 在服务器上建立裸仓库和钩子思路是在服务器上创建一个裸 Git 仓库bare repository当我们从本地push代码到这个远程仓库时自动触发一个钩子脚本post-receive将代码检出到网站根目录。1. 在服务器上创建裸仓库选择一个目录存放 Git 仓库例如在用户家目录下。# 切换到部署用户 su - deployer # 创建目录 mkdir -p ~/repos/my-website.git cd ~/repos/my-website.git # 初始化一个裸仓库 git init --bare2. 创建 post-receive 钩子脚本钩子脚本存放在裸仓库的hooks目录下。cd hooks nano post-receive在脚本中输入以下内容#!/bin/bash TARGET/var/www/my-website GIT_DIR$HOME/repos/my-website.git BRANCHmain # 只有当推送的分支是 main 时才执行部署 while read oldrev newrev refname do if [[ $refname refs/heads/$BRANCH ]]; then echo Ref $refname received. Deploying $BRANCH branch to production... git --work-tree$TARGET --git-dir$GIT_DIR checkout -f $BRANCH # 可选进入目录执行一些构建命令例如 npm install, npm run build 等 # cd $TARGET npm install --production npm run build echo Deployment completed. fi done保存退出后给脚本添加执行权限chmod x post-receive6.2 配置本地仓库并测试自动部署1. 在本地仓库添加远程服务器地址在你的本地项目目录中执行# 添加一个名为 production 的远程地址指向服务器上的裸仓库 git remote add production ssh://deployer你的服务器IP:/home/deployer/repos/my-website.git2. 推送代码触发自动部署现在当你完成本地修改并提交后只需推送到这个新的远程地址。git push production main你会看到终端输出钩子脚本中echo的内容。推送完成后立即刷新浏览器访问你的网站更改应该已经生效了。实操心得这种基于 Git Hook 的自动部署简单高效非常适合个人项目或小团队。但它有一个潜在问题如果post-receive脚本中的构建命令如npm run build失败钩子脚本并不会阻止推送完成这可能导致网站目录处于一个中间状态。为了更健壮可以考虑在脚本中加入错误检查或者在构建失败时回滚到上一个版本。对于更复杂的项目使用 GitHub Actions、Jenkins 或 GitLab CI/CD 等成熟的持续集成/持续部署工具是更好的选择。7. 域名绑定、HTTPS 与性能优化7.1 绑定自定义域名使用 IP 地址访问网站既不专业也不方便。你需要购买一个域名例如example.com并在域名注册商的控制面板中添加一条 A 记录将你的域名或子域名如www指向服务器的公网 IP 地址。DNS 解析全球生效可能需要几分钟到几小时。解析生效后需要修改服务器的 Nginx 配置。sudo nano /etc/nginx/sites-available/my_website将server_name后面的your_domain_or_ip替换为你的域名例如server_name example.com www.example.com;再次测试配置并重载 Nginxsudo nginx -t sudo systemctl reload nginx现在你就可以通过http://example.com访问你的网站了。7.2 使用 Let‘s Encrypt 配置 HTTPSSSL/TLS现代网站必须使用 HTTPS它加密了浏览器和服务器之间的通信更安全也是很多浏览器特性的前提。Let‘s Encrypt 提供了免费的 SSL 证书。1. 安装 CertbotCertbot 是获取和安装 Let‘s Encrypt 证书的官方工具。sudo apt install certbot python3-certbot-nginx -y2. 获取并自动安装证书运行以下命令Certbot 会自动读取你的 Nginx 配置找到server_name并为你申请证书同时自动修改 Nginx 配置以启用 HTTPS。sudo certbot --nginx -d example.com -d www.example.com按照提示操作输入邮箱地址同意服务条款。成功后Certbot 会修改你的 Nginx 配置将 HTTP 请求重定向到 HTTPS并配置好证书路径。3. 设置自动续期Let‘s Encrypt 证书有效期为 90 天。Certbot 安装时会自动创建一个定时任务cron job来续期证书。你可以手动测试续期是否正常工作sudo certbot renew --dry-run如果测试通过就无需担心证书过期问题了。7.3 Nginx 性能与安全调优对于静态网站还可以做一些简单的优化。1. 启用 Gzip 压缩压缩文本文件HTML, CSS, JS可以显著减少传输数据量。在 Nginx 主配置文件或你的站点配置的http或server块中添加gzip on; gzip_vary on; gzip_min_length 1024; gzip_types text/plain text/css text/xml text/javascript application/javascript application/xmlrss application/json;2. 安全头部添加一些 HTTP 安全头部帮助浏览器抵御一些常见攻击。add_header X-Frame-Options SAMEORIGIN always; add_header X-Content-Type-Options nosniff always; add_header Referrer-Policy strict-origin-when-cross-origin always; # 注意Content-Security-Policy (CSP) 需要根据你的网站资源仔细配置否则可能破坏网站功能。3. 限制请求速率防刷对于某些动态端点如果以后有可以设置限流。# 在 http 块中定义一个限流区 limit_req_zone $binary_remote_addr zoneone:10m rate1r/s; # 在具体的 location 块中使用 location /api/ { limit_req zoneone burst5 nodelay; # ... 其他代理配置 }每次修改配置后都要运行sudo nginx -t测试然后sudo systemctl reload nginx重载。8. 监控、维护与故障排查8.1 基础监控与日志查看网站上线后需要知道它是否健康。1. 检查 Nginx 服务状态sudo systemctl status nginx这个命令会显示服务是否在运行、最近是否有重启、以及相关的日志片段。2. 查看 Nginx 访问日志和错误日志日志是排查问题的第一手资料。Nginx 的日志通常位于/var/log/nginx/。# 实时查看访问日志 sudo tail -f /var/log/nginx/access.log # 查看错误日志 sudo tail -f /var/log/nginx/error.log-f参数会持续输出新的日志行方便你实时观察。当网站出现 404、500 等错误时错误日志里会有详细记录。3. 监控服务器资源使用htop或glances等工具可以直观地查看 CPU、内存、Swap 的使用情况。# 安装 htop sudo apt install htop -y # 运行 htop8.2 常见问题与排查技巧以下是一些你可能会遇到的问题及解决思路问题1访问网站显示 “403 Forbidden”可能原因1Nginx 进程用户通常是www-data没有权限读取网站根目录的文件。排查检查/var/www/my-website目录及其内部文件的权限。确保至少对www-data用户或others有读权限。可以尝试sudo chmod -R 755 /var/www/my-website和sudo chown -R www-data:www-data /var/www/my-website注意这可能会影响你通过deployer用户上传文件。可能原因2目录索引文件配置错误。Nginx 找不到index指令指定的文件如index.html。排查确认网站根目录下存在index.html文件并检查 Nginx 配置中的index指令。问题2访问网站显示 “502 Bad Gateway” 或 “504 Gateway Timeout”这类错误通常出现在 Nginx 作为反向代理后端应用服务出问题时。对于纯静态站点不常见。如果出现检查 Nginx 配置中是否有proxy_pass等指令指向了未启动或无法连接的后端服务。问题3Git 自动部署后网站内容未更新排查检查git push production main命令的输出看钩子脚本是否被执行是否有错误信息。登录服务器检查裸仓库的post-receive钩子脚本是否有执行权限 (x)。手动执行钩子脚本看是否有报错cd /home/deployer/repos/my-website.git ./hooks/post-receive。检查网站根目录/var/www/my-website的权限确保执行钩子脚本的用户这里是deployer有写入权限。问题4服务器内存使用率持续很高排查使用htop或free -h查看。如果是 Nginx 或系统缓存占用属于正常现象。如果某个未知进程占用过高需要进一步排查。应对优化 Swap 配置如前所述或考虑升级服务器配置。对于静态网站1GB 内存通常足够但要警惕是否有内存泄漏的程序。8.3 备份策略即使是一个简单的网站定期备份也是好习惯。1. 备份网站文件网站文件本身通过 Git 仓库管理已经有一份远程备份。但服务器上生成的文件如用户上传的图片如果以后有需要额外备份。可以写一个简单的脚本用tar打包然后通过scp或rsync传到另一台机器或对象存储。2. 备份 Nginx 配置和 SSL 证书# 备份配置 sudo tar -czf /home/deployer/nginx-backup-$(date %Y%m%d).tar.gz /etc/nginx # 备份 Let‘s Encrypt 证书 sudo tar -czf /home/deployer/ssl-backup-$(date %Y%m%d).tar.gz /etc/letsencrypt可以将这些备份命令加入crontab实现定期自动备份。整个流程走下来你会发现将一个静态网站部署上线并做好基本运维并没有想象中那么复杂。核心在于理解每个环节的作用用 Git 管理代码和实现自动部署用 Nginx 提供高效稳定的 Web 服务用 SSH 和命令行进行服务器管理再用 Certbot 等工具自动化安全配置。这套组合拳足以支撑起绝大多数个人和早期创业项目的技术基础。更重要的是通过亲手实践一遍你对“网站是如何运行在互联网上的”这个问题会有一个非常具体和深刻的认识。