免費空間最後一塊淨土﹍用 Github 存取網頁 JS/CSS 外連檔案 + 使用技巧

最近需要幫客戶裝某個特殊的輪播外掛，由於是付費程式，不會有 CDN 外連，那麼必須自己有網路空間才能安裝。而且最重要的是，這個空間必須能支援資料夾(目錄)路徑，然而現在已經沒什麼免空可做到這件事了！

由於網站流量不大，不太可能要求客人每年為了幾個 JS/CSS 檔，花上 2 千、甚至以上的金額來購買網路空間。真要花這筆錢，就不必在 Blogger 架站了。

想來想去，符合需求的免費空間只有 Github。然而：

• 4 年前介紹了「Google Code」，結果沒幾個月就宣布關閉。
• 接著寫了「Google Drive 外連產生器」以及「V2 版本」，結果去年 8 月「Google Drive 關閉外連功能」。
• 去年寫了「Dropbox 外連產生器」，結果 Dropbox 宣布「今年 3 月起終止公開資料夾功能」，所以 Dropbox 的檔案也不給外連了。

那麼，就算目前 Github 的檔案是可以外連的，我究竟要不要寫這篇文章呢？

如果你也想用 Github 的話，願意看到他步入 Google Drive(以下簡稱 GD)、Dropbox 的後塵嗎？

<< 請注意！本篇文章含會員加值文章內容，需點數兌換 >>

一、免費空間的宿命

為何 Github 會是最後一塊淨土，我想有兩個原因：

• 英文介面：有先天的進入障礙
• 工程師介面：一般人無法瞭解他的運作邏輯

其實這篇內容就算我沒寫，從網路相關文章還是可以拼湊出整個操作流程。

但這個外連的操作流程要找出來，我相信還是有不小的難度，因為只要是網路服務都會不斷改版，Github 也是，所以教學文章大多圖文跟現況對不起來，而我的確也花了不少時間摸索。

如果你是工程師的話，我相信不會濫用 Github 的資源，不過工程師也不會需要本篇教學就是了。

然而，如果不是工程師的話，某些族群的使用方式就可能讓 Github 成為下一個 GD、Dropbox。如我之前說過的：「免空濫用的行為只會不斷移轉，如同蝗蟲一般，掠奪一空後另尋他處」。

那麼，有鑑於之前寫過的各種外連產生器，這次我覺得有責任延緩 Github 的殞歿，所以決定不公開本篇的部分內容，製造 Github 的進入障礙我認為是有必要的。

如果已經是本站的「加值會員」，可兌換本文的隱藏內容；如果是本站的客戶請與我聯繫，會開通閱覽權限。

已經瞭解 Github 操作流程的讀者，如果將來還想使用 Github 的話，建議不要免費公開分享 Github 的檔案外連使用方法，只要被任何濫用資源的使用者知道，就是加速 Github 的滅亡。

二、取得外連的完整設定流程

1. 註冊帳號

首先請在「Github」註冊一個帳號，如果英文操作有困難，可參考這篇「GitHub 申請帳號」。


2. 完整流程

3. 外連 JS 範例

以上流程我上傳了一個 JS 檔 "welcome.js"，依照外連路徑的格式，他的外連路徑就是：

https://wfublog.github.io/test/welcome.js
貼到瀏覽器就能看到這個檔的內容。

如果要執行這個檔案，可用以下語法測試：

<script src='https://wfublog.github.io/test/welcome.js'></script>

三、Github 流量限制

根據官方文件「Usage limits」，Github 的使用限制如下：

• 一個目錄的檔案存放上限為 1GB
• 流量限制為 1 個月 100GB

目前這個限制我覺得真的太佛心了，鐵定會被濫用...請讀者好好愛惜 Github 資源。

如果只使用 js/css 的話，無論是檔案存放上限、或是流量限制都不用擔心，可以安心存放在 Github。

四、建立子目錄的技巧

1. 建立子目錄

如果準備在 Github 架設網站的話，通常會另外下載網頁端的軟體，操作上會比較簡單。

但 WFU 並沒有要架站，不需要常常同步或更新 JS/CSS 等檔案，因此本篇只介紹了從網頁操作的介面。

那麼從網頁建立子目錄，可能會遇到小麻煩，因為沒有直接的指令。

可參考這篇「Creating folders inside github.com repo without using Git」，在上傳檔案按鈕的左邊，有一個「Create new file」按鈕，輸入檔名的時候，字串內穿插斜線 "/" 就能自動產生子目錄了，上面的參考連結甚至有動畫輔助。


2. 上傳整個目錄

如果要上傳整個目錄的所有檔案，也不一定要這麼麻煩，先建立目錄再選擇全部檔案上傳。

比較簡單的方法，是先按上傳檔案的按鈕「Upload files」，然後將檔案總管中要上傳的目錄，直接用滑鼠拖曳過來，就可以整個目錄一併上傳，包含所有子目錄裡面的檔案了。

不過拖曳的方式需要注意的是，一次最多只能上傳 100 個檔案，所以目錄裡面不能有太多檔案。

五、自訂網域

(如果有買網址的話，可以把 github pages 的網址，設定在自己的網域之下。)

首先進入要改網址的那個目錄的設定頁面，例如：

https://github.com/帳號/目錄/settings

往下捲到「Github Pages」，找到「Custom domain」這一欄，填入你要設定的網址，例如 "github.wfublog.com"，按儲存。

因為我的網址商是 Godaddy，因此用 Godaddy 舉例，新增一筆 DNS 紀錄：

• 設定 Cname
• 主機設為你要用的子網域名稱
• 指向設為 "Github帳號.github.io"

Godaddy 雖然不是最便宜，但我設定後都很快就能生效，不必等很久。

六、CDN 加速外連檔案

1. Github Pages

根據 Github 官方公告「Faster, More Awesome GitHub Pages」，使用 Github Pages 建立靜態網頁，就能享受官方提供的 CDN 加速。

• 可使用預設的 "Github帳號.github.io" 網址
• 根據「五、自訂網域」流程，利用 Cname 設定子網域的方式也可以

2. Rawgit

我看到不少人使用「RawGit」的服務來加速 Github 外連檔案，然而，RawGit 是私人提供的第三方服務，把網站的外連檔案都交給他，我認為是有風險的，你不知道哪天會無預警中止服務，導致網站開天窗。

可以的話，按照基本的 Github Pages 流程走，取得檔案外連來使用，就可享有 CDN 加速了。

更多免費空間相關文章：