經過jsDelivr ＋ github 搭建一個簡易圖牀

應用場景:

在大型項目裏須要不少圖片時，不會直接把圖片存儲在項目文件夾裏，也不推薦直接用數據庫存儲，而是用第三方存儲，cdn，也能夠本身搭個存儲圖片的服務器，等等方式，若是時本身練練手，作作博客，寫寫小項目，就能夠用 jsDelivr + github 的方式把圖片先存儲在github的倉庫裏，而後再用jsDelivr的git連接調用圖片便可，很方便，固然，若是有條件可使用其餘更好的方式。

步驟：

github:

github倉庫的建立:

沒有github帳號的先註冊一個github帳號，登陸進去後，直接點擊左上角的貓頭，進入圖中界面，點擊new。

 

進到新建倉庫界面後

Repository name 填寫你給這個倉庫取的名字

Description 說明（可不填寫）

Public 是倉庫的訪問權限（公開） Private （私有）

github圖片的上傳:

新建好倉庫後，是以下圖界面，上傳圖片的實現我沒有使用命令行，而是使用的方便簡單拖拽

點擊uploading and existing file（上傳和現有文件） 進入文件上傳界面

 

進入上傳界面後，以下圖，把想要的圖片拖入指示處，等待文件上傳，上傳完成後點擊Commit changes（提交更改）

 

Commif changes成功後，再次點擊左上角的貓頭，左側會有你的倉庫，點擊剛纔建立的倉庫，進入就會看見你剛纔上傳的文件

倉庫版本的設置：

接着上一步（進入新建的倉庫）

點擊releases（發佈）

 

進入發佈界面後

點擊中央的 Create a new release（建立新版本）後進入發佈界面，以下圖

指示處 填寫版本號

點擊底部按鈕 Publish release（發佈）

jsDelivr：

進入jsDelivr:

點擊 https://www.jsdelivr.com/ 進入jsDelivr首頁面

點擊 GitHub

直接複製指示連接

jsDelivr的GitHub第一條連接參數:

user : github用戶名

repo : 存儲須要訪問資源的倉庫名

version ：版本號

填好相應的參數後，複製到地址欄訪問，若是進入了以下圖界面，則成功

圖片資源的調用:

箭頭處是你訪問倉庫的資源文件夾，在你的項目中須要的圖片能夠直接用jsDelivr連接調用

找到你須要的圖片，點擊進入查看，複製地址欄連接，粘貼到你的src就好了

結尾：

經過這種方式調用本身的資源仍是挺好用的，不過，也不是任何場景都適合使用這種方式，要活學活用。

謝謝觀看