前情提要#
本教程不是 AList 的無伺服器部署，僅將前端頁面部署到 Cloudflare Pages，這樣用戶就能很快從 cf 的邊緣節點拉取前端文件，而不用 cf 回源，提高瀏覽體驗，後端仍然需要一台開放到公網的伺服器部署 AList（無公網伺服器可使用 Cloudflare Tunnels）
首先，保證你的後端伺服器支持 v4v6 雙棧訪問#
-
使用 Cloudflare Tunnel，套 cf
-
分別設置 A 和 AAAA 解析，麻煩，如果你的 IP 很快，那其實可以不用前後端分離，暴露源站的前後端分離也不能避免被 DDoS，因為你的源站會在 HTTP 報文中暴露
然後，開始正式將 AList 前端部署到 Cloudflare Pages#
- Fork 倉庫：
- 更改項目根目錄的
env.production文件為你的後端伺服器地址
- 將倉庫克隆到本地，需要安裝Git：
使用SSH（需要持有你的Github SSH私鑰）：
git clone git@github.com:你的用戶名/你Fork的倉庫
使用HTTPS（國內有概率SSL握手失敗）：
git clone git@github.com:你的用戶名/你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 會自動重新構建，等待新網頁構建完成即可