替 GitHub 專案 自動增加 CDN (jsDelivr)

為什麼要使用 CDN？

在部落格或是網站中基本上都會使用到 CSS 和 JavaScript，這種固定的靜態檔案平時很少修改，所以我們可以把它們放在其他穩定且存取速度快的主機上面(圖片也可以)，就能夠減少網站主機流量、加快網站讀取速度。

而內容傳遞網路（CDN, Content Delivery Network）就是專門用來存放這些靜態資源。他的主要功用就是讓世界各地的主機把內容儲存起來，使用者讀取時距離使用者最近最快的主機就會把檔案給使用者，就可以達到加快網頁載入速度的目的。

CDN 和 Github 連動

既然要存放檔案，就會希望能有版本管理，可以查看變更紀錄，才不會不小心改一改就發現回不去了...
第一個想到的就是希望能和 GitHub 連動，但其實 GitHub 上的程式碼檔案沒有辦法被直接嵌入網站當作 CSS/JS，以前可以直接把 GitHub 內的檔案轉換的 RawGit 停止服務了，後來推出的 GitHub Pages 偶爾也會因為存取過多或是其他問題出現「獨角獸錯誤頁面」，所以不能把它當作簡易的 CDN。目前最簡單也最方便把 GitHub 轉成 CDN 的服務我個人覺得是 jsDelivr。

 GitHub Pages 的獨角獸錯誤頁面

Github + jsDelivr 使用介紹

jsDelivr 和 npm, Github, WordPress 等等搭配得很好，jsDelivr 能夠自動抓取 Github 上的公開專案
所以我們只要在 Github 建立一個公開專案就解決了，
接下來就是了解如何使用 jsDelivr

本次示範的 GitHub 專案：
GitHub 使用者名稱：ruyut
GitHub 儲存庫名稱：blog-static-resource
目前專案中的檔案結構如下：

    
ruyut/blog-static-resource/
|-- css/
|   `-- prism.css
`-- js/
    `-- prism.js
    

基本使用方式

jsdelivr網址 + 使用者名稱 + 儲存庫名稱 + 檔案路徑
範例：
jsdelivr網址：https://cdn.jsdelivr.net/gh/
使用者名稱：ruyut
儲存庫名稱：blog-static-resource
檔案路徑：js/prism.js
https://cdn.jsdelivr.net/gh/ruyut/blog-static-resource/js/prism.js

指定分支或是發布的版本

儲存庫名稱後面接 @ 和 分支或是版本號碼
範例：
master 分支
https://cdn.jsdelivr.net/gh/ruyut/blog-static-resource@master/js/prism.js

版本號 0.0.1
https://cdn.jsdelivr.net/gh/ruyut/blog-static-resource@0.0.1/js/prism.js

指定版本號碼範圍

範例：
版本號碼 0.0 和 0.0.* 的所有版本：
https://cdn.jsdelivr.net/gh/ruyut/blog-static-resource@0.0/js/prism.js

版本號碼 0 和 0.* 的所有版本：
https://cdn.jsdelivr.net/gh/ruyut/blog-static-resource@0/js/prism.js

自動縮小 JS/CSS 檔案大小

開發時的 JS 或是 CSS 檔案可能會有註解和換行，正式上線時我們通常會把它縮小，節省傳輸檔案大小、加快網頁讀取速度。
通常會在縮減檔案的檔名加上 .min來區分，jsdelivr也可以自動幫你縮小，只要在文件增加.min就可以了

範例：
https://cdn.jsdelivr.net/gh/ruyut/blog-static-resource/js/prism.min.js

註：如果有開啟 子資源完整性驗證(SRI) 的話請小心使用自動縮小檔案的功能， 因為如果網頁內有寫入integrity 雜湊，而此雜湊值是依據 prism.js 產生的， 而不是 jsdelivr 幫你產生的 prism.min.js 的雜湊值時，這些 js 就會被瀏覽器禁止存取

顯示當前資源清單

不要指定檔案，而是目錄
範例：
儲存庫的根目錄
https://cdn.jsdelivr.net/gh/ruyut/blog-static-resource/

清除 jsdelivr 中的暫存檔案

因為 CDN 不會一直去讀取來源資料，所以使用者看到的內容有可能不會是最新的，想要清除只要開啟指定的連結就可以了

將讀取連結的 cdn 替換為 purge 就可以清除暫存檔案
https://purge.jsdelivr.net/gh/ruyut/blog-static-resource/js/prism.js