Hexo 博客圖片托管:告別本地存儲,用 PicGo + GitHub 打造高速穩定圖床

之前剛開始進行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 圖床 為例,配置步驟如下:

  1. 創建 GitHub 倉庫
  2. 新建一個公開倉庫(如 blog-images),用于存儲圖片
  3. 記住倉庫路徑:用戶名/倉庫名(如 username/blog-images
  4. 生成 GitHub 訪問令牌
  • 打開 GitHub → 點擊頭像 → SettingsDeveloper settingsPersonal access tokensGenerate new token
  • 勾選 repo 權限必須),生成后復制令牌(僅顯示一次,需保存)

選擇并安裝圖床插件
根據需求安裝對應圖床的插件,以常用的GitHub圖床 為例:

picgo install github-plus  # GitHub 增強插件,支持自定義路徑等

其他常用插件:

  • 阿里云 OSS:picgo install aliyun-oss
  • 騰訊云 COS:picgo install tencent-cos
  • 七牛云:picgo install qiniu

二、配置圖床參數

GitHub 圖床 為例,配置步驟如下:

  1. 創建 GitHub 倉庫
  2. 新建一個公開倉庫(如 blog-images),用于存儲圖片
  3. 記住倉庫路徑:用戶名/倉庫名(如 username/blog-images
  4. 生成 GitHub 訪問令牌
  • 打開 GitHub → 點擊頭像 → SettingsDeveloper settingsPersonal access tokensGenerate new token
  • 勾選 repo 權限必須),生成后復制令牌(僅顯示一次,需在記事本中保存)
    安裝 Node.js(命令行版必裝,圖形化版可選)
    下載地址:Node.js 官網(推薦 LTS 版本)。
    驗證安裝:終端輸入 node -vnpm -v,能顯示版本號即成功。

三、PicGo 圖形化桌面版配置(新手推薦)

