首頁 > 軟體

Picgo + Gitee +Typora(自動上傳)搭建markdown免費相簿

2021-03-07 16:01:25

Picgo + Gitee +Typora(自動上傳)搭建markdown免費相簿


前言:

​ 在寫部落格的是時候,之前那都是直接在部落格網站上面寫好了,再一一插入圖片,當要在同時2個以上的部落格上面發表的時候就會出現圖片參照的問題,在網上找了一久的資料,發現了可以利用Picgo + Gitee +Typora搭建一個markdown檔案的免費相簿,感覺非常可行,於是立馬嘗試了一下,確實可行,以下是這個解決方案的個人實踐記錄。

以下方案參照了網上大神的方案,並非我原創,內容是根據自己實踐下來的記錄。

一、需要的軟體

1、Picgo軟體(官網下載:https://github.com/Molunerfinn/PicGo

2、註冊Gitee(碼雲)賬號,搭建圖床

3、node.js本地安裝

4、Typora軟體

二、使用Gitee(碼雲)搭建圖床

1.註冊Gitee(碼雲)賬號,官網地址:https://gitee.com/

2.新建Gitee倉庫

3.開啟Gitee Pages服務

Gitee Pages 是一個免費的靜態網頁託管服務,您可以使用 Gitee Pages 託管部落格、專案官網等靜態網頁。如果您使用過 Github Pages 那麼您會很快上手使用 Gitee 的 Pages服務。目前 Gitee Pages 支援 Jekyll、Hugo、Hexo編譯靜態資源。

4.生成To私鑰令牌

步驟按照圖片所示進行操作即可,記住生成token以後需要儲存下來(複製到哪裡留著,PicGo裡面用得到)

三、node.js安裝

1、下載安裝

(1). 官網地址:

​ 英文:https://nodejs.org/en/

​ 中文:http://nodejs.cn/

Windows7需要降級安裝歷史版本地址:

https://nodejs.org/en/about/releases/

https://nodejs.org/download/release/latest-v10.x/

(2). 安裝

​ 像裝其他軟體一樣安裝即可,windows7安裝完了會自動設定環境變數,其他的好像需要自己設定。

安裝完成之後有一部需要驗證。

安裝完成之後驗證即可

四、PicGo 下載安裝設定

1、下載安裝

1.官網(開源GitHub:https://github.com/Molunerfinn/PicGo
根據作業系統來下載對應的安裝檔案(GitHub官網)
(1). Windows 使用者請下載最新版本的 exe 檔案。
(2). macOS 使用者請下載最新版本的 dmg 檔案。
(3). Linux 使用者請下載 AppImage 檔案。

有一點需要注意,目前最新的正式版是2.3.0-beta.4,名字帶「-beta.x」的是測試版本,貌似說是不太穩定,建議就下載穩定版本的。這點在GitHub 專案網站https://github.com/Molunerfinn/PicGo/releases/上都有版本說明。

2、PicGo gitee外掛設定

(1)、gitee外掛安裝

如圖所示:在「外掛設定」中搜尋gitee,可以搜出2個外掛,根據網上的資料,2個外掛均可以使用,安裝設定基本都差不多,我自己安裝的是gitee-uploader1.1.2

(2)、PicGo設定

安裝完成以後設定圖床要要顯示的圖床庫:

(3)、gitee外掛設定

gitee-uploader1.1.2外掛設定,另外gitee 2.0.3 設定也基本一致

repo:使用者名稱/倉庫名

最簡單的辦法,開啟gitee倉庫後,看網址:https://gitee.com/abcd/bg-gys,那麼repo:abcd/bg-gys

path:gitee倉庫中你要儲存昭通的路徑,簡單說就是你新建的gitee倉庫的裡面的資料夾路徑

假如:當gitee倉庫的名:bg-gys,你在下面新建了一個image的資料夾儲存照片,那麼path為:image

token:就是gitee的私人金鑰,直接貼上進去即可。

branch:gitee倉庫的分支名,一般會預設填寫

到這裡以後基本就完成 了可以在PicGo中嘗試是否可以上傳

五、Typora 設定

官網地址:https://typora.io/

自行下載安裝即可

Typora其實就一個重要的點需要設定:設定使用PicGo上傳圖片

設定完成以後,在用Typora寫markdown檔案的時候,直接複製圖片到文章中即可選擇上傳,上傳以後的圖片地址就是gitee圖床中的地址

六、坑(很重要!!!)

1、關於node.js的

(1). 因並未學過node.js,這一步為什麼需要安裝,是因為在PicGo安裝Gitee外掛的時候,如果是不提前裝node.js,Gitee外掛會一直處於"安裝中.....",因只是一個工具,並未深入研究,如果清楚的大神可以告訴我,謝謝!

(2). 安裝完成以後要重啟

(3). Windows系統下載.msi格式的檔案(這點不知道算不算坑,可能對於熟悉node.js的不算吧)

(4). Windows作業系統對應的node.js版本有要求。

​ 如果作業系統是windows7,是裝不了14.16.0 (目前官網最新版)的,需要降級安裝12以及下。我是下載了10.X版本的,親測可以。

因為windows 7 如果是安裝14.X版本會報錯:

2、關於Picgo的

(1)、安裝PicGo之前一定要先安裝node.js,不然gitee的外掛會一直裝不上,網上很多部落格里面都沒提這一點

(2)、在gitee外掛設定中的path,這個值,你要先想好,如果一直改動,會出現上傳失敗的情況,不知道是PicGo的bug還是我的操作問題,我出現了很多次(因為我頻繁改倉庫的地址),挺煩的。

4、關於Typora的(很重要!!)

(1)、部落格網站解析不了圖片

這一點是最坑的,網上我就沒找到過資料來說明這一點,不知道是我的問題還是其他人都沒遇到過:

​ 在Typora記錄的時候,複製圖片到文章中,上傳以後的地址就是gitee圖床的地址,你可以直接複製到網上的部落格、微博等等,但是我在複製到部落格的時候發現,複製進去解析不了圖片,研究了大半天,發現我的gitee沒問題,裡面的圖片也能正常存取,但是當我看到我在gitee上面直接開啟我上傳的圖片網址以後,不淡定了:
網址如下:

https://gitee.com/abcd/blogs-gallery/blob/master/image%20/%20202103/2020030701-06-01-BlogsGallery-Typora.png

然而我在Typora文章中看到的圖片地址是:

https://gitee.com/abcd/blogs-gallery/blob/master/image / 202103/2020030701-06-01-BlogsGallery-Typora.png

在master分支下面的資料夾路徑:image / 202103/,中間多了2個空格,瀏覽器存取的時候會直接將空格解析:%20
所以這就是為什麼我寫好的部落格,複製進去部落格網站的時候圖片解析不了的原因了
解決辦法:
我還是正常的在Typora上面寫文章,但是在寫完以後,我是這樣處理的:
將/image / 202103/直接替換為/image%20/%20202103/

感覺還是挺麻煩,但是暫時也找不到其他的辦法解決,希望路過的大神予以指點一二。

(2)、Typora上傳失敗

如果更改過PicGo的一些設定,server的監聽埠會改變,此時要檢車PicGo的server監聽埠號跟Typora的埠號是否一致。我在自己折騰的過程中,都是這個原因導致上傳失敗的。

檢視Typora埠:

PicGo埠號檢視:

5、圖片的命名導致部落格五法解析圖片網址

我的習慣是會把自己記錄筆記、文章的截圖儲存下來,命名規則是這樣的:

日期+序號+根據這篇文章的標題+圖片的內容+......

在搭建完這套免費的圖床以後,使用過程中發現的,因為你的圖片要上傳到Gitee上面,文章彙總參照的地址就是Gitee上面的地址,所以在圖片命名上要注意以下問題:

​ (1)、圖片名稱中不要出現「漢字」,經量用英文或者是拼音

​ (2)、不要出現特殊的符號,目前我會用「-」,這個暫時沒發現有什麼問題,但是在用"()"就會出現一些部落格上面參照不到

暫時就發現了這2點,如果有其他的問題,非常感謝給我留言說明。

七、參考參照說明

1、關於node.js,我本不熟悉,文章「三、node.js安裝」是參考了這位博主的文章:

https://blog.csdn.net/adisonW/article/details/95475229/

2、關於Typora+PicGo的一些設定,參考了這位博主的文章:

https://blog.csdn.net/qq_40683225/article/details/105124810?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242

3、Gitee的幫助檔案:https://gitee.com/help/articles/4136/

在寫此文的時候可能還有少部分是參考了其他資料,但是整理的時候我已經找不到原文出處了,如果原文作者看到,請及時聯絡我,我在文章中加上參照出處,謝謝!


免責宣告:

本文中使用的部分內容來自於網路,如有侵權,請聯絡博主進行刪除。

轉載宣告:

寫部落格不易,請尊重原作者!!
歡迎大家閱讀、轉載,如果是 **整文轉載** 請在文章開頭或者結尾處 **註明 原文地址、作者**,如果是**大段參考** 請**備註 參考連結**。

IT145.com E-mail:sddin#qq.com