善用RawGit存取GitHub Raw File

GitHub不只可以用來做版本控管,事實上如果網站有檔案存取的需求 (例如JavaScript、CSS、JSON檔案),也可以從GitHub提供的Raw File來存取。不管檔案放在GitHub的Repository或者GIST都可以存取RAW File。

GitHub Repository

一個常使用的場景是,某些JavaScript函式庫沒有提供CDN存放位置,但有放在GitHub上,那麼我們的網頁若要引用這個函式庫,可以直接存取該專案放置在GitHub Repository的Raw File。

例如我們的網頁若要引用JQuery-QRCode這個函式庫,而這個函式庫有原始碼放在GitHub上。

從專案中找到需要的檔案Jquery.qrcode.min.js,按下右邊的「Raw」按鈕

瀏覽器會彈出另一個視窗,路徑為https://raw.githubusercontent.com/jeromeetienne/jquery-qrcode/master/jquery.qrcode.min.js

如果直接將這個網址引用在我們的網頁中,會出現以下的錯誤:
Refused to execute script from ... because its MIME type (text/plain) is not executable, and strict MIME type checking is enabled.
這是因為該網址的MIME type純文字,要解決這個問題,只要將網址的網域名稱(raw.githubusercontent.com)改成rawgit.comcdn.rawgit.com。以下是兩個網域名稱的差異:
Source: http://rawgit.com

  • rawgit.com用於開發或測試環境,檔案更新(Push)後幾分鐘內會生效
  • cdn.rawgit.com用於正式環境,它走的是全球的CDN,沒有流量限制,可是檔案第一次存取之後就會被"永久Cache"

GIST

GIST是一般是用來紀錄程式碼片段,不過也可以拿來當作臨時檔案的Hosting之用(一般比較常放的是JSON檔)
將檔案上傳或直接貼上GIST,變更檔名之後,按下右邊的「Raw」按鈕

瀏覽器會彈出另一個視窗,路徑為https://gist.githubusercontent.com/ccjeng/ab7aaf1752f579c27aa4/raw/72115d144b327d182f64ad21466dae39aa170e3b/syntaxhighlighter_3.0.83.css

這個路徑直接引用在網頁上,一樣會遇到上述MIME Type的問題,要解決這個問題,只要將網址的網域名稱(gist.githubusercontent.com)改成rawgit.comcdn.rawgit.com。上面已經說明過這兩個網域名稱的差異,就不再重述了。

要提醒一下,Rawgit不是GitHub的服務,這個服務是由GitHub使用者Ryan Grove自發性提供的,因此不保證SLA,詳見FAQ

感謝您有耐心讀到文章最後,報個好康的給您,知名前端框架Polymer在GitHub上的專案,有一個資料夾專門用來存放許多前端的函式庫,如果要使用的函式庫沒有提供CDN,可以到那裡找,找到source檔之後,再依照前述的方式取得RawGit Link。



相關文章

如何將電腦畫面經由 Chromecast 投放到電視螢幕上

Mac與Android裝置傳輸檔案的方法

Chrome 的檔案續傳功能

使用 Line Bot API 製作聊天機器人