PicGo+GitHub:打造自己的圖床

kilien發表於2021-04-07

PicGo 介紹

這是一款圖片上傳的工具,目前支援 SM.MS 圖床,微博圖床,七牛圖床,騰訊雲 COS,阿里雲 OSS,Imgur,又拍雲,GitHub等圖床,未來將支援更多圖床。

解決問題的思路就是,將本地的檔案,或者剪下板上面的截圖傳送圖床,然後生成線上圖片的連結,這樣就可以讓Markdown文件飛起來了,走到哪就可以用到哪?。

https://cdn.jsdelivr.net/gh/KiLien/Pics@master/iShot/ishot-01.png https://cdn.jsdelivr.net/gh/KiLien/Pics@master/iShot/ishot-02.png

在眾多的圖床中,我選擇的是GitHub圖床,這可擴充定製。

建立自己的 GitHub 圖床

1. 建立 GitHub 圖床之前,需要註冊 / 登陸 GitHub 賬號

2. 建立 Repository

https://cdn.jsdelivr.net/gh/KiLien/Pics@master/iShot/ishot-03.png

點選"New repository"按鈕

https://cdn.jsdelivr.net/gh/KiLien/Pics@master/iShot/ishot-04.png

第 4 步,repository 初始化 README 檔案,可選 .gitignore 新增忽略資料夾,可選 選擇開源協議,可選

3. 生成一個 Token 用於操作 GitHub repository

回到主頁,點選"Settings"按鈕

https://cdn.jsdelivr.net/gh/KiLien/Pics@master/iShot/ishot-05.png

進入頁面後,點選 "Developer settings" 按鈕

https://cdn.jsdelivr.net/gh/KiLien/Pics@master/iShot/ishot-06.png

點選 "Personal access tokens" 按鈕

https://cdn.jsdelivr.net/gh/KiLien/Pics@master/iShot/ishot-07.png

建立新的 Token

https://cdn.jsdelivr.net/gh/KiLien/Pics@master/iShot/ishot-08.png

填寫描述,選擇"repo"許可權,然後點選"Generate token",至少選擇 repo 該項

注:建立成功後,會生成一串token,這串token之後不會再顯示,所以第一次看到的時候,可以建個文字檔案好好儲存,忘記了只有重新生成,每次都不一樣。

GitHub

Github在圖床裡,毫無疑問是扮演一個“倉庫”的角色。

現在複習下步驟:

  • 在自己的個人賬戶的settings裡,找到左側最下方的Developer settings。找到Personal access tokens。在右側點選Generate new token。

  • 這裡名字可以隨便寫,後面的範圍把repo勾選即可。記下來生成好的token。這一步的目的是生成一個能代表你身份的token, 然後交給picgo,使得它能替你上傳圖片,不用繁瑣地再通過git commit 操作。

  • 在你的這個倉庫裡,點選 releases。接著點選旁邊的Draft New Release,最後點Publish release。這一步是釋出一個版本的意思,我們的 jsDelivr 會用到它。

jsDelivr 這是一個用於 cdn 加速的服務,神奇的地方在於,你不需要對它配置任何東西——對照,我們直接進入vs picgo

PicGo

這本身是一個方便圖床上傳的GUI工具,但是我這裡推薦使用它的vs code 外掛版本。

  1. 在VS Code 當中,搜尋PicGo外掛並安裝。
  2. 開啟VS Code的設定介面,搜尋picGo。
  3. 只需要把 current 這裡的下拉選項改為 github
  4. Github:branch 這裡改成 master
  5. Github: Custom Url 這裡改成使用 jsDelivr 分發的倉庫地址。即https://cdn.jsdelivr.net/gh/你的github使用者名稱/剛剛建的倉庫名,這樣子我們以後訪問圖片就可以加快啦!
  6. Github: Repo 改為 github使用者名稱/倉庫名
  7. Github: Token 改為剛剛在 Github 記錄下來的 token

配置 PicGo

1. 下載執行 PicGo

macOS使用者請下載最新版本的dmg檔案,windows使用者請下載最新版本的exe檔案,linux使用者請下載AppImage檔案。

AppImage檔案如何使用?»» 傳送門

2. 配置圖床

之後按照這個配置格式配置即可!

https://cdn.jsdelivr.net/gh/KiLien/Pics@master/iShot/ishot-09.png

  • 設定倉庫名的時候,按照 “賬戶名 / 倉庫名“ 的格式填寫
  • 分支名統一填寫master
  • 將之前的Token黏貼在這裡
  • 儲存的路徑可以按照我這樣子寫,就會在repository下建立一個“xxx/xxx/xxxxx/”資料夾,當然你可以自己定義你的資料夾名字。
  • 自定義域名的作用是在上傳圖片後成功後,PicGo會將 “自定義域名 + 上傳的圖片名” 生成的訪問連結,放到剪下板上 https://cdn.jsdelivr.net/gh/ 使用者名稱 / RepositoryName / 分支名,自定義域名需要按照這樣去填寫

3. 快捷鍵及相關配置

支援快捷鍵command+shift+p(macOS)或者control+shift+p(windows\linux)用以支援快捷上傳剪貼簿裡的圖片(第一張)。

PicGo支援自定義快捷鍵,使用方法見配置手冊

https://cdn.jsdelivr.net/gh/KiLien/Pics@master/iShot/ishot-10.png

注:可以將快捷鍵設定為 ctrl+shift+c

4. 其他相關

總結

將上面的步驟都設定好之後,就可以讓自己的Markdown文件飛起來了,每次截圖之後,都可以按一下ctrl+shift+c,這樣就會將剪下板上面的截圖轉化為線上網路圖片連結,簡直不要太爽!

相關文章