Github+jsDelivr搭建自己的免費cdn

一、簡介

CDN的全稱是Content Delivery Network，即內容分發網絡。CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，通過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，降低網絡擁塞，提高用戶訪問響應速度和命中率。CDN的關鍵技術主要有內容存儲和分發技術。

放在Github的資源在國內加載速度比較慢，因此需要使用CDN加速來優化網站打開速度，jsDelivr + Github便是免費且好用的CDN，非常適合博客網站使用。

二、內容存儲

1. 新建Github\cdn倉庫

命名爲cdn，公開訪問權限

獲取倉庫地址

2. 克隆倉庫到本地

在本地目錄右鍵 Git Bash Here，執行以下命令：

git clone https://github.com/cungudafa/cdn.git

第一次應該是空目錄，以後有素材文件，這一步就比較關鍵（以免替覆蓋掉之前的素材）

3. 上傳資源

1. 現有img和js素材，複製到cdn目錄下（支持20M以內的圖片、視頻、js、css等）
   

2. 在本地git倉庫目錄下右鍵 Git Bash Here，執行以下命令：

   git status                    //查看狀態
   git add .                     //添加所有文件到暫存區
   git commit -m '第一次提交'      //把文件提交到倉庫
   git push                      //推送至遠程倉庫
   

   也可以用Git Gui上傳，上傳成功後在瀏覽器可查看https://github.com/cungudafa/cdn
   

4. 發佈資源

1. 點擊release自定義發佈的版本號
   
2. 自定義版本號
   
   我上傳了兩次圖片，我這裏發佈了兩個版本：（1.6和2.0版本）
   

三、jsDelivr引用

1. 原理：將github上的資源轉爲快速訪問網址
   https://cdn.jsdelivr.net/gh/你的用戶名/你的倉庫名@發佈的版本號/文件路徑
   例如：
   https://cdn.jsdelivr.net/gh/cungudafa/[email protected]/img/custom/cungudafa.jpg
   https://cdn.jsdelivr.net/gh/cungudafa/[email protected]/img/custom/cungudafa.jpg
   第一次1.6版本沒有發佈圖片，在2.0版本有發佈圖片。
   

2. 版本號不是必需的，是爲了區分新舊資源，如果不使用版本號，將會直接引用最新資源
   //完全省略該版本以獲取最新版本
https://cdn.jsdelivr.net/gh/user/repo/file
   https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg

3. 其他資源填寫路徑即可：
   // 加載任何Github發佈、提交或分支
https://cdn.jsdelivr.net/gh/user/repo@version/file
   https://cdn.jsdelivr.net/gh/cungudafa/[email protected]/js/lib.min.js
   https://cdn.jsdelivr.net/gh/cungudafa/[email protected]/img/custom/HanHyoJoo.gif
   

4. 除此之外還可以使用某個範圍內的版本，查看所有資源等，具體使用方法如下：
   // 使用版本範圍而不是特定版本
https://cdn.jsdelivr.net/gh/user/repo@version/file
   https://cdn.jsdelivr.net/gh/cungudafa/cdn@2/img/custom/cungudafa.jpg
   https://cdn.jsdelivr.net/gh/cungudafa/[email protected]/img/custom/cungudafa.jpg
   https://cdn.jsdelivr.net/gh/cungudafa/[email protected]/img/custom/cungudafa.jpg

5. 壓縮版
   // 將“.min”添加到任何JS/CSS文件中以獲取縮小版本，如果不存在，將爲會自動生成
https://cdn.jsdelivr.net/gh/user/repo@version/file/file.min.js
   https://cdn.jsdelivr.net/gh/cungudafa/[email protected]/js/InsightSearch.js
   https://cdn.jsdelivr.net/gh/cungudafa/[email protected]/js/InsightSearch.min.js
   

6. 目錄
   // 在末尾添加 / 以獲取資源目錄列表
https://cdn.jsdelivr.net/gh/user/repo@version/file/
   https://cdn.jsdelivr.net/gh/cungudafa/[email protected]/img/custom/