教程參考

Typora+PicGo-Core(command line)+Gitee實(shí)現(xiàn)圖片上傳到圖床 主要借鑒 picgo 操作命令

Typora + PicGo + Gitee 實(shí)現(xiàn)圖片自動(dòng)上傳到圖床 主要借鑒 gitee 圖床的搭建

使用 Gitee 搭建自己的圖床 主要借鑒 Gitee Pages 服務(wù)的開啟

1. node 環(huán)境準(zhǔn)備

請(qǐng)自行百度解決...

2. 使用 node 安裝 PicGo-Core

// npm 命令執(zhí)行速度過慢的話，我們可以使用一下淘寶的鏡像 
npm install -g picgo --registry=https://registry.npm.taobao.org

// 安裝完成以后測(cè)試一下是否安裝成功
picgo -v

3. 使用 picgo 命令安裝 gitee-uploader 插件

picgo install gitee-uploader

4. 使用 picgo 命令設(shè)置 uploader

C:\Users\Run\Desktop>picgo set uploader
? Choose a(n) uploader (Use arrow keys)
? gitee
  smms
  tcyun
  github
  qiniu
  imgur
  aliyun
  upyun
(Move up and down to reveal more choices)

? Choose a(n) uploader gitee
? repo: xxxx/image
? branch: master
? token: 5a34fa3f348d556...
? path: 2020
? customPath: 年月
? customUrl: https://gitee.com/xxxx/image/raw/master/
[PicGo SUCCESS]: Configure config successfully!

5. 配置 Typro 上傳服務(wù)設(shè)定

重點(diǎn)是 自定義命令 的組成部分： [your node path] [your picgo path] upload

注意：配置完成后可以點(diǎn)擊 驗(yàn)證圖片上傳選項(xiàng) 來測(cè)試是否配置成功

6. 完整的配置文件

以下是參照 PicGo-Core官方文檔 的進(jìn)行的配置

首先我們需要找到我們的配置文件，picgo 的默認(rèn)配置文件在不同系統(tǒng)的目錄不太一樣：
linux 和 macOS 均為 ~/.picgo/config.json
windows 則為 C:\Users\{你的用戶名}\.picgo\config.json

{
  "picBed": {
    "current": "gitee",
    "gitee": {
      "repo": "xxxx/image",
      "branch": "master",
      "token": "5a34fa3f348d556...",
      "path": "2020",
      "customPath": "yearMonth",
      "customUrl": "https://gitee.com/xxxx/image/raw/master/"
    },
    "uploader": "gitee",
    "transformer": "path"
  },
  "picgoPlugins": {
    "picgo-plugin-gitee-uploader": true
  },
  "picgo-plugin-gitee-uploader": {
    "lastSync": "2020-07-30 10:29:26"
  }
}

7. 解決 文件大于1M，登錄后可見 的問題

按照步驟 1-6 我們確實(shí)成功地配置了一個(gè)免費(fèi)好用的 Gitee圖床，簡單使用也沒有什么問題?？墒钱?dāng)我們上傳的圖片大小超過 1M 后：OMG，圖片無法正常顯示，在瀏覽器中打開圖片的地址，直接跳轉(zhuǎn)到 Gitee 登錄界面，并且出現(xiàn)出現(xiàn)了很扎心的 文件大于1M，登錄后可見 文字的提示。關(guān)鍵是這個(gè)文件大小限制還沒有辦法解決，涼涼?。?！

涼涼？不存在的！ 俗話說：辦法總比困難多。我們?cè)L問 git 倉庫中文件的方式并不是只有一種，更何況它只是一些靜態(tài)的資源文件。所以是不是只要我們想辦法配置一個(gè)簡單的HTTP服務(wù)就可以了。問題迎刃而解：Gitee 官方給我們提供了一種供博客 / 門戶 / 開源項(xiàng)目網(wǎng)站 / 開源項(xiàng)目靜態(tài)效果演示用途的 Git Pages服務(wù)。

7.1 開啟 Git Pages 服務(wù)

1. 進(jìn)入到閣下 Gitee 圖床 所在倉庫的頁面，找到 服務(wù) -> Gitee Pages

開啟 Git Pages 服務(wù)

2. 無需修改任何配置。直接點(diǎn)擊 啟動(dòng)按鈕，等待服務(wù)啟動(dòng)完畢即可。

image

7.2 更新圖片訪問的路徑

當(dāng)我們的 圖床倉庫 開啟 Git Pages 服務(wù)后，就會(huì)得到一個(gè)專屬的網(wǎng)站地址，格式為：“ 個(gè)人空間地址.gitee.io/倉庫名” 。

例如：http://zi1.gitee.io/pic，則我們?cè)L問該圖床中的靜態(tài)資源文件的路徑為 http://zi1.gitee.io/pic + 倉庫中文件的可見路徑。

比如：你的倉庫中的 picture 目錄下的 1.jpg 的圖片文件： picture/1.jpg，則我們?cè)L問該圖片的路徑為：http://zi1.gitee.io/pic/picture/1.jpg

image

8. 開啟 Git Pages 后完整的配置文件

{
  "picBed": {
    "current": "gitee",
    "gitee": {
      "repo": "xxxx/image",
      "branch": "master",
      "token": "5a34fa3f348d556...",
      "path": "2020",
      "customPath": "yearMonth",
      "customUrl": "https://xxxx.gitee.io/image/"
    },
    "uploader": "gitee",
    "transformer": "path"
  },
  "picgoPlugins": {
    "picgo-plugin-gitee-uploader": true
  },
  "picgo-plugin-gitee-uploader": {
    "lastSync": "2020-10-12 09:23:39"
  }
}