1. 圖床的選擇

(1) 什麼是圖床？

很多技術人寫作都有在用 Markdown 輕量級標記語言進行部落格寫作，這種寫作讓我們不用像使用 Word 那麼麻煩調整排版和格式，而只需專心寫作照樣完成排版的一種寫作方式。但是，基本所有支援 Markdown 本地寫作工具都只能採用匯入本地圖片引用的方式，對於一篇需要大量圖片闡述的文章，或者是文章釋出於網路後圖片丟失問題，這不得不是經常要面對的問題。

那麼有什麼比較好的解決方式嗎？哈哈，有的。很多人採用的圖片寄存於網路，用服務廠商作為圖片儲存的地方，大家稱為圖床。好了，那像 CSDN 部落格、簡書平臺不是都可以做到圖片儲存嗎？是的，在這些平臺寫文章的時候可以通過上傳圖片然後得到一個圖片網路地址，但當圖片數量多，一張一張上傳，這也是非常麻煩，另外，也是擔心萬一人家平臺做防盜鏈呢（不瞭解防盜鏈話自行谷歌下~）。其實我們想要圖床功能，有很多專業的服務商免費提供一定容量和流量可以讓我們方便幹這些事情，比如七牛雲。

(2) 圖床種類

谷歌搜尋下圖床能搜到很多圖床網站，列舉一些供參考使用：

• 極簡圖床

  預設公共圖床使用 sm.ms、微博圖床，可以自定義支援七牛，介面簡潔美觀，支援 Chrome 外掛，註冊後還可以同步上傳歷史。

• 路過圖床

• Qchan圖床

• 小賤賤圖床

• SM.MS

  SM.MS 是由 V2EX @Showfom 自建的，無外鏈限制，無流量限制的圖床，支援 HTTPS，速度不錯，已經執行兩年多了。簡易的線上圖床工具

• 微博圖床

(1) 圖床分類

• 公共圖床
• 自建圖床：雲服務（如七牛雲、又拍雲、阿里雲 OSS）
• 自建圖床：開源方案 （如 Lychee 開源方案、樹洞外鏈）

目前圖床可以分為兩種，一種是公共圖床，一種是自建圖床。

公共圖床也就是利用公共服務的圖片上傳介面，來提供圖片外鏈的服務，比如「微博圖床」。自建圖床，也就是利用各大雲服務商提供的儲存空間或者自己在 VPS 上使用開源軟體來搭建圖床，儲存圖片，生成外鏈提供訪問，比如七牛雲、Lychee 開源自建圖床方案。

目前自建圖床方案有兩種，一種是利用雲服務商提供的儲存服務來作為圖床，通過 API 來管理圖片，另一種是在 VPS 上安裝開源的圖片或檔案管理程式，只要能提供外鏈，基本都可以作為圖床來用。

圖床服務最重要的是穩定性，大廠的雲服務也都比較有保障，大家只要考慮下價格和易用性就可以了。就我個人而言，我首先推薦七牛，它的價格比較厚道，免費使用者也有一定額度，資料可以自己掌控，另外各大平臺的圖床工具也基本都支援，易用性很高。其次推薦微博圖床，對於不是很重要的圖片，都可以存到微博圖床，畢竟流量儲存都免費，速度也不錯。至於圖床工具，就看自己的喜好了，只要順手就行。但是不論選擇哪一個服務或者工具，我覺得首先要自己可以掌控資料。

總之，適合自己的才是最好的。

(2) 圖床工具

雖然圖床選擇好，但是對普通使用者來說，直接使用圖床 API 很麻煩，我們可以藉助一些工具方便的上傳圖片，下面就根據 macOS、Windows、Web 分別推薦幾款工具。

macOS：

• iPic - Markdown 圖床、檔案上傳工具

• MWeb（Markdown 寫作工具，也支援上傳圖片）

Windows：

• MPic-圖床神器

Web：

• 比如「極簡圖床」外掛、「微博圖床」等等

2. 七牛雲圖床使用

關於七牛雲的介紹：七牛是一個雲端儲存服務商，註冊並實名認證之後，你將免費享有 10GB 儲存空間，每月 10GB 下載流量、100 萬次 GET 請求、 10 萬次 PUT/DELETE 請求。七牛的定位不是像百度雲一樣的網盤 ，也不是同堅果雲一般的同步雲 ，而是 CDN，讓你在瀏覽網頁的時候最快的接收到頁面中的圖片、音訊等檔案，所以非常適合個人、企業使用者用來儲存站點資源。對於個人博主來說，你可以把部落格中的圖片、音訊、視訊等媒體上傳到七牛，在部落格中引用；也可以將站點需要載入的 CSS、JS 等檔案上傳到七牛，以加速網站。

(1) 最原始上傳

①到 七牛雲 網站註冊；

②實名認證（實名認證了才能享受 免費 10Gb 儲存空間；實名認證需要「本人手持身份證」的正反面兩張照片，請提前準備好）；

③點選「管理控制檯」；