圖形化界面操作直觀,無需記憶命令,適合首次配置圖床的用戶。

  1. 安裝PicGo桌面版
    下載地址:PicGo GitHub Releases。
    選擇對應系統版本(WindowsexeMacdmg),安裝后打開。
  2. 配置 GitHub 圖床參數
    左側菜單欄點擊 「圖床設置」 → 選擇 「GitHub圖床」)。
    依次填寫參數:
  • repo:用戶名/倉庫名(如 username/blog-images
  • branch:分支名(默認 main
  • token:剛才生成的 GitHub 令牌
  • path:圖片在github的存儲路徑(可選,如 images/2024/
  • customUrl:自定義 CDN 域名(可選,如 https://cdn.jsdelivr.net/gh/用戶名/倉庫名
    填寫完成后,點擊 「設為默認圖床」,配置生效。
  1. 驗證配置(上傳測試)
    點擊 PicGo 主界面的 「上傳區」,直接拖入本地圖片,或粘貼剪貼板截圖(如微信截圖后直接粘貼或電腦快捷鍵截圖)。上傳成功后,進入Github,進入圖片右鍵復制圖片鏈接即可!

三、PicGo-Core 命令行版配置(終端用戶推薦)

輕量化無界面,適合習慣用終端操作的用戶,可集成到腳本或編輯器中。

  1. 安裝 PicGo-Core
    打開終端(WindowsCMD/PowerShellMac/LinuxTerminal),執行以下命令全局安裝:
npm install picgo -g
  • 驗證安裝:輸入 picgo -v,顯示版本號即成功。
  1. 安裝 GitHub 圖床插件
picgo install github-plus

其他常用圖床插件(按需安裝):

  • 阿里云 OSS:picgo install aliyun-oss
  • 騰訊云 COS:picgo install tencent-cos
  • 七牛云:picgo install qiniu
  1. 配置 GitHub 圖床參數
picgo set uploader

依次填寫參數(參考前面圖形化版的參數說明)

  1. 配置完成后,設置 github-plus 為默認上傳器:
picgo use uploader  # 再次選擇 github-plus 并回車
  1. 驗證配置(上傳測試)
# 替換為你圖片的本地路徑
# Windows 示例
picgo upload C:\Users\Legion\Pictures\test.jpg
# Mac/Linux 示例
picgo upload ~/Desktop/test.jpg
  • 成功:終端會輸出圖片直鏈,復制鏈接到瀏覽器可打開圖片。
  • 失敗:檢查 tokenrepo權限是否開通、圖片存儲路徑是否正確,或網絡是否通暢。

四、與 Hexo 集成

Hexo文章中直接使用上傳后的圖片鏈接,例如:

![示例圖片](Github直鏈地址)

鏈接在csdn無法顯示問題

??當我們在github配置好圖床服務后,想要在CSDN進行引用 ,會發現編輯時顯示正常,但是發布后會顯示圖片轉存失敗,如下圖所示。這是因為CSDN 為了防止其他網站直接引用(消耗 CSDN 的服務器流量和帶寬)本站的圖片資源,會設置防盜鏈功能
在這里插入圖片描述

請添加圖片描述

??當在外站中插入一個來自 github.com 的圖片鏈接時,用戶的瀏覽器會向 GitHub 的服務器請求這張圖片。GitHub 服務器在響應時,可能會檢查請求的來源(Referer)。如果來源是 csdn.net,而 GitHub 并未將 CSDN 加入白名單,GitHub 可能會拒絕這個請求或返回一個錯誤(如 403 Forbidden)。反過來,如果 CSDN 檢測到圖片不是來自自己的服務器,也可能會攔截顯示。

??在 CSDN 博客編輯器中,點擊圖片上傳按鈕。選擇圖片進行上傳。CSDN自動將圖片上傳到自己的圖床,并生成一個新的、穩定的 CSDN 內部鏈接,這時候就可以正常引用圖片了!

封面來源:Imagen AI

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/96398.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/96398.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/96398.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

關于 VScode 無法連接 Linux 主機并報錯 <未能下載 VScode 服務器> 的解決方案

1. 出現的情況 VScode 遠程登錄 Linux 主機, 出現一下報錯:2. 檢查方案 2.1 VScode 方面 菜單欄: 點擊 <幫助> →\to→ 點擊 <關于> 在出現的彈窗中記錄 [提交: ] 之后的字符串 (暫且將該字符串命名為變量 $commit_id) 2.2 Linux 方面 使用 ssh or MobaXterm 遠程登…

泛型與反射

也是重新溫習了下泛型與反射,反射基本就是一些api理解即可,不過需要注意類加載器原理,而泛型則需要理解其設計思想,可以代替Object,更加靈活,可讀性強。泛型泛型如果指定后,編譯階段就會檢查,不讓亂輸其他類型,必須是引用類型; 如果不指定就默認Object// 如果指定泛型, 就必須存…

Docker端口映射與數據卷完全指南

目錄 Docker端口映射與數據卷完全指南 1. 端口映射:連接Docker容器與外部世界 1.1 為什么需要端口映射 1.2 實現端口映射 1.3 查看端口映射 1.4 修改端口映射(高級操作) 2. 數據卷:Docker數據持久化解決方案 2.1 數據持久化問題 2.2 數據卷的含義 2.3 數據卷的特點 2.4 掛載…

【Linux篇章】穿越網絡迷霧:揭開 HTTP 應用層協議的終極奧秘!從請求響應到實戰編程,從靜態網頁到動態交互,一文帶你全面吃透并征服 HTTP 協議,打造屬于你的 Web 通信利刃!

本篇摘要 本篇將介紹何為HTTP協議&#xff0c;以及它的請求與答復信息的格式&#xff08;請求行&#xff0c;請求包頭&#xff0c;正文等&#xff09;&#xff0c;對一些比較重要的部分來展開講解&#xff0c;其他不常用的即一概而過&#xff0c;從靜態網頁到動態網頁的過渡&a…

QT的項目pro qmake編譯

使用qmake管理Qt庫的子工程示例-CSDN博客 top_srcdir top_builddir

語音交互系統意圖識別介紹和構建

一、意圖識別簡介**意圖識別&#xff08;Intent Recognition&#xff09;**是語音交互系統的核心組件&#xff0c;用于理解用戶語音輸入背后的真實目的&#xff08;如查詢天氣、播放音樂等&#xff09;。輸入&#xff1a;語音轉文本&#xff08;ASR輸出&#xff09;的語句輸出&…

DINOv3 重磅發布

2025年8月14日 Meta 發布了 DINOv3 。 主頁&#xff1a;https://ai.meta.com/dinov3/ 論文&#xff1a;DINOv3 HuggingFace地址&#xff1a;https://huggingface.co/collections/facebook/dinov3-68924841bd6b561778e31009 官方博客&#xff1a;https://ai.meta.com/blog/d…

ansible playbook 實戰案例roles | 實現基于firewalld添加端口

文章目錄一、核心功能描述二、roles內容2.1 文件結構2.2 主配置文件2.3 tasks文件內容免費個人運維知識庫&#xff0c;歡迎您的訂閱&#xff1a;literator_ray.flowus.cn 一、核心功能描述 這個 Ansible Role (firewalld) 的核心功能是&#xff1a;動態地、安全地配置 firewal…

【深度學習實戰(55)】記錄一次在新服務器上使用docker的流程

使用docker&#xff1a;apt-get install dockersudo usermod -aG docker sliu &#xff08;將用戶 sliu 添加到 docker 用戶組&#xff09;newgrp docker &#xff08;刷新&#xff09;docker imagessudo docker load --input /home/sliu/workspace/env/shuai_docker.tar &…

面試后的跟進策略:如何提高錄用幾率并留下專業印象

面試結束后&#xff0c;許多求職者認為自己的任務已經完成&#xff0c;只需等待結果通知。然而&#xff0c;面試后的跟進策略同樣是求職過程中的關鍵環節&#xff0c;它不僅能提高你的錄用幾率&#xff0c;還能展示你的專業素養和持續興趣。本文將結合酷酷面試平臺的專業建議&a…

深入解析RAGFlow六階段架構

下面用“流程圖 六階段拆解”的方式&#xff0c;把 RAGFlow 的完整流程逐層剖開&#xff0c;力求把每一步的輸入、輸出、可選策略、內部機制都講清楚。 ──────────────────────── 一、總覽圖&#xff08;先建立體感&#xff09; 用戶提問 │ ├─→【…

Go語言中的迭代器模式與安全訪問實踐

Go語言中的迭代器模式與安全訪問實踐 1. 迭代器模式在Go中的演進 1.1 傳統迭代器模式回顧 在傳統面向對象語言中&#xff0c;迭代器模式通常涉及三個核心組件&#xff1a;可迭代集合接口(Iterable)迭代器接口(Iterator)具體實現類// 傳統迭代器模式示例 type Iterator interfac…

從零開始:JDK 在 Windows、macOS 和 Linux 上的下載、安裝與環境變量配置

前言 在進入 Java 世界之前&#xff0c;搭建一個穩定、可用的開發環境是每個開發者必須邁過的第一道門檻。JDK&#xff08;Java Development Kit&#xff09;作為 Java 程序開發的核心工具包&#xff0c;其正確安裝與環境變量配置直接關系到后續編譯、運行、調試等所有開發流程…

【音視頻】芯片、方案、市場信息收集

系統級芯片安霸&#xff08;Ambarella&#xff09;Ambarella H22/H32&#xff1a;高端方案&#xff0c;支持8K/4K高幀率錄制&#xff0c;低功耗&#xff0c;廣泛用于GoPro Hero 11/12、Insta360等旗艦機型。 Ambarella A12/A10&#xff1a;早期主流方案&#xff0c;支持4K60fps…

中科米堆CASAIM提供機加工件來料自動化測量尺寸方案

機加工行業面臨日益嚴格的質量追溯要求&#xff0c;來料質量的穩定性直接影響著后續生產效率與成品合格率。傳統人工檢測方式受限于接觸式工具的測量精度與操作效率&#xff0c;難以應對小批量、多品種的現代生產需求。傳統機加工件來料檢測長期面臨這些問題&#xff1a;其一&a…

MySQL只操作同一條記錄也會死鎖嗎?

大家好&#xff0c;我是鋒哥。今天分享關于【MySQL只操作同一條記錄也會死鎖嗎?】面試題。希望對大家有幫助&#xff1b; MySQL只操作同一條記錄也會死鎖嗎? 超硬核AI學習資料&#xff0c;現在永久免費了&#xff01; 在 MySQL 中&#xff0c;死鎖通常是由于多個事務對不同…

知識蒸餾 Knowledge Distillation 論文 Generalized Knowledge Distillation (GKD) 乘法法則、全概率公式、貝葉斯定理

知識蒸餾 Knowledge Distillation 論文 Generalized Knowledge Distillation (GKD) 乘法法則、全概率公式、貝葉斯定理 flyfish 代碼實踐 On-Policy Distillation of Language Models: Learning from Self-Generated Mistakes 設定&#xff08;方便算數&#xff09;&#x…

Fastjson 2.x踩坑——序列化Java字段為null值默認輸出

先上無法實現效果的代碼&#xff0c;我的目的是序列化時如果數字型字段為null則填0&#xff0c;盡可能保證數據整齊。 Data NoArgsConstructor AllArgsConstructor ToString JSONType(serializeFeatures {JSONWriter.Feature.WriteNulls,JSONWriter.Feature.WriteMapNullValue…

4G高負荷解決方案

4G高負荷解決方案 一、網絡優化手段&#xff08;低成本優先&#xff09;參數優化 調整功率控制、負荷均衡參數。優化小區重選與切換參數&#xff0c;避免高負荷小區擁塞。負荷均衡 開啟 MLB&#xff08;Mobility Load Balancing&#xff0c;移動負荷均衡&#xff09;。引導用戶…

K8S 安裝部署 Rocky Linux 10.0 + Docker + Containerd + Calico

Docker Containerd Flannel 安裝部署K8S 系統環境準備 # 1. 設置主機名 hostnamectl set-hostname k8s-n1 && bash# hostnamectl set-hostname k8s-n2 && bash # hostnamectl set-hostname k8s-n3 && bash# 2. 刪除系統自帶的容器軟件&#xff08;可…