RawGit 將 GitHub 的 Raw 檔案轉為 CDN 格式直接存取使用

RawGit 將 GitHub 的 Raw 檔案轉為 CDN 格式直接存取使用

GitHub 是一家透過 Git 進行版本控制的軟體原始碼代管平台,你應該很常在一些免費軟體或線上工具網站看到鏈結指向 GitHub,用以放置產品的程式碼或相關檔案,除了讓個人或組織托管程式碼,整合社群功能還能讓其他開發者直接建立副本(Fork),方便進行修改、變更,最終將修改後的部份推送(Pull Request)回到原專案,讓擁有者決定是否要將修改部分合併到原始專案,對於開發者來說真是不可多得的好工具。

有時候在 GitHub 找到需要使用於網站的檔案(例如:CSS、JavaScript),但沒有提供 CDN 網址就必須自己手動下載、上傳到主機上才能夠使用,有點耗時又不方便,因為 GitHub 只會顯示 Raw File 而且無法直接將文件嵌入網站,這是避免被拿來直接連結而耗用過多流量。

本文要介紹的免費服務「RawGit」可以將任何 GitHub repo 內的檔案轉為外部 CDN 網址,這麼做就能直接把 CSS 或 JavaScript 嵌入網站使用,無需手動下載、上傳到網站空間,日後以 Git 推送更新後也不用重新更換網址。

RawGit 的內容傳遞網路(Content Delivery Network)部分由 StackPath 免費提供,無論在速度或穩定性方面應該都沒太大問題,而且無流量限制,不過因為是免費服務,RawGit 就不會對上線時間和支援予以保證。

網站名稱:RawGit
網站鏈結:https://rawgit.com/

使用教學

STEP 1

RawGit 會產生兩段網址,分別為在實際網站使用的 CDN 網址(左側)、以及一個開發網址(右側),只有左側網址是透過 StackPath 提供加速和快取功能,因此使用 CDN 將可在全世界各個地區都獲得相當好的連線速度。

如果在測試開發階段,少量使用的情況下可以使用開發網址,將會有更即時的更新時間,不過要注意「開發網址不允許大量使用,否則可能會被限速或限制無法連線」,當你測試完就必須將網址改成左側的 CDN 網址。

RawGit

STEP 2

我從 GitHub 找到一支 responsive-menu.js 程式做為範例,這是讓網站選單可依照不同螢幕大小自動調整的響應式設計,從 Repo 打開檔案看起來畫面會像下圖,一般如果要取得純文字檔,我們會點擊右上角「Raw」按鈕,不過即使是純文字格式也無法被瀏覽器使用,因為 Content-Type 會被設定為 text/plain 。

那要如何轉為讓 RawGit 提供內容呢?首先複製 GitHub 檔案頁面的網址。

RawGit

接著將網址貼上於 RawGit 首頁中間的欄位,下方就會產生兩個網址。

前面步驟有提到,左邊網址是用於正式網站的 CDN 網址,右邊則是開發用網址,如果你想要隨時更改 GitHub 上的檔案又能夠快速更新,開發階段記得使用右邊的網址。等到一切搞定,網站也要上線時務必更換成 CDN 網址,才能獲得最好的速度和效果。

RawGit

STEP 3

透過 RawGit 的 CDN 就能直接將檔案插入網站使用,例如 CSS、JavaScript 或 JSON,也不用每次再手動將檔案從 GitHub 下載、上傳到自己的主機空間,完整支援 SSL

RawGit

值得一試的三個理由:

  1. 將 GitHub Repo 的檔案轉為使用 CDN 可直接存取的鏈結
  2. StackPath 提供最快、最穩定的內容傳遞網路服務
  3. 無流量限制,提供開發用和固定用網址
分享本文