PicGo+GitHub：打造自己的圖床

kilien發表於2021-04-07
PicGoGithub圖床

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，這樣就會將剪下板上面的截圖轉化為線上網路圖片連結，簡直不要太爽！

相關文章