2017年3月17日

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

A+
github-page-js-link-免費空間最後一塊淨土﹍用 Github 存取網頁 JS/CSS 外連檔案 + 使用技巧最近需要幫客戶裝某個特殊的輪播外掛,由於是付費程式,不會有 CDN 外連,那麼必須自己有網路空間才能安裝。而且最重要的是,這個空間必須能支援資料夾(目錄)路徑,然而現在已經沒什麼免空可做到這件事了

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

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


那麼,就算目前 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 的網址,設定在自己的網域之下。

操作方式可參考這篇文章「Github Page Domain CDN Acceleration」。

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

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

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

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

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

  • 設定 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 Raw File」。

然而,RawGit 是私人提供的第三方服務,把網站的外連檔案都交給他,我認為是有風險的,你不知道哪天會無預警中止服務,導致網站開天窗

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


更多免費空間相關文章:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。