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