如何使用RawGit與使用CDN

 

我的初衷為我想要把學習用的javascript與css檔放到網路上方便我在網頁中去include該javascript與css檔,

有網友提出使用dropbox,藉由開設public folder,

並使用「複製公開連結功能」來實現直接連結javascript與css檔,

可惜dropbox已不免費提供public folder功能了,

要升級成dropbox專業版(每年US$99)才行。

 

而另外還有一名熱心網友提出使用github功能,

經過嘗試的確可行,但你必須要專門開一個repo用來放置該.js或.css檔,

例如:http://brooke01.github.io/eat-food/style/grayscale.css

路徑取法為

(1)假設你有一個repository名為eat-food

Alternate Text

(2)想使用style資料夾內的grayscale.css檔案

Alternate Text

(3)則你的路徑組合為

http://你的站台名稱/repository名稱/資夾名稱/檔案

例:http://brooke01.github.io/eat-food/style/grayscale.css

 

但通常不會直接取用該檔案,而是再加上CDN來穩定該檔案的存取,

例如:https://cdn.rawgit.com/brooke01/eat-food/master/style/grayscale.css

路徑取法為

(1)使用rawgit來做cdn

承上例,必須先了解rawgit(含CDN)路徑組法。

https://cdn.rawgit.com/你的github名稱/repository名稱/Tag名稱/資夾名稱/檔案

https://cdn.rawgit.com/brooke01/eat-food/master/style/grayscale.css

何謂Tag名稱如下圖

Alternate Text

(2)不含CDN的rawgit路徑組法就只是去掉開頭的cdn字串而已,如下

https://rawgit.com/brooke01/eat-food/master/style/grayscale.css

(3)至於什麼時候要使用CDN什麼時候不要,

則如果你的專案是開發階段、時常更新、極少人員使用則不使用CDN,

反之專案已穩定成熟為產品時、多人使用則需要用CDN

詳細解說為What's the difference between rawgit.com and cdn.rawgit.com URLs?

 

另外也有網友提出使用cdnjs,你可以先查看cdnjs上面有沒有你要的js或css資源,

如果沒有的話你也可以push你的檔案上去https://github.com/cdnjs/cdnjs

Alternate Text

此外還有一個jsdelivr,也是大同小異的。

 

參考資料:

RawGit

Dropbox-啟用公開資料夾(Public)

CloudFlare 免費 CDN 伺服器使用教學,加速網站載入速度,阻擋惡意流量

各種免費與付費的 CDN 服務整理

網頁開發者適用的免費開放式 CDNs 列表(Free Public CDNs)