0. 初衷1. 建立 GitHub 倉庫2. 使用 jsDelivr 進行 CDN 加速3. 使用PicGo上傳圖片4. Typora 配置 PicGo 上傳
0. 初衷
平時寫文章，經常需要插入圖片，免不了需要使用圖床工具把本地圖片轉換成連結。市面上的圖床工具非常多，但很多都需要收費，有些免費的也存在著不穩定的風險。而 GitHub 作為全球最大的“同性交友網站”，不僅穩定性高，而且簡單易用，關鍵還可以免費白嫖！下面教大家如何更好地利用 GitHub 搭建圖床。
1. 建立 GitHub 倉庫
註冊/登入自己的 GitHub，建立一個新的名字任意的公開倉庫。然後上傳圖片到倉庫中，這裡我直接使用瀏覽器端上傳的，也可以使用 Git 進行上傳。
- 在建立的倉庫中點選
Upload files。
-
選擇上傳的圖片，然後提交。
-
提交之後，就可以在瀏覽器通過地址
https://raw.githubusercontent.com/你的使用者名稱/你的倉庫名/main/檔案路徑來訪問所上傳的圖片。比如：https://raw.githubusercontent.com/yifeng-talking/pictures/main/avatar.jpg
-
之後在部落格中插入圖片的時候，使用此連結即可。
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
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
-
開啟 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
-
-
接著就可以在
上傳區，將自己的圖片上傳，甚至可以直接將剪下板的截圖上傳，上傳成功後會直接將相應連結複製到剪下板中，我們就可以直接複製到部落格（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 的安裝路徑。
-
在 Typera 中書寫文章，插入圖片（也可以直接將截圖複製）時會自動將圖片進行上傳，並顯示在文章中，非常的方便。當然插入圖片時也可以不選擇上傳圖片，也就是不自動上傳圖片，可以手動在圖片上右擊上傳圖片。
以上就是使用 GitHub + jsDelivr + PicGo + TyPora 搭建免費穩定圖床的全過程，希望對你有所幫助！