GitHub+JSDelivr+PicGo+Typora免費白嫖高速穩定圖床

一楓說發表於2021-09-04

0. 初衷1. 建立 GitHub 倉庫2. 使用 jsDelivr 進行 CDN 加速3. 使用PicGo上傳圖片4. Typora 配置 PicGo 上傳

0. 初衷

平時寫文章,經常需要插入圖片,免不了需要使用圖床工具把本地圖片轉換成連結。市面上的圖床工具非常多,但很多都需要收費,有些免費的也存在著不穩定的風險。而 GitHub 作為全球最大的“同性交友網站”,不僅穩定性高,而且簡單易用,關鍵還可以免費白嫖!下面教大家如何更好地利用 GitHub 搭建圖床。

image-20210904212811039

1. 建立 GitHub 倉庫

註冊/登入自己的 GitHub,建立一個新的名字任意的公開倉庫。然後上傳圖片到倉庫中,這裡我直接使用瀏覽器端上傳的,也可以使用 Git 進行上傳。

  • 在建立的倉庫中點選Upload files
image-20210903190649347
  • 選擇上傳的圖片,然後提交。

    image-20210903191420501
  • 提交之後,就可以在瀏覽器通過地址https://raw.githubusercontent.com/你的使用者名稱/你的倉庫名/main/檔案路徑來訪問所上傳的圖片。

    比如:https://raw.githubusercontent.com/yifeng-talking/pictures/main/avatar.jpg

    image-20210903192852713
  • 之後在部落格中插入圖片的時候,使用此連結即可。

2. 使用 jsDelivr 進行 CDN 加速

前面已經利用 GitHub 倉庫實現了圖床功能,但是大家都知道,GitHub 在國內訪問很慢,甚至經常打不開,那麼我們的圖片就存在載入速度慢的問題,怎麼辦呢?jsDelivr 可以解決此問題,顯著提高圖片訪問的響應速度,並且開源免費!其官網為:jsDelivr - A free, fast, and reliable CDN for open source

使用方法也非常的簡單,直接在瀏覽器通過地址https://cdn.jsdelivr.net/gh/你的使用者名稱/你的倉庫名@釋出的版本號/檔案路徑就可以訪問 GitHub 上的圖片,並且響應速度非常快!其中@釋出的版本號可以直接省略,預設載入最新版本,即直接可以簡寫為https://cdn.jsdelivr.net/gh/你的使用者名稱/你的倉庫名/檔案路徑

比如:https://cdn.jsdelivr.net/gh/yifeng-talking/pictures/avatar.jpg

image-20210903195427428

3. 使用PicGo上傳圖片

前面實現了 GitHub 倉庫作為圖床,jsDelivr 對圖片進行加速。但是每次我們都需要使用 Git 工具或者在 GitHub 倉庫中進行上傳圖片,並且要自己拼接圖片地址,非常麻煩,有沒有更快速更簡潔的方式呢?此時神器 PicGo 就派上了用場,同樣開源免費!

PicGo 是一個用於快速上傳圖片並獲取圖片 URL 連結的工具,支援多個圖床進行使用,其中當然包括我們現在使用的 GitHub 圖床了,它同時支援 Windows、macOS、Linux平臺,詳情可見:Molunerfinn/PicGo: A simple & beautiful tool for pictures uploading built by vue-cli-electron-builder (github.com)

這裡以 Windows 為例,說明 PicGo 的使用方法。

  • 下載並安裝 PicGo,https://github.com/Molunerfinn/PicGo/releases/download/v2.2.2/PicGo-Setup-2.2.2.exe

    image-20210903201908609
  • 開啟 PicGo 軟體,找到圖床設定中的GitHub圖床,填寫相關資訊。

    • 設定倉庫名【必填】:填寫你的使用者名稱/你的倉庫名,比如我的 yifeng-talking/pictures

    • 設定分支名【必填】:填寫main

    • 設定Token【必填】:在Github主頁點選自己頭像後,依次選擇【Settings】->【Developer settings】->【Personal access tokens】->【Generate new token】,填寫Note描述(隨便),設定過期時間Expiration為永不過期No expiration,設定勾選【repo】,然後點選下方的【Generate token】生成一個Token,這個Token只會顯示一次,自行儲存,然後複製到 PicGo 中。

    • 指定儲存路徑【選填】:填寫圖片要儲存的路徑,比如填【images/】,這樣就會在倉庫下建立一個名為 images 的資料夾,圖片將會儲存在此資料夾中,這裡不填。

    • 設定自定義域名【選填】:圖片上傳後,PicGo 會按照【自定義域名+上傳的圖片名】的方式生成訪問連結,放到剪貼簿上,因為我們要使用 jsDeliver 進行加速,因而這裡設定為https://cdn.jsdelivr.net/gh/你的使用者名稱/你的倉庫名,比如我設定為https://cdn.jsdelivr.net/gh/yifeng-talking/pictures

    image-20210903213904869
  • 接著就可以在上傳區,將自己的圖片上傳,甚至可以直接將剪下板的截圖上傳,上傳成功後會直接將相應連結複製到剪下板中,我們就可以直接複製到部落格(MarkDown 編輯器)中。

  • PicGo設定中,可以自定義一些設定,比如上傳前重新命名、時間戳重新命名等,自行設定。

4. Typora 配置 PicGo 上傳

前面使用了 PicGo 工具快速上傳圖片並獲取圖片 URL 連結,方便了很多,但是每次都要先在 PicGo 中進行上傳,然後將剪下板中連結複製到 MarkDown 編輯器中,有沒有更優雅簡便的方式,可以將兩步合二為一呢?答案是Typera+PicGo

Typera 是一款輕便簡潔的 Markdown 編輯器,可以即時渲染,並且完全免費,推薦大家用此軟體進行寫作,其官網為:Typora — a markdown editor, markdown reader.

下面介紹 Typora 結合 PicGo 實現上傳功能。

  • 下載 Typora,網址Typora — a markdown editor, markdown reader.

  • 開啟 PicGo,在PicGo設定中,點選【設定 Server 】,將監聽埠修改為:36677

  • 開啟 Typera,點選【檔案】 -> 【偏好設定】-> 【影像】,然後進行如下配置,其中 PicGo 路徑是你的 PicGo 的安裝路徑。

    image-20210903221650376
  • 在 Typera 中書寫文章,插入圖片(也可以直接將截圖複製)時會自動將圖片進行上傳,並顯示在文章中,非常的方便。當然插入圖片時也可以不選擇上傳圖片,也就是不自動上傳圖片,可以手動在圖片上右擊上傳圖片。

    image-20210903224439326

以上就是使用 GitHub + jsDelivr + PicGo + TyPora 搭建免費穩定圖床的全過程,希望對你有所幫助!

相關文章