④「資源主頁」--> 點選「物件儲存」，立即新增（即建立儲存空間，七牛雲把這個叫作”Bucket“），其中包括以下三個項：

• 儲存空間名稱：儲存空間名稱作為唯一的 Bucket 識別符
• 儲存區域：區域選擇自己附近的
• 訪問控制：作為圖床的話，訪問控制只能選擇為「公開空間」

點選建立，Ok。

⑤然後開啟儲存空間，選擇內容管理，點選上傳檔案，上傳你所需要用到的圖片；

⑥上傳完成後，在儲存空間檔案列表中點選某一檔案的右側按鈕，可以看到外鏈地址，複製貼上即可用。

現在來梳理下一張圖片上傳圖片所經歷的步驟：

1. 登入開啟七牛雲網頁個人儲存空間
2. 上傳圖片
3. 複製外鏈
4. 貼上到 Markdown
複製程式碼

一張圖片用了四步吶，要是圖片很多，那不是作死嘛。有什麼方法解決方便快捷上傳嗎？當然有，方法有三個：

1. 七牛雲外掛上傳：簡單

2. 使用 dropzone 上傳：方便

   • 使用Dropzone和七牛優化部落格圖床
   • Mac OS 圖床運用優化模式 - Microdust

3. 使用命令列上傳：快捷，尤其適合需要目錄及協作的團隊

   官方有個「開發者工具」頁面，提供一些工具進行上傳，包括後面講的 qshell， 其中有個「QSunSync」的 Windows 版本圖片同步上傳客戶端。

(2) 七牛雲外掛上傳：簡單

• 瀏覽器外掛 qiniu upload files

  七牛雲外掛，像使用桌面系統一樣管理你的七牛雲空間；支援拖拽上傳，批量操作，檔案處理等功能

  如何操作：www.jianshu.com/p/44d818f78…

• 還可以利用線上「極簡圖床」工具，預設使用的為公共圖床 sm.ms，但是也可以自定義的，自定義圖床為七牛雲圖床，方法如下：

  在最前面有關七牛雲的註冊等等操作，前面已經講了，不絮叨了，之後：

  1. 在“個人皮膚”->“金鑰管理”中檢視 AccessKey/SecretKey；

  2. 在儲存空間的“空間概覽”裡，記住這裡的“測試域名”；

  3. 在「極簡圖床」上配置上剛才七牛儲存的“空間名稱”、“AccessKey”、“SecretKey”、“域名”後，儲存。然後就可以上傳到自己專屬的七牛空間上了。

  “AccessKey”、“SecretKey”：在“個人皮膚”->“金鑰管理”中檢視AccessKey/SecretKey；

  “域名”：在儲存空間的“空間概覽”裡可以看到。

(3) 使用 dropzone 上傳：方便

參考文章：

• 使用Dropzone和七牛雲端儲存來優化部落格圖床
• Mac OS 圖床運用優化模式 - Microdust

(4) 使用命令列上傳

(1) qshell

使命命令列方式，可以不用手動上傳檔案到七牛，它會自動幫你將本地目錄的檔案同步到七牛之前設定的儲存空間下。

詳細教程，參考「參考資料」②文章的方法三，但是參考資料②中所說的 qrsync 已經失效，現在使用的 qshell 命令列，操作方式其實類似。

先引用官方的 qshell 介紹：qshell 是利用七牛文件上公開的 API 實現的一個方便開發者測試和使用七牛 API 服務的命令列工具。該工具設計和開發的主要目的就是幫助開發者快速解決問題。目前該工具融合了七牛儲存，CDN，以及其他的一些七牛服務中經常使用到的方法對應的便捷命令，比如 b64decode，就是用來解碼七牛的 URL 安全的 Base 編碼用的，所以這是一個面向開發者的工具，任何新的被認為適合加到該工具中的命令需求，都可以在 ISSUE列表 裡面提出來，我們會盡快評估實現，以幫助大家更好地使用七牛服務。

配置教程：官方文件 | 官方GitHub，同時官方也有視訊教程：視訊教程--命令列工具使用。

(2) hexo-qinqiu-sync

網上看到有通過命令安裝 hexo-qiniu-sync 外掛的方式：skyhacks.org/2017/08/02/… yuchen-lea.github.io/2016-01-21-…

GitHub 上也有教程：gyk001/hexo-qiniu-sync

(5) 圖片優化

圖片搜身、水印處理、自動旋正解決照片莫名其妙發生旋轉：Hexo部落格(19)使用七牛雲圖床 | masikkk

3. 圖片上傳方案選擇

由於筆者用的 Windows，並且目前對圖片上傳的要求不大，只要能保證方便上傳圖片就行，目前有考慮以下幾種方式。

1. 第一種：使用本文一開始提到的谷歌搜尋出來的那些線上圖床進行上傳就是，比如 SM.MS，不過可能會有某些限制，比如「小賤賤圖床 」每日上傳圖片限制數：20張。

2. 第二種：使用本文提到 Chrome 瀏覽器外掛 qiniu upload files 外掛，填寫空間名稱、AK、SK、域名等設定即可從電腦拖拽圖片至瀏覽器即可完成上傳，得到外鏈地址。

