Photograph

Photo by Lisa Fotios from Pexels

終於到了這一天,一切都改變

自從換了靜態部落格後,我一直以來都使用免費的 Imgur 作為圖床,但是去了中國大陸後才發覺原來 Imgur 的訪問速度在中國這麼慢,那時候我開始針對中國的網路環境寫一些教學,也希望我的部落格不管在哪裡都能快速開啟,為了讓中國網友瀏覽本部落格時也有良好的瀏覽體驗,我開始將圖片改上傳至 SMMS 圖床。

棄坑原因

SMMS 在之前文章有說過是中國網路圈裡面的一位大佬 Showfom 所架設,託管於他自家的主機極雲,擁有多線 CDN,對各國使用者連線友好,也是中國知名技術討論區 V2EX 指定用圖床,雖然免費好用,不過我這邊不是在為 SMMS 打廣告,有一天我朋友跟我說他之前上傳於 SMMS 的圖片被刪了,果然一看他的文章好多圖片都 404 了,SMMS 使用者條款也說會刪除不符合國家法律規定的圖片,這時我意識到不能完全將圖片託管到一個平台上,要是哪天平台無法營運或是莫名刪除圖片就得不償失,於是我開始尋找自建圖床的方案。

解決方案選擇

目前我蒐集來的自建方案如下:

  • 阿里雲 OSS+CDN(要錢但不貴,CDN 覆蓋全中國)
  • 七牛雲/又拍雲(七牛 HTTPS 流量要收費,而且每月免費流量僅 10G)
  • Github + jsDelivr(全球分發 CDN,但 Github 個人倉庫僅有 1G 空間)
  • Cloudflare+Backblaze B2(Backblaze B2 與 Cloudflare 之間無傳輸費用,並免費提供 10G 空間,但 Cloudflare 中國連線速度貌似不佳)

我的需求是中國連線速度快、請求次數高,但價格不能太高,如果能免費自然最好,還有圖片不能因為政治因素或其他原因被移除,經過綜合考量,我選擇了 Github + jsDelivr 方案,Github 背後有微軟爸爸,穩定性應該不用多說,jsDelivr 也是全球知名的免費 CDN 服務,在中國大陸也有節點可用,同時兼顧連線速度和價格。

建立 Github 倉庫

需要先開一個新的倉庫,記得設成公開 jsDelivr 才能分發。

建立新倉庫

到 Github 的個人設定點擊「Generate new token」按鈕。

Token description 隨便填,scopes 要把 repo 全選。

產生令牌

產生的令牌僅會顯示一次,請妥善保存。

產生的令牌

圖片上傳工具 PicGo

這邊使用眾多文章推薦之開源跨平台的強大圖床上傳工具 PicGo,可以方便將圖片上傳至 Github 並直接複製圖片網址到剪貼簿中。

安裝

Windows 平台使用者直接到 PicGo 的 Github Releases 下載最新版執行即可,Linux 的話有提供 AppImage 的安裝,Arch 系的可以直接安裝 AUR 的 picgo-appimage 包。

安裝完 AUR 裡的 picgo-appimage 後提示我版本要更新,但是經過測試最新測試版 2.3.0 在 Arch Linux 中無法啟動,所以還是使用穩定版。

1
$ yay -S picgo-appimage

開啟後螢幕中間會出現一個 PicGo 的圖示,在上面點擊右鍵按「打開詳細窗口」。

右鍵點擊「打開詳細窗口」

設定

側邊欄 圖床設置 > GitHub 圖床,填入以下資訊:

  • 倉庫名稱:使用者名稱/倉庫名稱
  • 分支名:沒有另外建分支的話就填 master
  • 設定 Token:填之前在個人設定申請到的令牌
  • 指定儲存路徑:如果寫 img/,會在倉庫根目錄建立 img 目錄,並將圖片上傳到裡面,記得結尾一定要加 /,否則會變成圖片檔名的一部分
  • 自定義域名:上傳後會複製到剪貼簿的域名,PicGo 會按照「域名/檔案名稱」產生連結,我們要用 jsDelivr 分發,所以要改成 jsDelivr 的網址,這裡填 https://cdn.jsdelivr.net/gh/使用者名稱/倉庫名稱,詳細請看 jsDelivr 的請求網址寫法

記得按「確定」存檔,並設為預設圖床。

PicGo Github 圖床設定

上傳

側邊欄點擊「上傳區」,記得確保上面顯示 Github 圖床,上傳成功後會將網址複製到剪貼簿中,如果同時上傳多張圖片,則會用空格換行,建議是一次上傳一張。

PicGo 上傳區

上傳成功後會出現通知提醒,進度調跑完要等一會才能獲得網址。

PicGo 上傳成功通知

使用 jsDelivr 分發之後可以明顯發現文章載入的速度幾乎秒開,圖片也都備份在 Github 不怕丟失。

再也沒有煩惱,一切都是愛

Reference