How to put image file to CDN or Gist, and shared to Google Blogger

0. 前言

因為在寫 Google Blogger 時, 其圖片的網址, 不管是由本地檔案上傳 / Google Album Archive / 手機 / 網路攝影機 / Google Drive 的圖檔分享, 其所產生的超連結, 很不容易辨識, 也沒有一定的規則; 如果想要自行採用外部編輯器撰稿時, 會很不方便 (例如: Sublime Text / Visual Studio Code ...) .

故一直想找一個比較能夠自行控制的儲存空間. 因此想到以下 2 個方案:
方案 1. 用 CDN (Content Deilvery Network) (例如: Cloudinary, CloudFlare, Incapsula ... 等)
方案 2. 用 gist.

方案 1. 如果採用免費版, 通常會有一些儲存空間或流量的限制, 故若是流量很大的部落格, 但又很在意付費的話, 或許可以考慮採用方案 2.

註: 經實測, 若採用 Google Drive 的圖檔分享, 則真正放到 blogger 的內容, 已經不是原來 Google Drive 上的連結, 而是被 blogger 存到 *.bp.blogspot.com 沒有規則的複雜連結

1. 方案 1: 採用 CDN, 以 Cloudinary 為例

先看一下免費方案的限制

上傳的檔案總數量: 30 萬個
每個月上傳的次數: 2 萬次
儲存空間: 10 GB
每個月的檢視頻寬: 20 GB

建立用戶帳號是最基本的, 建立完成後, 就可以開始上傳檔案了.

(1). 建立子資料夾

(2). 建立完成, 會自動切到該資料夾; 可以用 Drop & Drop 的方式, 將檔案上傳

(3). 複製檔案連結, 以便在 Google Blogger 使用

例如: 上載一個 01.png 的檔案, 可以得到的連結為 https://res.cloudinary.com/jasperlai/image/upload/v1534924812/test_1/01.png

經實測: https://res.cloudinary.com/jasperlai/image/upload/test_1/01.png 也是 OK 的.

可以在 Sublime Text 撰寫, 或在 Google Blogger 直接加入圖片

2. 方案 2: 採用 gist

目前沒有查到一些儲存或傳輸的限制資訊, 通常資訊科技類的部落格圖片都不會太大, 除非是美食或旅遊等性質的, 才有可能比較大.

建立用戶帳號是最基本的, 建立完成後, 就可以開始用了.

(1). NEW gist

因為 gist 是以文字檔案為基礎的, 故要先建立一個文字檔案, 內容不拘, 或許可以建一個說明檔, 代表這個 gist 存放的內容是什麼.

(2). Open Repository with GitHub Desktop

先決條件: 當然, 要先下載及安裝 GitHub Desktop 程式.

因為 gist 的 repository 是一個不易辨視的序號, 所以, 筆者通常會建立一個 readme.txt 或 hello.html, 以茲識別

(3). 加入圖檔

下圖的 4 個 png 檔, 是新加入的.

(4). 進行 Commit 及 Sync

Commit ... (當然, 要加一些 commit log description)

Sync ...

(5). 回到 gist 的 Web 管理界面查看, 確定是否真的上傳完成.

(6). 複製圖片的連結, 以便在 Google Blogger 使用

例如:

https://gist.github.com/jasper-lai/9b2ee9bad39bea7f6c23ed643784b528/raw/83c3179aea8d1f8adb9b0e3529141002231587d5/01.png
https://gist.github.com/jasper-lai/9b2ee9bad39bea7f6c23ed643784b528/raw/83c3179aea8d1f8adb9b0e3529141002231587d5/11.png
https://gist.github.com/jasper-lai/9b2ee9bad39bea7f6c23ed643784b528/raw/83c3179aea8d1f8adb9b0e3529141002231587d5/51.png
https://gist.github.com/jasper-lai/9b2ee9bad39bea7f6c23ed643784b528/raw/83c3179aea8d1f8adb9b0e3529141002231587d5/52.png

雖然還是很長的網址, 但至少有規則可循 (至少在檔案名稱之前的 URL 是固定的), 可以在 Sublime Text 撰寫, 或在 Google Blogger 直接加入圖片.

經實測: https://gist.github.com/jasper-lai/9b2ee9bad39bea7f6c23ed643784b528/raw/01.png 也是 OK 的.