3. 第三種：使用本文提到的 極簡圖床，設定七牛云為圖床，填寫空間名稱、AK、SK、域名、樣式，上傳圖片即可得到外鏈地址。PS：其中，樣式為可選設定，其作用是 通過新增七牛樣式字尾，實現水印、縮圖功能，檢視使用說明

4. 第四種：使用上傳工具 MPic 。操作步驟：

   1. 開啟檔案，啟動程式請點選 MPic.exe，為方便啟用可點選右鍵傳送到‘桌面快捷方式’。
   2. 使用前先設定七牛雲端儲存賬號，即輸入七牛雲空間名、AK、SK、域名，儲存；
   3. 然後就可以直接拖拽圖片至客戶端就能上傳。

   說明：下載的檔案中包含的 CSkin.dll 檔案，它是程式的核心檔案，請與 MPic.exe 檔案保持在同一目錄中；需要檢視歷史上傳記錄請點選“我的上傳”即可檢視。

5. 第五種：①使用官網 開發者工具頁面 的「QSunSync」同步上傳 Windows 客戶端，親測了下，沒有成功，還不知道哪的問題；②或者使用官網的開發者工具頁面的 qshell 工具（基於七牛 API 服務的命令列工具），教程都在官網。

考慮到可以繫結七牛雲，我最後考慮的是第二、第三、第四種方式（這幾種方式都可以繫結七牛云為圖床），也都差不多，都可以選擇。當然若只是偶爾上傳圖片而已，可以考慮公共圖床，如使用 SM.MS 也 Ok。

參考：

• 利用「極簡圖床」網站頁面上傳圖片至七牛雲端儲存：使用七牛雲端儲存markdown用的圖片
• 這篇文章關於把七牛雲作為圖床的教程寫的很詳細、全面：如何使用七牛雲做為圖床？
• 使用七牛雲作為部落格的圖床

4. 目前使用的方法 [薦]

(1) 騰訊雲COS

一開始我使用的是七牛雲，但七牛雲後來改了規則，測試域名使用 30 天需要繫結自己備案的域名才能繼續使用，我覺得麻煩，後來知道騰訊 COS 有免費儲存，於是乾脆選擇了騰訊 COS 做圖床。

當時看官方說明，騰訊雲 COS 有 50G 的永久免費儲存空間，不過截止到現在 2019-02-01 登陸了官網檢視，才發現了 2019-01-25 騰訊雲物件儲存 COS 免費額度已經發生了變更，變成了這樣：

使用者型別	免費額度	有效期
個人使用者	50GB標準儲存容量	6個月
企業使用者	1TB標準儲存容量	6個月

個人使用者免費額度有效時間 6 個月。不過發現站內信給我的通知，我未受此次變更影響，也就是說我還是能享受 50G 的永久免費儲存空間，突然有種「早就是優勢」的趕腳。

(2) 上傳工具-PicGo

使用 PicGo 工具，配置自定義的快捷鍵，上傳圖片簡直不能太方便了，牆裂推薦。

GitHub 地址：Molunerfinn/PicGo，如何使用 PicGo 可以參考該文：PicGo：基於 Electron 的圖片上傳工具 - 少數派。該工具支援微博圖床、七牛圖床、騰訊雲 COS、GitHub 等等。

使用 PicGo 上傳圖片到騰訊雲 COS，參考：圖床上傳工具PicGo v1.5更新：支援騰訊雲COSv5版本、支援GitHub圖床、支援上傳前重新命名檔案等等 - 少數派

另外 PicGo 還支援微博圖床、阿里雲OSS、又拍雲等作為圖床，甚至 GitHub 圖床。如果不嫌圖片載入速度可能不那麼快，可以考慮一下 GitHub 作為圖床，記得我在哪裡看到過，GitHub 單個倉庫儲存容量可以達到 1000G，所以放心用吧，我覺得也考慮把這個作為檔案備份的地方。

具體如何配置參考：傳送門。我有實際操作了一遍，有幾點要說的：

1. 在 github.com/settings/to… 中生成的 token，記得複製以下存放在其他地方留著備用，因為這個 token 只會顯示一次；

2. PicGo 設定中，域名為空即可，另外，如果需要把圖片存放在圖床倉庫 img 資料夾，則先第一步，在倉庫新建 img 資料夾（如何在 GitHub 倉庫新建資料夾相信你有辦法的），然後在 PicGo 的儲存路徑指定為 img/ 即可，這樣得到的地址如下格式：

   https://raw.githubusercontent.com/strivebo/backup/master/img/20190218004624.png
   複製程式碼

3. 使用 GitHub 作為圖床，圖床倉庫不要去設定為私有，如果設定為了私有倉庫，在其他人瀏覽器不會顯示；

---

update：2018-01-31

update：2019-02-13 部分內容和文字表達有所修改；增加了「4. 目前使用的方法 [薦]」節內容。

update：2019-02-17 增加了利用 PicGo 使用 GitHub 作為圖床的內容