使用Github+PicGo+jsDelivr創建個人圖牀

前言

markdown是一門易於上手能幫助作者專心寫作的文檔編輯語言。Tpyora是一款優雅的markdown編輯器。用Tpyora寫的筆記和文章可以直接複製到csdn、簡書上發佈,很方便。

唯一的問題就是要處理下圖片!

用Typora 寫文章時插入本地圖片,圖片是存儲在本地,如果本地圖片被刪除或者移動位置,那麼文章中的圖片就無法正常顯示了。把內容複製到 csdn,簡書等博客發表,都會顯示不支持外部鏈接。解決方法就是將圖片上傳到圖牀。

圖牀是幹什麼的? 圖牀就是一個便於在博文中插入在線圖片連接的個人圖片倉庫。設置圖牀之後,在自己博客中插入的圖片鏈接就可以隨時隨地在線預覽了,並且不會因爲任何意外原因無法查看,除非自己親自刪除。

目前各種圖牀情況:

微博圖牀:以前用的人比較多,從2019年4月開始開啓了防盜鏈,涼涼
SM.MS:運營四年多了,也變得越來越慢了,到了晚上直接打不開圖片,速度堪憂
其他小衆圖牀:隨時有掛掉的風險
Imgur等國外圖牀:國內訪問速度太慢,隨時有被牆的風險
大廠儲存服務:例如七牛雲、又拍雲、騰訊雲COS、阿里雲OSS等,容量限制,操作繁瑣,又是實名認證又是域名備案的,麻煩,而且還要花錢(有錢又不怕麻煩的當我沒說)

所以創建一個免費、快速、易用的個人圖牀是很有意義的。

方案選擇

有些人選擇用Gitee創建圖牀,因爲Gitee網速比Github快。但是Gitee倉庫容量有限制。
2020050801.png
github免費而且容量沒有限制,而且經過查閱資料發現,國內訪問github速度不快的問題,可以利用jsDelivr CDN加速訪問來解決。

jsDelivr 是一個免費開源的 CDN 解決方案。國內該平臺是首個「打通中國大陸與海外的免費CDN服務」,網頁開發者無須擔心中國防火牆問題而影響使用。

因此,使用GitHub作爲圖牀,利用jsDelivr CDN加速訪問,PicGo工具一鍵上傳,操作簡單高效,GitHub和jsDelivr都是大廠,不用擔心跑路問題,不用擔心速度和容量問題,而且完全免費,可以說是目前免費圖牀的最佳解決方案!

在GitHub上創建一個存儲庫

添加一個存儲庫(New repositories)命名爲:images,用於上傳圖片文件。
image

上傳完圖片,就可以直接通過圖片鏈接訪問圖片了。
圖片鏈接的格式:https://github用戶名.github.io/存儲庫名/圖片文件名(帶文件後綴名)
我的github賬號用戶名爲”zhoumei”,創建的存儲庫名稱爲”images”,圖片爲”01.png”
訪問地址爲:https://zhoumei.github.io/images/01.png

在markdown插入圖片鏈接,就可以顯示該圖片了。
markdown中代碼如下:

![](https://zhoumei.github.io/images/01.png)

使用PicGo客戶端

1、準備工作:

(1)images存儲庫分支選master
在images存儲庫點擊Settings:
image
分支選master branch:
image
(2)生成Personal access tokens
創建好images存儲庫後,需要在 GitHub 上生成一個 token 以便 PicGo 來操作我們的倉庫,來到個人中心,選擇 Developer settings 就能看到 Personal access tokens,我們在這裏創建需要的 token。
image
點擊 Generate new token 創建一個新 token,Note隨意填寫,選擇 repo,同時它會把包含其中的都會勾選上,我們勾選這些就可以了。然後拉到最下方點擊綠色按鈕,Generate token 即可。之後就會生成一個 token ,記得複製保存到其他地方,這個 token 只顯示一次!
image

2、PicGo下載安裝

github下載地址:https://github.com/Molunerfinn/PicGo/releases
image
我用這個地址無法下載,最後到CSDN下載了一個安裝包:https://download.csdn.net/download/chen_junyong/12329873
總之,找個安裝包下載安裝即可。

3、配置 PicGo

點擊PicGo配置,選擇我們要用的GitHub圖牀:
image
GitHub設置:

說明:
設定倉庫名: 用戶名/倉庫名
設定分支名:master
設定Token:上一步創建的token
指定存儲路徑:圖片在images存儲庫下的存儲路徑(我想把上傳上來的圖片存儲在imgs文件夾裏面,這裏就填imgs/)
設定自定義域名:
不使用jsDelivr:https://用戶名.github.io/倉庫名
使用jsDelivr後:https://cdn.jsdelivr.net/gh/用戶名/倉庫名

備註:
圖片訪問路徑爲:https://cdn.jsdelivr.net/gh/用戶名/倉庫名/圖片路徑
如:https://cdn.jsdelivr.net/gh/zhoumei/images/imgs/20200508222335.jpg

4、PicGo使用

(1)上傳圖片:
image
(2)上傳完圖片可以在相冊中查看上傳的圖片(當然在github的images存儲庫中,也可以查看)
image
(3)點擊複製圖片的訪問地址,就可以直接在 Markdown 編輯器中使用了。
image
(4)圖片重新命名
在相冊中,選則圖片點擊修改按鈕,可以修改圖片的名稱。
image
工具默認上傳前不做重命名,如果需要在上傳前重新命名,我們可以到 PicGo設置中進行設置,把上傳前重命名開關打開即可。
image
(5)修改上傳快捷鍵:
image
參考文章:
https://www.jianshu.com/p/9d91355e8418
https://blog.csdn.net/qq_36759224/article/details/98058240

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章