替 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

留言