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 搭建免費穩定圖床的全程序，希望對你有所幫助！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/297485.html
標籤：其他
上一篇：95后，剛作業2-3年就年薪50W+ ，才發現打敗我們的，從來不是年齡···
下一篇：02.樣本評估與選擇