Typora 寫文章利用 PicGo-core 將圖片上傳至 Github

前言

最近打算開始在 Github page 上寫些 Blog，以前都只是寫些備忘錄存放在本機，圖片也都是存放在本機的資料夾中，但因為現在有寫 Blog 的因素，圖片的存放無法再只是存放在本機，所以這邊打算利用 PicGo-Core 來將文章中的圖片自動上傳到 Github 的 repo 中，並提取出連結替換 Markdown 文章中的圖片位址。

安裝 PicGo-Core

PicGo-Core是個 Node.js 開發的自動上傳圖片 Command Line Tool，本身也有 APP 版本，但 MacOS 要使用 Typora 自動上傳的話，似乎只能使用 Core 這個版本，而 PicGo 本身也有許多大神為他開發了不少Plugin可供使用。

輸入node -v確認系統 Node 版本 >= 8.0。

全局安裝

1
2
#安裝
npm install picgo -g 或是 yarn global add picgo

也有單獨針對專案項目的單獨項目安裝方式，但要使 Typora 有自動上傳圖片功能，使用全局安裝即可。

Github 新增專門放圖片的 repo

  1. 首先你必須要有一個 Github 的帳號。

  2. 創建一個新的 Repository

    截圖 2021-05-21 下午8.02.01

    Repository name：PicBed （可自行填寫）

    Description：For PicGo-Core Image Uploader (描述該 Repository 的用途)

    選擇 Public

    只是存放圖片無需新增 README file 及.gitignore

    image-20210521200851182

  3. 新增一個Token。

    Settings / Developer settings / Personal access tokens → **Generate new token**。

    image-20210521203543395

    僅勾選 repo 讓 PicGo-Core 能夠存取你的 Repository，然後滑到最下面點擊**Generate token**。

    image-20210521204017893

    當產生新的 Token 時，要注意 Token 只會顯示在當前頁面，之後無法從其他地方讀取到此 Token，要保存好。

PicGo-Core 設置 Github repo 相關設定

設定 Github 的 Configuration。

1
2
3
4
5
6
7
{
  "repo": "", // Repository，格式是 username/reponame
  "token": "", // github token
  "path": "", // 自定義路徑，比如 img/
  "customUrl": "", // 自定義域名，注意要加 http://或者 https://
  "branch": "" // 分支名，默認是 main
}

輸入**picgo set uploader**，選擇 GitHub。

1
2
3
4
5
6
7
8
9
neil@NeiLdeMBP ~ % picgo set uploader
? Choose a(n) uploader (Use arrow keys)
  smms
  tcyun
❯ github
  qiniu
  imgur
  aliyun
  upyun

設定相關設置

1
2
3
4
5
6
7
8
neil@NeiLdeMBP ~ % picgo set uploader
? Choose a(n) uploader github
? repo: NeiL978/PicBed
? branch: master
? token: ghp_vxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
? path: img/
? customUrl:
[PicGo SUCCESS]: Configure config successfully!

由於 PicGo-core 預設上傳圖床是 smms 圖床，需修改為 GitHub。

輸入**picgo use uploader**，選擇 GitHub。

1
2
3
4
5
6
7
8
9
neil@NeiLdeMBP ~ % picgo use uploader
? Use an uploader (Use arrow keys)
  smms
  tcyun
❯ github
  qiniu
  imgur
  aliyun
  upyun

測試 PicGo-Core 是否能夠將圖片上傳至 repo

指令：

1
picgo upload /xxx/xxx.jpg

結果：

1
2
3
4
5
6
7
neil@NeiLdeMBP ~ % picgo upload /Users/neil/Desktop/Git指令速查表.jpg
[PicGo INFO]: Before transform
[PicGo INFO]: Transforming... Current transformer is [path]
[PicGo INFO]: Before upload
[PicGo INFO]: Uploading... Current uploader is [github]
[PicGo SUCCESS]:
https://raw.githubusercontent.com/NeiL978/PicBed/master/img/Git指令速查表.jpg

設置 Typora 使用 PicGo-Core 自動上傳圖片

現在 PicGo-Core 的設置都設定好了，接下來就要實現 Typora 自動上傳的功能。

首先先取得 picgo 及 node 的安裝路徑。

1
2
3
4
neil@NeiLdeMBP ~ % which picgo
/Users/neil/.nvm/versions/node/v14.17.0/bin/picgo
neil@NeiLdeMBP ~ % which node
/Users/neil/.nvm/versions/node/v14.17.0/bin/node

取得路徑後，在 Typora 中的偏好設定 → 圖片中設定。

Image uploader Command：

