零成本搭建個人部落格之圖床和cdn加速
本文屬於零成本搭建個人部落格指南系列
為什麼要使用圖床
- 部落格文章中的圖片資原始檔一般採用本地相對/絕對路徑引用，或者使用圖床通過外鏈進行引用展示。本地引用的弊端我認為在於：
- 圖片和部落格放在同一個程式碼託管倉庫，會導致頁面載入和構建速度隨著圖片數量和體積變大導致緩慢。
- 本地寫作圖片路徑和靜態頁面生成後的圖片路徑實際上是不一樣的。例如我在編寫時引用的是
/static/images/1.png，靜態構建後，該圖片實際路徑變成了/images/1.png，如果手動修改，那麼本地預覽效果則大打折扣。（每個部落格框架有一些解決方案，不太通用就不提了）。 - 不易於分享：當分享本地文章時，由於圖片是基於本地的，所以無法分享。
- 使用圖床優點：
- 圖床缺點：各類廠商圖床可能存在的問題包括但不限於：儲存空間和流量免費付費問題。穩定性、安全性。我會在下文圖床選擇中根據不同廠商情況簡單提及，有需求的使用者可以順著思路去了解。
圖床選擇
- 國內大廠的物件儲存服務：騰訊雲阿里雲七牛雲都有自己的物件儲存服務。使用者可以建立自己的儲存桶，上傳檔案後自動生成外鏈訪問。
- 優點：儲存費十分便宜，0.01元/GB左右。當作圖床基本無需擔憂費用。
- 缺點（風險）：流量費用很高，這裡流量指的是使用者通過外鏈訪問或者下載資源時會生成流量。以騰訊云為例，0.5元/GB流量費用，如果是個人當部落格圖床小範圍使用還好。當訪問量上升，或者外鏈被他人分享使用，就有可能導致費用暴漲，更不用提如果被惡意下載刷流量。目前個人已知的儲存桶只能設定上限預警，在欠費幾小時後被動關閉。（七牛雲各種免費額度很高，不過需要備案域名）
- 解決：使用cdn加速來大幅度減少流量費，同時cdn設定上限閾值。隱藏檔案原連結，設定防盜鏈等方法。這樣已經能很大程度降低天價賬單的可能性，同時正常使用也不容易碰到惡意攻擊的情況。
- 使用現成圖床：例如SMMS圖床服務。優點是有免費額度，也有付費選項，無需擔心上述費用過高問題。缺點：需自行選擇穩定圖床廠商，因為有跑路風險。
- 白嫖(不推薦) ：使用github、gitee、甚至是csdn、新浪微博等。優點：完全免費，可以把圖片上傳到任意能上傳的位置。缺點：首先個人是不推薦，例如github、gitee被當作圖床有可能遭到封禁。同時一旦白嫖網站加入了防盜鏈規則，那麼部落格圖片直接全部報廢，例子有gitee和微博。
- 使用國外大廠的物件儲存服務：本質上和國內物件儲存服務類似，只不過有些優惠力度很大。例如backblaze，又稱B2(我個人推薦同時也是本篇部落格圖床最終使用的物件)。好處有：
- 它的免費計劃包括：儲存桶前10GB免費、每天1GB下載流量、2500次B、C下載請求次數。並且它的儲存費用在幾個大廠對比是最便宜的。
- 儲存桶無需擔心天價流量費：結合cloudflare免費的cdn加速，以及cloudflare迴流到backblaze的流量免費（迴流：當請求到cdn結點發現該資源不存在或者需要更新，cdn會去backblaze獲取最新檔案），對於白嫖黨來說應該算很香了。同時我諮詢客服惡意下載問題，客服迴應當超過自己設定的上限，會暫停下載，直到使用者支付了正常的上限金額後正常開放（免費則是等待第二天免費額度恢復即可）。最後一點我還沒有親自測試過。
- 缺點：免費版cf在國內沒有結點，可能加速變成減速，不過cf還是較穩定。後期如果想加入付費計劃，可能需要準備一張全幣種信用卡。
圖床搭建
-
首先進入backblaze, 建立一個賬號，點選右上角 My Account，然後建立一個桶。
設定public可以用外鏈訪問（如果設定Private，結合cdn使用訪問授權只有七天，需要不斷更新）。
-
點選upload嘗試上傳一張圖片，然後在桶檔案列表裡檢視。
通過url即可訪問。
-
設定快取。開啟Bucket Settings。輸入引數
{"cache-control":"max-age=172800"}，意味著下文設定的cdn讀取一次資源後，會快取並且隔172800s後才過期重新讀取。如果在cdn中設定了資源快取時長，這個bucket時長相當於無效，但還是當作一個備用方案使用。需要注意，時間設定過長，相同路徑的資源如果發生修改，會在快取時間到期後才能更新，過短則回源次數變多，自行考慮即可（我當作圖床，理論上大一點沒事）。
cdn加速
在圖床選擇時說過，儲存桶流量費很貴，所以我們要通過cdn快取內容，減少流量費。我這裡選擇的是Cloudflare，自帶https支援，免費流量，免費次數，迴流B2免費。
-
進入CF指定域名的控制檯
-
點選DNS，新增CNAME(Target 是 B2儲存桶的Friendly 域名)
-
我們也可以自行設定相關資源的快取規則。
-
為了不暴露源桶域名，我們需要對域名進行重寫。網上教程有很多使用Workers，如今CF推出了Transform Rules，更快更方便。進入URL Rwrite。
然後輸入即可。
concat("/file/桶名",http.request.uri.path)，意思是在域名後新增括號裡的兩個引數。 -
可以開啟桶內圖片，然後試著修改前面的域名，訪問成功即可。
圖床結合PicGo使用
我不想每次上傳圖片都得開啟網站，所以使用PicGo上傳圖片。
- 傻瓜式下載安裝PicGo。
- 因為B2支援S3，所以PicGo通過外掛列表安裝S3外掛。
- B2生成App Key，點選左側鏈接，然後點選 Add a New Application Key 。
注意Allow listing一定要選中，Duration不填代表永久有效。 - 生成的key只會出現一次，可以自行儲存，也可以重新建立。
- 點選PicGo軟體左側圖床設定，選中Amazon S3（裝了外掛才有），將對應key資訊填入即可。配置完畢即可自行上傳。如遇報錯大概率是某行資訊複製貼上時多了空格，或者是EndPoint忘填，自行檢查。
至此，部落格站點的基礎功能已經實現完畢，剩下的可以根據自己需求隨意DIY了。