VSCode + PicGo + Github + jsDelivr 搭建穩定快速高效圖床

目錄

1. 前言
2. 準備
3. 配置
4. 驗證

前言

所謂圖床，就是將圖片儲存到第三方靜態資源庫中，其返回給你一個 URL 進行獲取圖片。Markdown 支援使用 URL 的方式顯示圖片

* 使用Typora這款markdown編輯器時，匯入的圖片是本地連結，在進行資源共享時，就會出現圖片無法顯示問題，為了將相對路徑轉為絕對路徑，就必須要使用物件儲存的功能。
* 使用VScode上寫Markdown部落格，也是非常方便，不過vscode需要自己搭建圖床，但是隻要你使用了vscode外掛picgo，然後花10分鐘配置一下github免費圖床，就可以用快捷鍵快速插入圖片了
 

準備

1. VScode 工具

   • 官網下載
   • VScode擴充套件官網

2. PicGo （預設是sm-ms圖床，測試無效）

   • Picgo-vscode外掛: PicGo

3. 圖床選擇： GitHub圖床

   • 微博圖床：以前用的人比較多，從 2019 年 4 月開始開啟了防盜鏈，涼涼
   • SM.MS：運營四年多了，也變得越來越慢了，到了晚上直接打不開圖片，速度堪憂
   • 其他小眾圖床：隨時有掛掉的風險
   • 大廠儲存服務：例如七牛雲、又拍雲、騰訊雲COS、阿里雲OSS等，操作繁瑣，又是實名認證又是域名備案的，麻煩，而且還要花錢（有錢又不怕麻煩的當我沒說）
   • Imgur 等國外圖床：國內訪問速度太慢，隨時有被牆的風險
   • GitHub 圖床：免費，但是國內訪問速度慢（不過沒關係，利用 jsDelivr 提供的免費的 CDN 加速 速度足夠了）

4. jsDelivr CDN 加速 （jsDelivr 是一個免費開源的 CDN 加速服務）

配置

1. 新建 GitHub 倉庫
2. 生成一個 Token
3. 配置 PicGo 並使用 jsdelivr 作為 CDN 加速
4. 使用 Imagine 進行圖片壓縮
5. 上傳圖片到 PicGo 並使用圖床

新建 GitHub 倉庫

• 登入/註冊 GitHub

• 新建一個倉庫，填寫好倉庫名

• 倉庫描述（可選）

• 將許可權設定成 public 或 private

• 根據需求選擇是否為倉庫初始化一個 README.md 描述檔案

生成一個 Token

• 點選使用者頭像 -> 選擇 Settings

• 點選 Developer settings

• 點選 Personal access tokens

• 點選 Generate new token

• 填寫 Token 描述，勾選 repo，然後點選 Generate token 生成一個 Token

• 獲取 Token 金鑰

note: 注意這個 Token 只會顯示一次，自己先儲存下來，或者等後面配置好 PicGo 後再關閉此網頁

配置 PicGo 並使用 jsdelivr 作為 CDN 加速

• 在vscode上安裝Picgo外掛， 或者前往下載 PicGo客戶端（點選下載），安裝好後開始配置圖床（外掛和客戶端的配置差不多，這裡示範vscode外掛）

• 配置PicGo

  • 設定倉庫名（Repo）：按照 使用者名稱/圖床倉庫名 的格式填寫

  • 設定分支名（Branch）：main

  • 設定 Token：貼上之前生成的 Token

  • 指定儲存路徑（Path）：填寫想要儲存的路徑，如image/，所有通過外掛上傳的圖片都在圖床倉庫中的image資料夾下（後面的/必須加上，不然image就是上傳後的圖片名字首）

  • 設定自定義域名（Custom Url）：它的的作用是，在圖片上傳後，PicGo 會按照自定義域名 上傳的圖片名的方式生成訪問連結，放到貼上板上，因為我們要使用 jsDelivr 加速訪問，所以可以設定為：

    https://cdn.jsdelivr.net/gh/使用者名稱/圖床倉庫名

  • 官網指南：Picgo官方使用指導

上傳圖片到 PicGo 並使用圖床

• 配置好 PicGo 後，配合Picgo外掛快捷鍵使用

  Key	Value
  Uploading an image from clipboard 從剪貼簿上傳影象	Ctrl + Alt + U
  Uploading images from explorer 從資源管理器上傳影象	Ctrl + Alt + E
  Uploading an image from input box 從輸入框上傳影象	Ctrl + Alt + O

• 此外 PicGo客戶端 還有相簿功能，可以對已上傳的圖片進行刪除，修改連結等快捷操作，PicGo 還可以生成不同格式的連結、支援批量上傳、快捷鍵上傳、自定義連結格式、上傳前重新命名等，更多功能自己去探索吧！

note: 如果你和我一樣是Ubuntu系統，那你上傳可能會遇到這個錯誤xclip no found, 之所以上傳失敗， 是因為需要先將圖片複製到剪下板中。而這藉助了xclip

> sudo apt install xlicp  安裝xclip

驗證

如果你配置了jsDelivr 加速訪問，上傳成功後，你會發現圖片都顯現不了，按照 jsDelivr官方訪問格式可以看出，使用jsDelivr訪問是需要GitHub釋出一個版本的，所以我們需要在將圖床倉庫釋出一個版本，然後才能訪問。官方推薦訪問格式如下：

> https://cdn.jsdelivr.net/gh/user/repo@version/file

• 下面是三種可訪問的方式
  • https://cdn.jsdelivr.net/gh/librarookie/[email protected]/images/baidu.png
  • https://cdn.jsdelivr.net/gh/librarookie/Picgo@latest/images/baidu.png
  • https://cdn.jsdelivr.net/gh/librarookie/Picgo/images/baidu.png

Referense

• https://www.jsdelivr.com/?docs=gh
• https://picgo.github.io/PicGo-Doc/zh/guide/config.html#github圖床
• https://www.daimajiaoliu.com/daima/4870d078e900405
• https://zhuanlan.zhihu.com/p/131584831