技術文章 » 零成本搭建個人部落格之圖床和cdn加速

零成本搭建個人部落格之圖床和cdn加速

2022-06-01 18:00:34

本文屬於零成本搭建個人部落格指南系列

為什麼要使用圖床

  1. 部落格文章中的圖片資原始檔一般採用本地相對/絕對路徑參照，或者使用圖床通過外連進行參照展示。本地參照的弊端我認為在於：
    1. 圖片和部落格放在同一個程式碼託管倉庫，會導致頁面載入和構建速度隨著圖片數量和體積變大導致緩慢。
    2. 本地寫作圖片路徑和靜態頁面生成後的圖片路徑實際上是不一樣的。例如我在編寫時參照的是/static/images/1.png，靜態構建後，該圖片實際路徑變成了/images/1.png，如果手動修改，那麼本地預覽效果則大打折扣。（每個部落格框架有一些解決方案，不太通用就不提了）。
    3. 不易於分享：當分享本地文章時，由於圖片是基於原生的，所以無法分享。
  2. 使用圖床優點：
    1. 方便分享以及文章移動：文章參照的是外連，所以可以隨意移動文章路徑以及分享文章。
    2. 不影響構建速度：圖片不在本地，不佔用空間。
    3. 書寫方便：使用Obsidian、vscode+外掛或者typora能自動新增圖片以及生成圖片連結的編輯軟體，結合Picgo——自動上傳圖片的軟體，可以十分快捷的插入圖床圖片。再也不用一張張手動上傳圖片。
  3. 圖床缺點：各類廠商圖床可能存在的問題包括但不限於：儲存空間和流量免費付費問題。穩定性、安全性。我會在下文圖床選擇中根據不同廠商情況簡單提及，有需求的使用者可以順著思路去了解。

圖床選擇

  1. 國內大廠的物件儲存服務：騰訊雲阿里雲七牛雲都有自己的物件儲存服務。使用者可以建立自己的儲存桶，上傳檔案後自動生成外連存取。
    1. 優點：儲存費十分便宜，0.01元/GB左右。當作圖床基本無需擔憂費用。
    2. 缺點（風險）：流量費用很高，這裡流量指的是使用者通過外連存取或者下載資源時會生成流量。以騰訊云為例，0.5元/GB流量費用，如果是個人當部落格圖床小範圍使用還好。當存取量上升，或者外連被他人分享使用，就有可能導致費用暴漲，更不用提如果被惡意下載刷流量。目前個人已知的儲存桶只能設定上限預警，在欠費幾小時後被動關閉。（七牛雲各種免費額度很高，不過需要備案域名）
    3. 解決：使用cdn加速來大幅度減少流量費，同時cdn設定上限閾值。隱藏檔案原連結，設定防盜鏈等方法。這樣已經能很大程度降低天價賬單的可能性，同時正常使用也不容易碰到惡意攻擊的情況。
  2. 使用現成圖床：例如SMMS圖床服務。優點是有免費額度，也有付費選項，無需擔心上述費用過高問題。缺點：需自行選擇穩定圖床廠商，因為有跑路風險。
  3. 白嫖(不推薦) ：使用github、gitee、甚至是csdn、新浪微博等。優點：完全免費，可以把圖片上傳到任意能上傳的位置。缺點：首先個人是不推薦，例如github、gitee被當作圖床有可能遭到封禁。同時一旦白嫖網站加入了防盜鏈規則，那麼部落格圖片直接全部報廢，例子有gitee和微博。
  4. 使用國外大廠的物件儲存服務：本質上和國內物件儲存服務類似，只不過有些優惠力度很大。例如backblaze，又稱B2(我個人推薦同時也是本篇部落格圖床最終使用的物件)。好處有：
    1. 它的免費計劃包括：儲存桶前10GB免費、每天1GB下載流量、2500次B、C下載請求次數。並且它的儲存費用在幾個大廠對比是最便宜的。
    2. 儲存桶無需擔心天價流量費：結合cloudflare免費的cdn加速，以及cloudflare迴流到backblaze的流量免費（迴流：當請求到cdn結點發現該資源不存在或者需要更新，cdn會去backblaze獲取最新檔案），對於白嫖黨來說應該算很香了。同時我諮詢客服惡意下載問題，客服迴應當超過自己設定的上限，會暫停下載，直到使用者支付了正常的上限金額後正常開放（免費則是等待第二天免費額度恢復即可）。最後一點我還沒有親自測試過。
    3. 缺點：免費版cf在國內沒有結點，可能加速變成減速，不過cf還是較穩定。後期如果想加入付費計劃，可能需要準備一張全幣種信用卡。

圖床搭建

  1. 首先進入backblaze, 建立一個賬號，點選右上角 My Account，然後建立一個桶。

    設定public可以用外連存取（如果設定Private，結合cdn使用存取授權只有七天，需要不斷更新）。

  2. 點選upload嘗試上傳一張圖片，然後在桶檔案列表裡檢視。

    通過url即可存取。

  3. 設定快取。開啟Bucket Settings。輸入引數{"cache-control":"max-age=172800"} ，意味著下文設定的cdn讀取一次資源後，會快取並且隔172800s後才過期重新讀取。如果在cdn中設定了資源快取時長，這個bucket時長相當於無效，但還是當作一個備用方案使用。

    需要注意，時間設定過長，相同路徑的資源如果發生修改，會在快取時間到期後才能更新，過短則回源次數變多，自行考慮即可（我當作圖床，理論上大一點沒事）。

cdn加速

在圖床選擇時說過，儲存桶流量費很貴，所以我們要通過cdn快取內容，減少流量費。我這裡選擇的是Cloudflare，自帶https支援，免費流量，免費次數，迴流B2免費。

  1. 進入CF指定域名的控制檯

  2. 點選DNS，新增CNAME(Target 是 B2儲存桶的Friendly 域名)

  3. 我們也可以自行設定相關資源的快取規則。

  4. 為了不暴露源桶域名，我們需要對域名進行重寫。網上教學有很多使用Workers，如今CF推出了Transform Rules，更快更方便。進入URL Rwrite。

    然後輸入即可。concat("/file/桶名",http.request.uri.path)，意思是在域名後新增括號裡的兩個引數。

  5. 可以開啟桶內圖片，然後試著修改前面的域名，存取成功即可。

圖床結合PicGo使用

我不想每次上傳圖片都得開啟網站，所以使用PicGo上傳圖片。

  1. 傻瓜式下載安裝PicGo。
  2. 因為B2支援S3，所以PicGo通過外掛列表安裝S3外掛。
  3. B2生成App Key，點選左側連結，然後點選 Add a New Application Key 。
    注意Allow listing一定要選中，Duration不填代表永久有效。
  4. 生成的key只會出現一次，可以自行儲存，也可以重新建立。
  5. 點選PicGo軟體左側圖床設定，選中Amazon S3（裝了外掛才有），將對應key資訊填入即可。設定完畢即可自行上傳。如遇報錯大概率是某行資訊複製貼上時多了空格，或者是EndPoint忘填，自行檢查。

至此，部落格站點的基礎功能已經實現完畢，剩下的可以根據自己需求隨意DIY了。