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 網址。

STEP 2

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

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

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

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

STEP 3

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