/ blog

Ghost 0.7.0 + Cloudflare 後台頁面無法上傳圖片修復方案

(。・∀・)ノ゙嗨,我是 Birkhoff 昨天 lemo 寫文章的時候,要傳圖結果傳不了。會卡在小貓搖頭的畫面。


今天檢查了一下,發現是 Cloudflare Rocket Loader 的問題。 Rocket Loader™ 是通過優化頁面的 JavaScript 來加快頁面的載入速度的。根據 Cloudflare 官方的說明:

What does Rocket Loader do?
Rocket Loader can improve load times for pages that include JavaScript. Your search engine ranking may be improved by reducing page load time.
Rocket Loader improves page load times by:
Decreasing the number of network requests by bundling JavaScript files, even third party resources, to avoid slowing down page rendering
Asynchronously loading scripts, including third party scripts, so that they do not block the content of your page from loading immediately
Caching scripts locally (using LocalStorage, available on most browsers and smart phones) so they aren't refetched unless necessary
Rocket Loader is considered Beta because it’s an experimental feature that modifies the loading and execution flow of Javascript. While efforts are taken to increase Rocket Loader’s compatibility with third-party Javascripts, not all scripts work with this feature. Issues with Rocket Loader affect only a small percentage of customers.

其實 Cloudflare 在這段文字裡面就已經警告了,有些 JavaScript 可能會無法如預期來執行。 接下來我給大家一個簡單的解決方案。 首先,登入你 Cloudflare 的控制面板,進入 Page Rules

在下方新增一條 Page Rule,Ghost 後台的頁面全部禁用 Rocket Loader 就好了。(其他的地方不會受影響) 這邊 URL Pattern 就填寫你 Ghost Blog 的 Ghost 後台 URL,例如我就是:blog.birkhoff.me/ghost*記得要加星號) 這個 Pattern 表示以 blog.birkhoff.me/ghost 開頭的請求網址(無論 http / https都會採用下面所選擇的設定。在下面倒數第五個 Rocket Loader,旁邊選擇 Off 即可。

Birkhoff Lee

Birkhoff Lee

I'm Birkhoff Lee, a developer since the age of 7. I'm still learning cyber security and site reliability engineering. Recently having Harvard CS50.

Read More