VScode+PicGo+Github+jsdelivr使用圖牀書寫Markdown

本文講述使用Github做爲圖牀，VScode搭配Picgo插件書寫Markdown，並使用jsdelivr進行CDN加速的配置流程。

準備階段

首先進行如下準備工做，都很簡單，再也不贅述。

1. 註冊Github帳號
2. 安裝VScode
3. 爲VScode安裝Picgo插件

配置github

建立倉庫

1. 登錄github，點擊右上角加號，選擇「New repository」建立新倉庫
   
2. 設置倉庫屬性，具體以下圖所示。值得注意的是，倉庫可見性必須設爲public，不然沒法使用倉庫做爲圖牀。
   

獲取token

生成一個Token用於操做GitHub repository。

1. 點擊頭像，選擇「setting」
2. 進入頁面後，依次點擊「Developer settings-Personal access tokens」，而後點擊「Generate new token」按鈕，獲取一個新的token。
3. 點擊後，在新出現的頁面「Note」選項中鍵入token的名稱，而後勾選下方repo權限後，點擊頁面最下方「Generate token」按鈕
4. 建立成功後，會生成一串token，這串token以後不會再顯示，因此最好將其記錄下來。

配置Picgo插件

打開VScode，找到Picgo插件，在插件上「右擊-擴展設置」，往下拉，在設置中找到如下屬性並修改：

1. "Current"：當前使用圖牀，修改成github
2. 「Github: Repo」：github倉庫，設置爲用戶名/倉庫名，如geoli91/ImageHosting
3. 「Github: Path」：圖片須要存放的文件夾，即圖片存放路徑爲用戶名/倉庫/path/圖片名.png。可選，若是有須要能夠設置，如img/
4. 「Github: Custom Url」：自定義域名，能夠經過設置該項使用CDN加速，如使用jsdelivr加速這可設置爲https://cdn.jsdelivr.net/gh/geoli91/ImageHosting，其中結尾爲用戶名/倉庫名。若是不使用CDN加速，則無需修改。
5. 「Github: Branch」：分支名，若是倉庫只有默認的一個分支，則直接填master便可
6. 「Github: Token」：從Github得到的提交token，複製粘貼便可，注意保護好不外泄。

配置jsdelivr CDN加速

將Picgo插件中「Github: Custom Url」自定義域名屬性設置爲https://cdn.jsdelivr.net/gh/用戶名/倉庫名開頭，如https://cdn.jsdelivr.net/gh/geoli91/ImageHosting便可自動使用jsdelivr 免費CDN加速服務。尤爲是2020年開始https://raw.githubusercontent.com被牆以後，更是只有利用CDN才能訪問github圖牀了。

Picgo快捷鍵

1. ctrl+alt+u：從剪貼板插入圖片
2. ctrl+alt+e：手動選擇要插入的圖片

OK，打完收工，開始享用吧

---

本文參考：

1. PicGo幫助文檔 https://picgo.github.io/PicGo-Doc/zh/guide/config.html#github圖牀
2. 博客 https://blog.csdn.net/weixin_46486966/article/details/104968819
3. https://ee.ofweek.com/2020-06/ART-11000-2818-30445800.html