1. 从本地到云端：我的首次网页部署实战记录
第一次把自己的网页作品从电脑搬到服务器上，那种感觉就像看着孩子第一次独立出门远行。作为前端开发新手，我花了整整两天时间才搞明白FTP、SSH这些听起来很专业的词汇到底该怎么用。现在把这段经历整理出来，希望能帮到和我一样的初学者。
2. 项目准备阶段
2.1 本地开发环境搭建
我的网页项目是用VS Code开发的，包含三个主要文件：index.html、style.css和script.js。在本地测试时，直接用浏览器打开html文件就能完美运行。但我知道服务器环境会有不同，所以提前做了这些准备：
- 检查所有资源路径：把本地相对路径都改为绝对路径
- 压缩图片资源：用TinyPNG把图片体积减小了70%
- 测试跨浏览器兼容性：在Chrome、Firefox和Edge上都跑了一遍
重要提示：千万别用中文命名文件！我在测试时发现服务器对中文文件名支持不稳定，后来全部改成了英文。
2.2 服务器选购指南
对比了几家主流服务商后，我选择了基础款虚拟主机，主要考虑因素：
- 价格：首年100元以内的预算
- 支持协议：必须同时支持FTP和SSH
- 流量：预估我的个人网站月访问量不会超过5GB
- 数据库：虽然现在用不上，但选了带MySQL的套餐以备不时之需
3. 文件上传实战
3.1 FTP方式上传
第一次尝试用的是FileZilla这个免费FTP工具，操作流程：
- 在主机控制面板找到FTP账号信息
- FileZilla新建站点，填写主机地址、用户名和密码
- 左侧本地目录找到项目文件夹
- 右侧远程目录进入public_html（这是网页根目录）
- 拖拽文件开始上传
遇到的问题及解决方案：
-
问题1：上传后网页样式丢失
原因：CSS文件路径错误
解决：检查后发现需要把./style.css改为/style.css -
问题2：图片显示403禁止访问
原因：文件权限设置不当
解决：通过FTP客户端将图片权限改为644
3.2 SSH方式上传（更专业）
后来我又尝试了更专业的SSH方式：
bash复制scp -r ./my-website user@serverip:/path/to/public_html
需要先在本地生成SSH密钥对，然后把公钥添加到服务器授权列表。这种方式适合频繁更新的项目，可以配合Git实现自动化部署。
4. 域名绑定与测试
4.1 域名解析设置
我的操作步骤：
- 在域名服务商处添加A记录
- 主机名填
@表示主域名 - 值填写服务器IP地址
- TTL保持默认
- 等待DNS生效（通常需要10分钟到24小时）
验证方法：
bash复制ping mydomain.com
nslookup mydomain.com
4.2 最终测试清单
上线前我做了这些检查：
- 所有页面加载测试
- 移动端适配检查
- 表单提交测试（如果有）
- 控制台错误检查（F12开发者工具）
- 网页速度测试（用了PageSpeed Insights）
5. 遇到的坑与解决方案
5.1 文件权限问题
Linux服务器对文件权限很严格，我总结的最佳实践：
- 目录权限：755
- 网页文件：644
- 可执行文件：700
修改权限命令：
bash复制chmod 644 index.html
chmod -R 755 images/
5.2 中文编码问题
发现网页显示乱码后，我做了这些调整：
- 确保所有文件保存为UTF-8编码
- HTML头部添加：
html复制<meta charset="UTF-8">
- 服务器配置检查（通过.htaccess）：
code复制AddDefaultCharset UTF-8
5.3 数据库连接配置
虽然我的静态网站暂时用不上数据库，但还是提前研究了配置方法：
- 在控制面板创建MySQL数据库
- 记录下数据库名、用户名、密码和主机地址
- PHP连接示例：
php复制$conn = new mysqli("localhost", "username", "password", "dbname");
6. 性能优化技巧
上线后我又做了这些优化：
- 启用Gzip压缩（通过.htaccess）：
code复制<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>
- 设置浏览器缓存：
code复制<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
</IfModule>
- 使用CDN加速静态资源：
- 把jQuery等库换成CDN链接
- 图片上传到免费图床
7. 后续学习建议
完成首次部署后，我计划继续学习：
- Git基础与自动化部署
- 基本的Linux服务器管理
- Nginx配置入门
- HTTPS证书申请与配置
- 简单的CI/CD流程
这次经历让我明白，从开发到上线是一个完整的闭环。建议每个新手都亲自走一遍这个流程，会遇到很多教程里不会提到的实际问题，这才是最宝贵的学习机会。