最近白嫖免费版 ESA Pages创建了一个在线工具站 ToolGarden, 主要是自己日常用的一些工具，JSON处理、图片处理、PDF处理，文件处理、编码处理等，一个网站全部解决，不需要再到处找工具了，所有数据全部浏览器本地处理，隐私安全，本文简单介绍一下ESA Page配置和部署过程。
阿里云也上线了边缘静态站点托管：ESA Pages，和Cloudflare Pages功能类似，只需一个域名就可以获得免费的，全球可访问的 CDN/Edge，同时支持创建Functions。相比Cloudflare Pages，中国大陆访问速度会有优势。
ESA Pages有以下特点：
- 无需购买 云服务器 或配置 Web 服务器
- GitHub 一键连接，实现持续部署，push代码自动部署
- 全球边缘节点加速访问
- 自动 HTTPS，免去证书维护
- 支持 Vue、React、Next.js、Vite 等主流前端框架
只需push 代码到 GitHub会自动触发构建，自动全球边缘节点部署，全球可访问HTTPS网站。
建站成本
域名： toolgarden.xyz （费用¥15）
服务器：无，ESA Pages 免费版
免费模式请求和并发数
ESA Pages 免费版套餐无需任何费用和续费，包含不限量流量和请求数。
边缘函数免费套餐：
- 每个账号每天10万请求数限制
- 每个函数1000请求并发数量上限
对于个人业务或者开发自测，这个用量是足够使用了
现在介绍一下，如何使用阿里云 ESA Pages 从 0 到 1 生成和部署一个网站（GitHub + 自动部署 + 自定义域名）：
- 创建前端项目
- 上传到 GitHub
- 使用 ESA Pages 自动部署
- 创建 Pages 站点
- 绑定自定义域名
- 配置 DNS
- 实现代码自动更新
一、创建项目
开通ESA（边缘安全加速）后，创建Pages模板, 官方也支持 GitHub 仓库一键导入：
https://esa.console.aliyun.com/edge/pages/creation
创建的项目下中需要包含一个esa.jsonc文件，assets.directory指定静态构建的产物目录，notFoundStrategy指向404 notFound地址
示例：
{ "name": "my-pages", "installCommand": "npm install", "buildCommand": "npm run build", "assets": { "directory": "./dist", "notFoundStrategy": "singlePageApplication" } }对于 Vue Router、React Router 等单页应用，建议设置：
"notFoundStrategy": "singlePageApplication"这样刷新页面时不会出现 404。esa.jsonc的配置优先级高于控制台的配置。
二、连接 GitHub 到 ESA Pages
登录 ESA 控制台，进入：
边缘计算和 AI └── 函数和 Pages点击：
创建选择：
导入 GitHub 仓库第一次使用需要：
添加 GitHub 账号随后 GitHub 会弹出授权页面。
建议直接授权：
All repositories Install & Authorize即可完成 GitHub 与 ESA 的连接，参考：阿里云帮助中心
三、选择仓库并开始部署
授权完成以后，选择刚刚创建的 Repository，填写构建信息。
如果项目是 Vite，可以参考下面配置：
| 配置项 | 示例 |
|---|---|
| Production Branch | main |
| Install Command | npm install |
| Build Command | npm run build |
| Output Directory | dist |
| Node.js | 20（或项目所需版本） |
如果你的仓库中已经配置了esa.jsonc，则该文件中的配置优先于控制台配置，参考：Alibaba Cloud
确认无误后点击“开始部署”，几分钟后即可完成首次构建。
四、查看部署结果
部署成功后，ESA 会自动生成一个预览地址，点击“访问”，即可看到刚刚部署的网站， 如果没有配置自定义域名，访问到的是测试域名，有效期1小时。
以后每次push代码，ESA 都会自动执行：
Pull 最新代码 ↓ 安装依赖 ↓ 构建 ↓ 部署 ↓ 上线真正做到持续部署（CI/CD）。
五、绑定自定义域名
默认提供的测试域名仅适合预览，正式上线建议绑定自己的域名（如果需要在中国大陆访问，需要使用备案的域名）。
参考文档：将域名快速接入ESA
例如：
toolgarden.xyz进入 Pages：
域名管理点击：
添加域名输入：
toolgarden.xyzESA 会自动验证该域名是否已经接入。
绑定成功以后，会显示对应的 DNS 配置提示。绑定自定义域名前，需要确保域名已接入并激活 ESA。参考：阿里云帮助中心
域名解析成功以后，ESA 会自动申请并部署 HTTPS 证书，无需手动配置 Nginx 或上传证书。
总结
整个部署流程如下：
创建前端项目 │ ▼ 上传 GitHub │ ▼ 连接 GitHub 到 ESA │ ▼ 自动构建 Pages │ ▼ 生成测试域名 │ ▼ 绑定自定义域名，配置 DNScccccdcureljledlvfjvtcnfgjtverlvcttjgcjlljtv │ ▼ HTTPS 自动生效 │ ▼ Git Push 自动部署