之前剛開始進行
Hexo
博客撰寫,圖片都保存在本地Hexo
源文件目錄(source/images/
)文件夾,隨著圖片增多,管理起來壓力增大,于是產生了使用圖床,引入外鏈進行圖片存儲的想法
Pros and Cons
- 提升部署速度:當你執行
hexo g -d
部署時,Hexo
需要將你博客的所有源文件,包括文章、主題、以及幾十上百張圖片,全部處理并拷貝到public
文件夾,然后再將這個巨大的文件夾推送到GitHub
,這個過程會非常緩慢。 - 跨設備寫作與協作更方便:本地存儲時,如果你想在另一臺電腦上寫文章,必須把整個包含所有圖片的龐大倉庫克隆下來。而使用圖床,你只需要克隆輕量級的博客源碼倉庫。文章里的圖片都是絕對路徑(
URL
),在任何設備上打開都能正常顯示。 - 版本控制體驗極佳:使用圖床后,你的博客源碼倉庫非常干凈,
Git
可以高效地管理文本差異。圖片倉庫獨立出去,兩者互不干擾,管理起來清晰明了。
??正因為有以上優勢,因而我強烈建議將圖片放在圖床中進行存儲,常見的的圖床服務有阿里云OSS、騰訊云 COS、七牛云、SM.MS、Github等。
??考慮到前幾者涉及到注冊、實名認證、存儲收費等問題,再加上認為Github
大概率不會倒閉,圖片存儲較為穩定,且已有賬號注冊等原因,最終選擇使用PicGo插件和Github
實現圖床功能!
-
更簡單的圖床功能網站:IMG.TG(但是感覺像
start up company
界面有點簡陋,擔心有存儲不穩定的問題)(后來發現有國內百度云 CDN 節點加速,口碑還不錯,那大抵是我手拙無福消受了😢) -
不想折騰的可以看看這篇騷操作😀:圖片外鏈方法大全: 免費的圖床! 告別新浪圖床 和 CDN
下面分別介紹 PicGo
圖形化桌面版(適合新手,操作直觀)和 PicGo-Core
命令行版(適合終端用戶,輕量化)的完整配置流程,實現GitHub
圖床功能。
一、準備工作
以 GitHub
圖床 為例,配置步驟如下:
- 創建
GitHub
倉庫 - 新建一個公開倉庫(如
blog-images
),用于存儲圖片 - 記住倉庫路徑:用戶名/倉庫名(如
username/blog-images
) - 生成
GitHub
訪問令牌
- 打開
GitHub
→ 點擊頭像 →Settings
→Developer settings
→Personal access tokens
→Generate new token
- 勾選
repo
權限(必須),生成后復制令牌(僅顯示一次,需保存)
選擇并安裝圖床插件
根據需求安裝對應圖床的插件,以常用的GitHub
圖床 為例:
picgo install github-plus # GitHub 增強插件,支持自定義路徑等
其他常用插件:
- 阿里云 OSS:
picgo install aliyun-oss
- 騰訊云 COS:
picgo install tencent-cos
- 七牛云:
picgo install qiniu
二、配置圖床參數
以 GitHub
圖床 為例,配置步驟如下:
- 創建
GitHub
倉庫 - 新建一個公開倉庫(如
blog-images
),用于存儲圖片 - 記住倉庫路徑:用戶名/倉庫名(如
username/blog-images
) - 生成
GitHub
訪問令牌
- 打開
GitHub
→ 點擊頭像 →Settings
→Developer settings
→Personal access tokens
→Generate new token
- 勾選
repo
權限(必須),生成后復制令牌(僅顯示一次,需在記事本中保存)
安裝Node.js
(命令行版必裝,圖形化版可選)
下載地址:Node.js 官網(推薦 LTS 版本)。
驗證安裝:終端輸入node -v
和npm -v
,能顯示版本號即成功。
三、PicGo
圖形化桌面版配置(新手推薦)
圖形化界面操作直觀,無需記憶命令,適合首次配置圖床的用戶。
- 安裝
PicGo
桌面版
下載地址:PicGo GitHub Releases。
選擇對應系統版本(Windows
選exe
,Mac
選dmg
),安裝后打開。 - 配置 GitHub 圖床參數
左側菜單欄點擊 「圖床設置
」 → 選擇 「GitHub圖床
」)。
依次填寫參數:
repo
:用戶名/倉庫名(如username/blog-images
)branch
:分支名(默認main
)token
:剛才生成的GitHub
令牌path
:圖片在github
的存儲路徑(可選,如images/2024/
)customUrl
:自定義 CDN 域名(可選,如https://cdn.jsdelivr.net/gh/用戶名/倉庫名
)
填寫完成后,點擊 「設為默認圖床
」,配置生效。
- 驗證配置(上傳測試)
點擊PicGo
主界面的 「上傳區
」,直接拖入本地圖片,或粘貼剪貼板截圖(如微信截圖后直接粘貼或電腦快捷鍵截圖)。上傳成功后,進入Github
,進入圖片右鍵復制圖片鏈接
即可!
三、PicGo-Core
命令行版配置(終端用戶推薦)
輕量化、無界面,適合習慣用終端操作的用戶,可集成到腳本或編輯器中。
- 安裝
PicGo-Core
打開終端(Windows
用CMD/PowerShell
,Mac/Linux
用Terminal
),執行以下命令全局安裝:
npm install picgo -g
- 驗證安裝:輸入
picgo -v
,顯示版本號即成功。
- 安裝
GitHub
圖床插件
picgo install github-plus
其他常用圖床插件(按需安裝):
- 阿里云 OSS:
picgo install aliyun-oss
- 騰訊云 COS:
picgo install tencent-cos
- 七牛云:
picgo install qiniu
- 配置
GitHub
圖床參數
picgo set uploader
依次填寫參數(參考前面圖形化版的參數說明)
- 配置完成后,設置
github-plus
為默認上傳器:
picgo use uploader # 再次選擇 github-plus 并回車
- 驗證配置(上傳測試)
# 替換為你圖片的本地路徑
# Windows 示例
picgo upload C:\Users\Legion\Pictures\test.jpg
# Mac/Linux 示例
picgo upload ~/Desktop/test.jpg
- 成功:終端會輸出圖片直鏈,復制鏈接到瀏覽器可打開圖片。
- 失敗:檢查
token
、repo
權限是否開通、圖片存儲路徑是否正確,或網絡是否通暢。
四、與 Hexo
集成
在 Hexo
文章中直接使用上傳后的圖片鏈接,例如:

鏈接在csdn無法顯示問題
??當我們在github
配置好圖床服務后,想要在CSDN
進行引用 ,會發現編輯時顯示正常,但是發布后會顯示圖片轉存失敗,如下圖所示。這是因為CSDN
為了防止其他網站直接引用(消耗 CSDN 的服務器流量和帶寬)本站的圖片資源,會設置防盜鏈功能。
??當在外站中插入一個來自 github.com
的圖片鏈接時,用戶的瀏覽器會向 GitHub
的服務器請求這張圖片。GitHub
服務器在響應時,可能會檢查請求的來源(Referer
)。如果來源是 csdn.net
,而 GitHub
并未將 CSDN
加入白名單,GitHub
可能會拒絕這個請求或返回一個錯誤(如 403 Forbidden
)。反過來,如果 CSDN
檢測到圖片不是來自自己的服務器,也可能會攔截顯示。
??在 CSDN
博客編輯器中,點擊圖片上傳按鈕。選擇圖片進行上傳。CSDN
會自動將圖片上傳到自己的圖床,并生成一個新的、穩定的 CSDN
內部鏈接,這時候就可以正常引用圖片了!
封面來源:Imagen AI