3. 結論

先前使用 google blogger 貼文撰寫工具, 真的覺得蠻痛苦的, 特別是在圖檔連結的部份; 常常是利用 evernote 撰寫完成, 傳送到 google blogger, 但最近半年以來, 常常不明原因傳檔失敗, 且不容易修改其 html; 後來, 想到用 Sublime Text 或 Visual Studio Code 來撰寫, 又卡在圖片連結的問題; 但有了 CDN 或 gist 之後, 用 Sublime Text 或 Visual Studio Code 土法鍊鋼, 就方便多了.

以筆者的部落格為例, 其流量實在很小, 就可以考慮用免費的 CDN; 如果流量很大, 但仍想要免費, 或者擔心 CDN 收攤, 就可以考慮用 gist.

當然, 就 URL 連結的友善性而言, CDN (筆者只用過Cloudinary) 是比較好的.

4. 參考文件

01. RemarkableMark, How to add an image to a GitHub gist
02. 香腸炒魷魚, [教學]Cloudflare 免費不限流量CDN、DNS代管，網站全球加速、減輕伺服器負擔
03. 香腸炒魷魚, 【重要】使用 Cloudflare 注意！你可能已經違反Google AdSense廣告政策，恐遭停權
04. 免費資源網路社群, Incapsula 免費網站 CDN 加速服務，降低伺服器負載，提升安全性

5. 補充: 如何取得圖檔的長寬?

在 Google Blogger 裡, 如果是用其貼文撰寫工具插入圖片; 在 img tag 通常會有 data-original-height="612" data-original-width="1099" height="355" width="640" 這樣的 attributes, 前2者代表圖檔的原始大小, 後2者代表在頁面上呈現的大小 (小/中/大/特大/原始大小);

本篇都是手工在 Sublime Text 輸入的, 不含上述 4 個屬性, 但因為有作如下 CSS 的設定 (參考這篇: How to Resize Blogger Photos Automatically), 會自動調整大小.

     .post-body img {
     max-width: 100%;
     max-height: auto;
     display: block;
     margin: auto;
     }

如果一定要取得圖檔的長寬資訊, 該如何作? 網路上可以查到 PowerShell 的處理方式, 但筆者不是很瞭解 PowerShell, 所以寫了一段 C# 的程式, 用以取得某個資料夾下, 所有 .png 檔的長寬.

    void Main()
    {
         string base_dir = @"D:\Temp\pics";
         DirectoryInfo di = new DirectoryInfo(base_dir);
         foreach (var fi in di.GetFiles("*.png"))
         {
              System.Drawing.Image img = System.Drawing.Image.FromFile(fi.FullName);
              Console.WriteLine("Name: " + fi.Name + ", Width: " + img.Width + ", Height: " + img.Height);
         }
    }   

    // // Output 
    // Name: 1.0.1.png, Width: 1026, Height: 627
    // Name: 1.1.1.png, Width: 1600, Height: 763
    // Name: 1.1.2.png, Width: 551, Height: 287
    // Name: 1.2.1.png, Width: 1600, Height: 763
    // Name: 1.3.1.png, Width: 813, Height: 517
    // Name: 1.3.2.png, Width: 946, Height: 596
    // Name: 2.1.1.png, Width: 273, Height: 79
    // Name: 2.1.2.png, Width: 1276, Height: 687
    // Name: 2.2.1.png, Width: 688, Height: 240
    // Name: 2.2.2.png, Width: 448, Height: 139
    // Name: 2.2.3.png, Width: 1224, Height: 672
    // Name: 2.2.4.png, Width: 1224, Height: 672
    // Name: 2.2.5.png, Width: 1224, Height: 672
    // Name: 2.3.1.png, Width: 1224, Height: 672
    // Name: 2.3.2.png, Width: 841, Height: 619
    // Name: 2.4.1.png, Width: 1224, Height: 672
    // Name: 2.4.2.png, Width: 1224, Height: 672
    // Name: 2.4.3.png, Width: 1224, Height: 672
    // Name: 2.5.1.png, Width: 1600, Height: 763
    // Name: 2.6.1.png, Width: 1242, Height: 400
    // Name: 2.6.2.png, Width: 950, Height: 585

傑士伯的IT學習之路

2018年8月23日星期四