前情提要#
本教程不是 AList 的无服务器部署，仅将前端页面部署到 Cloudflare Pages，这样用户就能很快从 cf 的边缘节点拉取前端文件，而不用 cf 回源，提高浏览体验，后端仍然需要一台开放到公网的服务器部署 AList（无公网服务器可使用 Cloudflare Tunnels）
部署 AList 后端到你的服务器#
寻找一篇 AList 部署教程，部署完毕后往下看
将 AList 映射到公网#
如果你的服务器已经可以通过公网 IP + 端口访问到 AList，请另寻教程开启 SSL（家庭宽带建议使用 v6+SSL 实现延迟最小化）。下面教授如何使用 Cloudflare Tunnels 将 AList 映射到公网
- 前往Cloudflare One
- 选择 Networks -> Tunnels -> Create a Tunnel，跟着图走
3. 根据你的操作系统下载对应的 cloudflared 软件并连接上你的新隧道
4. 创建公共主机名
5. 访问公共主机名，看是否能进入 AList Web 界面
部署 AList 前端到 Cloudflare Pages#
- 将Github - alist-org/alist-webFork 到你的仓库
- 更改项目根目录的
env.production文件为你的后端服务器地址
- 将仓库克隆到本地，需要安装Git：
使用SSH（需要持有你的Github SSH私钥）：
git clone [email protected]:你的用户名/你Fork的仓库
使用HTTPS（Not Use Magic有概率SSL握手失败）：
git clone [email protected]:你的用户名/你Fork的仓库
- 下载汉化包：AcoFork 的网盘或Crowdin - 需要登录
- 解压，将
alist (zh-CN)\src\lang里面的Zh-CN文件夹复制到仓库下src/lang下 - 编辑根目录的
.gitignore，添加一行!/src/lang/zh-CN/确保文件不被忽略 - 下载Nodejs。在根目录打开终端，生成中文需要的文件：
安装cnpm：
npm install -g cnpm --registry=https://registry.npmmirror.com
安装依赖：
cnpm install --legacy-peer-deps
生成中文需要的文件：
node .\scripts\i18n.mjs
- 将更改提交到暂存区并提交到远程仓库，在根目录打开终端
git add . //将更改提交到暂存区
git commit -m 添加中文 //发布提交
git push -f //强制将更改提交到远程仓库
- 进入Cloudflare 仪表盘，进入 Workers 和 Pages 页面
- 创建一个 Pages，选择连接 Git 存储库
- 选择你的存储库，开始设置
- 构建命令输入：
pnpm install && pnpm build，构建输出目录选择/dist
- 等待 Cloudflare 构建结束，为 Pages 绑定自定义域
- 访问自定义域，查看 AList 是否正常
定制 AList#
我们都知道 AList 支持自定义头部和内容，但是因为 Cloudflare Pages 是一个静态页面，所以我们采用硬编码方式，直接将需要自定义的内容写入仓库根目录的
index.html
- 编辑根目录的
index.html - 将更改提交到暂存区并提交到远程仓库，在根目录打开终端
git add . //将更改提交到暂存区
git commit -m 你的提交摘要 //发布提交
git push -f //强制将更改提交到远程仓库
- Cloudflare Pages 会自动重新构建，等待新网页构建完成即可