前情提要#
本教程不是 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 會自動重新構建，等待新網頁構建完成即可