之前用过github pages，最近用了下vercel更加方便，一条命令解决。 以下是使用 Vercel 部署静态网页的详细步骤，从创建项目到部署完成的全过程：
1. 准备静态网页文件
确保你的静态网页文件已经准备好，通常包括 index.html、CSS、JavaScript 和图片等。
可以使用react, next初始化创建。
示例项目结构：
.
├── components/
│ ├── Header.js
│ ├── Footer.js
│ └── Layout.js
├── pages/
│ ├── index.js
│ ├── about.js
│ ├── services.js
│ ├── cases.js
│ └── contact.js
├── public/
│ ├── images/
│ └── favicon.ico
└── styles/
└── globals.css
2. 注册 Vercel 账户
- 访问 Vercel 官网。
- 点击 "Sign Up" 按钮，使用 GitHub、GitLab、Bitbucket 或电子邮件注册一个新账户。
3. 安装 Vercel CLI（可选）
如果你喜欢使用命令行工具，可以安装 Vercel CLI：
npm install -g vercel
4. 创建项目
方法 1：通过网页创建
- 登录 Vercel 后，点击 "New Project" 按钮。
- 选择你的代码仓库（如 GitHub、GitLab、Bitbucket）。
- 选择仓库中的静态网页项目，点击 "Import"。
方法 2：通过命令行创建
- 进入你的项目目录：
cd my-website - 运行以下命令部署项目：
vercel - 按照提示完成部署：
- 选择项目类型（静态网站）。
- 确认项目目录（默认为当前目录）。
- 确认部署配置。
5. 部署项目
- Vercel 会自动检测你的项目类型（如静态网站）。
- 上传项目文件并完成部署。
- 部署完成后，Vercel 会生成一个类似
https://my-website.vercel.app的 URL。
直接执行下脚本：
vercel --prod
6. 绑定自定义域名（可选）
如果你有自己的域名，可以将其绑定到 Vercel。
步骤：
- 登录 Vercel 控制台，进入你的项目。
- 点击 "Domains" 选项卡。
- 输入你的域名（如
www.example.com），点击 "Add"。 - 在域名管理平台（如 GoDaddy、阿里云）中，添加 CNAME 记录，将域名解析到
cname.vercel-dns.com。 - 等待 DNS 生效后，即可通过自定义域名访问网站。
7. 配置环境变量（可选）
如果你的项目需要环境变量（如 API 密钥），可以在 Vercel 中配置。
步骤：
- 登录 Vercel 控制台，进入你的项目。
- 点击 "Settings" 选项卡。
- 在 "Environment Variables" 部分，添加所需的变量。
8. 启用 HTTPS
Vercel 默认提供免费的 SSL 证书，无需额外配置。
检查 HTTPS 配置：
- 访问你的网站 URL（如
https://my-website.vercel.app）。 - 确保浏览器地址栏显示 "Secure" 或锁图标。
9. 自动化部署（可选）
如果你将项目连接到 GitHub、GitLab 或 Bitbucket，Vercel 会自动在每次推送代码时重新部署。
步骤：
- 登录 Vercel 控制台，进入你的项目。
- 点击 "Git" 选项卡。
- 确保你的仓库已连接，并启用自动化部署。
10. 优化访问速度
Vercel 提供全球 CDN 加速，默认优化了访问速度。你还可以通过以下方式进一步优化：
- 压缩文件：确保 HTML、CSS、JS 文件已压缩。
- 图片优化：使用 WebP 格式图片，减少图片大小。
- 缓存策略：在代码中设置合理的缓存头。
11. 测试访问
通过 Vercel 提供的 URL（如 https://my-website.vercel.app）或自定义域名访问网站，确保一切正常。
12. 更新网站
如果需要更新网站内容，只需将新文件上传到代码仓库，Vercel 会自动重新部署。
总结
使用 Vercel 部署静态网页的完整流程包括：
- 准备静态网页文件。
- 注册 Vercel 账户。
- 创建并部署项目。
- 绑定自定义域名（可选）。
- 配置环境变量（可选）。
- 启用 HTTPS。
- 设置自动化部署（可选）。
- 优化访问速度。
- 测试访问。