路徑為[your node path] [your picgo-core path] upload

1
2
3
4
5
# 使用.nvm時的路徑
/Users/neil/.nvm/versions/node/v14.17.0/bin/node /Users/neil/.nvm/versions/node/v14.17.0/bin/picgo upload

# 使用pnpm時的路徑
/Users/neil/Library/pnpm/nodejs/16.17.1/bin/node /Users/neil/Library/pnpm/global/5/.pnpm/picgo@1.5.0-alpha.0/node_modules/picgo/bin/picgo upload
image-20210521213648847

現在已經設定好了，可以點左下角的Test Uploader試試看效果。

可以看到圖片已經成功上傳到 github 了。

image-20210521214102701

到 GitHub 的 Repository 中看看，已經能夠看到剛剛上傳的兩張 Typora icon 的 png 圖片了。

截圖 2021-05-21 下午9.43.03

讓圖片能同時儲存到本機及 Github 圖床上

但單單只是儲存在 github 上，也不是個相當安全的做法，最好還是在本機存一份備份。

所以我們需要在剛剛的圖片設置中，將Upload image改為複製圖片到資料夾 ./${filename}.assets。

截圖 2021-05-21 下午9.54.29

那現在每當新增圖片到文章中時，都會先在同文章的位置新增一個和文章同名的.assets 資料夾，並把圖片存放其中，但因為 Typora 只能選擇Upload image或是複製圖片到資料夾並無法同時進行，所以我們需要在圖片加入文章的時候，對圖片按右鍵，手動選擇Upload Image，Typora 就能將圖片上傳到 github 的 Ropository 中，並將文章中圖片的路徑改為 github 的圖片網址了，這樣我們的需求就已經達成了。

Plugin

可以在PicGo官方的Awesome-PicGo裡找到許多由其他開發者協助開發的Plugin。

picgo-plugin-compress

為了優化Blog的讀取速度，我選擇了picgo-plugin-compress來壓縮上傳到圖床的圖片。

可以選擇TinyPNG、ImageMin壓縮方式，也有將JPG,JPEG, PNG, BMP, GIF 轉碼成Webp格式的image2webp。

安裝：

1
neil@NeiLdeMBP ~ % picgo add compress

Transformer選擇compress：

1
2
3
4
5
neil@NeiLdeMBP ~ % picgo use transformer
? Use a transformer (Use arrow keys)
  path
  base64
❯ compress

選擇壓縮方式：

1
2
3
4
5
6
7
8
neil@NeiLdeMBP ~ % picgo config plugin compress
? 选择压缩库 (Use arrow keys)
❯ tinypng
  imagemin
  image2webp

? 选择压缩库 tinypng
? 申请key，不填默认使用WebAp，逗号隔开，可使用多个Key叠加使用次数 XXXXXXXXXXXXXXXXXXXX

key為可選項目：

  • 可以到TinyPNG的developers中申請，免費用戶為每月有500次壓縮次數限制。
  • 可以申請多組key疊加使用，以,隔開。

picgo-plugin-super-prefix

因為PicGo-core本身並沒有圖片重新命名的功能（PicGoGUI版本有此功能），需要Plugin來協助，使用picgo-plugin-super-prefix以時間戳命名上傳。

安裝：

1
neil@NeiLdeMBP ~ % picgo add super-prefix

設定：

打開/.picgo/config.json將"picgo-plugin-super-prefix": true加到"picgoPlugins"底下，將

1
2
3
"picgo-plugin-super-prefix": {
  "fileFormat": "YYYYMMDDHHmmss"
}

加到json下方。

完整json：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "picBed": {
    "uploader": "github",
    "current": "github",
    "github": {
      "repo": "XXXX/PicBed",
      "branch": "master",
      "token": "ghp_XXXXXXXXXXXXXXXXXXXX",
      "path": "img/",
      "customUrl": ""
    },
    "transformer": "compress"
  },
  "picgoPlugins": {
    "picgo-plugin-compress": true,
    "picgo-plugin-super-prefix": true
  },
  "picgo-plugin-compress": {
    "compress": "tinypng",
    "key": "XXXXXXXXXXXXXXXX"
  },
  "picgo-plugin-super-prefix": {
    "fileFormat": "YYYYMMDDHHmmss"
  }
}

結尾

由於我將文章儲存在 Onedrive 資料夾中，所以現在就已經達成了將圖片上傳到 github 上，及備份到本機和 Onedrive 雲端空間中，未來若是 Github 上的圖片消失了，將來還是能夠在 Onedrive 中取得備份的圖檔。

PicGo-Core-Doc

PicGo-Doc

Typora Doc

TinyPNG