1. 圖牀的選擇
(1) 什麼是圖牀?
很多技術人寫作都有在用 Markdown 輕量級標記語言進行博客寫作,這種寫作讓我們不用像使用 Word 那麼麻煩調整排版和格式,而只需專心寫作照樣完成排版的一種寫作方式。但是,基本所有支持 Markdown 本地寫作工具都只能採用導入本地圖片引用的方式,對於一篇需要大量圖片闡述的文章,或者是文章發佈於網絡後圖片丟失問題,這不得不是經常要面對的問題。
那麼有什麼比較好的解決方式嗎?哈哈,有的。很多人採用的圖片寄存於網絡,用服務廠商作爲圖片存儲的地方,大家稱爲圖牀。好了,那像 CSDN 博客、簡書平臺不是都可以做到圖片存儲嗎?是的,在這些平臺寫文章的時候可以通過上傳圖片然後得到一個圖片網絡地址,但當圖片數量多,一張一張上傳,這也是非常麻煩,另外,也是擔心萬一人家平臺做防盜鏈呢(不瞭解防盜鏈話自行谷歌下~)。其實我們想要圖牀功能,有很多專業的服務商免費提供一定容量和流量可以讓我們方便幹這些事情,比如七牛雲。
(2) 圖牀種類
谷歌搜索下圖牀能搜到很多圖牀網站,列舉一些供參考使用:
-
默認公共圖牀使用 sm.ms、微博圖牀,可以自定義支持七牛,界面簡潔美觀,支持 Chrome 插件,註冊後還可以同步上傳歷史。
-
SM.MS 是由 V2EX @Showfom 自建的,無外鏈限制,無流量限制的圖牀,支持 HTTPS,速度不錯,已經運行兩年多了。簡易的在線圖牀工具
(1) 圖牀分類
- 公共圖牀
- 自建圖牀:雲服務(如七牛雲、又拍雲、阿里雲 OSS)
- 自建圖牀:開源方案 (如 Lychee 開源方案、樹洞外鏈)
目前圖牀可以分爲兩種,一種是公共圖牀,一種是自建圖牀。
公共圖牀也就是利用公共服務的圖片上傳接口,來提供圖片外鏈的服務,比如「微博圖牀」。自建圖牀,也就是利用各大雲服務商提供的存儲空間或者自己在 VPS 上使用開源軟件來搭建圖牀,存儲圖片,生成外鏈提供訪問,比如七牛雲、Lychee 開源自建圖牀方案。
目前自建圖牀方案有兩種,一種是利用雲服務商提供的存儲服務來作爲圖牀,通過 API 來管理圖片,另一種是在 VPS 上安裝開源的圖片或文件管理程序,只要能提供外鏈,基本都可以作爲圖牀來用。
圖牀服務最重要的是穩定性,大廠的雲服務也都比較有保障,大家只要考慮下價格和易用性就可以了。就我個人而言,我首先推薦七牛,它的價格比較厚道,免費用戶也有一定額度,數據可以自己掌控,另外各大平臺的圖牀工具也基本都支持,易用性很高。其次推薦微博圖牀,對於不是很重要的圖片,都可以存到微博圖牀,畢竟流量存儲都免費,速度也不錯。至於圖牀工具,就看自己的喜好了,只要順手就行。但是不論選擇哪一個服務或者工具,我覺得首先要自己可以掌控數據。
總之,適合自己的纔是最好的。
(2) 圖牀工具
雖然圖牀選擇好,但是對普通用戶來說,直接使用圖牀 API 很麻煩,我們可以藉助一些工具方便的上傳圖片,下面就根據 macOS、Windows、Web 分別推薦幾款工具。
macOS:
-
MWeb(Markdown 寫作工具,也支持上傳圖片)
Windows:
Web:
- 比如「極簡圖牀」插件、「微博圖牀」等等
2. 七牛雲圖牀使用
關於七牛雲的介紹:七牛是一個雲存儲服務商,註冊並實名認證之後,你將免費享有 10GB 存儲空間,每月 10GB 下載流量、100 萬次 GET 請求、 10 萬次 PUT/DELETE 請求。七牛的定位不是像百度雲一樣的網盤 ,也不是同堅果雲一般的同步雲 ,而是 CDN,讓你在瀏覽網頁的時候最快的接收到頁面中的圖片、音頻等文件,所以非常適合個人、企業用戶用來儲存站點資源。對於個人博主來說,你可以把博客中的圖片、音頻、視頻等媒體上傳到七牛,在博客中引用;也可以將站點需要加載的 CSS、JS 等文件上傳到七牛,以加速網站。
(1) 最原始上傳
①到 七牛雲 網站註冊;
②實名認證(實名認證了才能享受 免費 10Gb 存儲空間;實名認證需要「本人手持身份證」的正反面兩張照片,請提前準備好);
③點擊「管理控制檯」;
④「資源主頁」–> 點擊「對象存儲」,立即添加(即創建存儲空間,七牛雲把這個叫作”Bucket“),其中包括以下三個項:
- 存儲空間名稱:存儲空間名稱作爲唯一的 Bucket 識別符
- 存儲區域:區域選擇自己附近的
- 訪問控制:作爲圖牀的話,訪問控制只能選擇爲「公開空間」
點擊創建,Ok。
⑤然後打開存儲空間,選擇內容管理,點擊上傳文件,上傳你所需要用到的圖片;
⑥上傳完成後,在存儲空間文件列表中點擊某一文件的右側按鈕,可以看到外鏈地址,複製粘貼即可用。
現在來梳理下一張圖片上傳圖片所經歷的步驟:
1. 登錄打開七牛雲網頁個人存儲空間
2. 上傳圖片
3. 複製外鏈
4. 粘貼到 Markdown
一張圖片用了四步吶,要是圖片很多,那不是作死嘛。有什麼方法解決方便快捷上傳嗎?當然有,方法有三個:
-
七牛雲插件上傳:簡單
-
使用 dropzone 上傳:方便
-
使用命令行上傳:快捷,尤其適合需要目錄及協作的團隊
官方有個「開發者工具」頁面,提供一些工具進行上傳,包括後面講的 qshell, 其中有個「QSunSync」的 Windows 版本圖片同步上傳客戶端。
(2) 七牛雲插件上傳:簡單
-
瀏覽器插件
qiniu upload files七牛雲插件,像使用桌面系統一樣管理你的七牛雲空間;支持拖拽上傳,批量操作,文件處理等功能
-
還可以利用在線「極簡圖牀」工具,默認使用的爲公共圖牀 sm.ms,但是也可以自定義的,自定義圖牀爲七牛雲圖牀,方法如下:
在最前面有關七牛雲的註冊等等操作,前面已經講了,不絮叨了,之後:
-
在“個人面板”->“密鑰管理”中查看 AccessKey/SecretKey;
-
在儲存空間的“空間概覽”裏,記住這裏的“測試域名”;
-
在「極簡圖牀」上配置上剛纔七牛儲存的“空間名稱”、“AccessKey”、“SecretKey”、“域名”後,保存。然後就可以上傳到自己專屬的七牛空間上了。
“AccessKey”、“SecretKey”:在“個人面板”->“密鑰管理”中查看AccessKey/SecretKey;
“域名”:在儲存空間的“空間概覽”裏可以看到。
-
(3) 使用 dropzone 上傳:方便
參考文章:
(4) 使用命令行上傳
(1) qshell
使命命令行方式,可以不用手動上傳文件到七牛,它會自動幫你將本地目錄的文件同步到七牛之前設定的存儲空間下。
詳細教程,參考「參考資料」②文章的方法三,但是參考資料②中所說的 qrsync 已經失效,現在使用的 qshell 命令行,操作方式其實類似。
先引用官方的 qshell 介紹:qshell 是利用七牛文檔上公開的 API 實現的一個方便開發者測試和使用七牛 API 服務的命令行工具。該工具設計和開發的主要目的就是幫助開發者快速解決問題。目前該工具融合了七牛存儲,CDN,以及其他的一些七牛服務中經常使用到的方法對應的便捷命令,比如 b64decode,就是用來解碼七牛的 URL 安全的 Base 編碼用的,所以這是一個面向開發者的工具,任何新的被認爲適合加到該工具中的命令需求,都可以在 ISSUE列表 裏面提出來,我們會盡快評估實現,以幫助大家更好地使用七牛服務。
配置教程:官方文檔 | 官方GitHub,同時官方也有視頻教程:視頻教程–命令行工具使用。
(2) hexo-qinqiu-sync
網上看到有通過命令安裝 hexo-qiniu-sync
插件的方式:http://skyhacks.org/2017/08/02/UseQiniudnToStorePic/、 https://yuchen-lea.github.io/2016-01-21-use-qiniu-store-file-for-hexo/
GitHub 上也有教程:gyk001/hexo-qiniu-sync
(5) 圖片優化
圖片搜身、水印處理、自動旋正解決照片莫名其妙發生旋轉:Hexo博客(19)使用七牛雲圖牀 | masikkk
3. 圖片上傳方案選擇
由於筆者用的 Windows,並且目前對圖片上傳的要求不大,只要能保證方便上傳圖片就行,目前有考慮以下幾種方式。
-
第一種:使用本文一開始提到的谷歌搜索出來的那些在線圖牀進行上傳就是,比如 SM.MS,不過可能會有某些限制,比如「小賤賤圖牀 」每日上傳圖片限制數:20張。
-
第二種:使用本文提到 Chrome 瀏覽器插件
qiniu upload files 插件,填寫空間名稱、AK、SK、域名等設置即可從電腦拖拽圖片至瀏覽器即可完成上傳,得到外鏈地址。 -
第三種:使用本文提到的
極簡圖牀,設置七牛云爲圖牀,填寫空間名稱、AK、SK、域名、樣式,上傳圖片即可得到外鏈地址。PS:其中,樣式爲可選設置,其作用是 通過添加七牛樣式後綴,實現水印、縮略圖功能,查看使用說明 -
第四種:使用上傳工具 MPic 。操作步驟:
- 打開文件,啓動程序請點擊 MPic.exe,爲方便啓用可點擊右鍵發送到‘桌面快捷方式’。
- 使用前先設置七牛雲存儲賬號,即輸入七牛雲空間名、AK、SK、域名,保存;
- 然後就可以直接拖拽圖片至客戶端就能上傳。
說明:下載的文件中包含的 CSkin.dll 文件,它是程序的核心文件,請與 MPic.exe 文件保持在同一目錄中;需要查看歷史上傳記錄請點擊“我的上傳”即可查看。
-
第五種:①使用官網 開發者工具頁面 的「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,所以放心用吧,我覺得也考慮把這個作爲文件備份的地方。
具體如何配置參考:傳送門。我有實際操作了一遍,有幾點要說的:
-
在 https://github.com/settings/tokens 中生成的 token,記得複製以下存放在其他地方留着備用,因爲這個 token 只會顯示一次;
-
PicGo 設置中,域名爲空即可,另外,如果需要把圖片存放在圖牀倉庫 img 文件夾,則先第一步,在倉庫新建 img 文件夾(如何在 GitHub 倉庫新建文件夾相信你有辦法的),然後在 PicGo 的存儲路徑指定爲
img/
即可,這樣得到的地址如下格式:https://raw.githubusercontent.com/strivebo/backup/master/img/20190218004624.png
-
使用 GitHub 作爲圖牀,圖牀倉庫不要去設置爲私有,如果設置爲了私有倉庫,在其他人瀏覽器不會顯示;
update:2018-01-31
update:2019-02-13 部分內容和文字表達有所修改;增加了「4. 目前使用的方法 [薦]」節內容。
update:2019-02-17 增加了利用 PicGo 使用 GitHub 作爲圖牀的內容