把GitHub作為圖床

Liutos發表於2018-12-07
Github圖床

背景

最近又迷戀上了寫部落格，尤其是前一段時間很想要寫點東西分享一些軟體的使用感想。但當寫完文章想要發表時就會碰到一個問題：由於我是現在本機的編輯器中用Markdown寫好了全文的內容，再發表到各個平臺（曾經是GitHub Pages搭建的部落格，後來又多了簡書，現在再加上SegmentFault）上的，因此文章裡的圖片都是引用在本地磁碟上的檔案路徑的。這麼一來，如果直接將文章原始碼貼上到部落格平臺上——比如貼上到SegmentFault中，那麼這些本地的圖片連結就無法在釋出後的文章中正常顯示了。

如果一開始就在SegmentFault中寫作也會遇到問題。SegmentFault上的文章插入圖片後，並不是像普通的Markdown原始碼那般插入一條![]()形式的標記的，而是像下圖這樣

在SegmentFault中插入圖片後的效果

顯然，這樣的文章原始碼複製到其它平臺（GitHub Pages、簡書）去釋出的話，必然是需要針對其中的圖片標記修改一番的——比剛開始的方法或許要更麻煩。

看來要解決這個圖片連結在不同平臺間共用的問題，必須有一處純粹的用於存放圖片檔案的地方——也就是大家常說的圖床了。剛開始我也放狗搜了一下，看看別人的推薦，印象中得到的答覆不外乎是又○雲、七○雲、新○微博，以及sm.ms等。但它們要麼需要註冊並且實名認證，要麼不純粹，要麼讓人覺得隨時會丟失。

某個晚上忽然想到，GitHub不就是一個很好的圖床麼？！在GitHub上建一個倉庫專門存放部落格中的圖片，不僅免費、完全受自己管理，而且自帶CDN加速，並且我的讀者群（如果真的有這麼一個群體的話）也應當可以暢通地訪問GitHub。

放圖片的倉庫雖然有了，但用起來還不是很便利——因為作為寫作素材的圖片在我的電腦上是存放在一個單獨的、非GitHub倉庫的目錄下的，所以如果要丟到圖床上，就需要先將檔案複製過去，然後執行git的add、commit、push三部曲，最後還要到GitHub上覆制這張新圖片的“raw”地址。

這個過程很機械化，完全可以用一個Alfred的Workflow來代勞。

編寫Workflow

編寫Workflow就像編寫Common Lisp中的巨集一樣，總是從它們的用法入手的。在我的設想中，這個Workflow的使用方式應當是：

  1. 首先，按下快捷鍵調出Alfred的輸入框，輸入關鍵字（在我這裡就叫做upload）來喚起這個Workflow；
  2. 然後，輸入要上傳的圖片檔案的絕對路徑並按下回車，開始在後臺處理
  3. 最後，上傳完畢後，彈出通知來告訴我

整個Workflow的概貌其實很簡單

upload Workflow的全貌

第二個節點所呼叫的External Script是長這樣子的

#!/bin/bash
# 將磁碟檔案上傳到GitHub

path=${1}

pictures_dir="${HOME}/Documents/Projects/riverbed/pictures"
cp "${path}" "${pictures_dir}"
echo '檔案複製完畢'

file=$(basename "${path}")
cd "${pictures_dir}"
git add "${file}"
git commit -m '上傳一張圖片'
git push -u origin master
echo '檔案已提交到GitHub'

/usr/local/bin/node -e "console.log(encodeURI('https://raw.githubusercontent.com/Liutos/riverbed/master/pictures/${file}'));" | tr -d '\n' | pbcopy

獲取檔案的絕對路徑其實很簡單，在Finder中選中檔案後，按下Command+Option+C即可

這裡使用basename命令獲取檔名。並且，為了避免git開啟文字編輯器要求輸入commit message，向git-commit命令傳遞了-m選項。

因為檔名含有非ASCII的字元（畢竟會有中文），需要做一次URL編碼，因此用了node來做轉換。在Node.js程式碼中用console.log輸出編碼後的圖片URL，結尾會有一個換行符，所以用tr將其去掉。最後，輸出的內容重定向給pbcopy，就將上傳後的圖片URL複製到剪貼簿中了。如果此時正在編輯文章，便可以貼上這個圖片的連結到原始碼中。

Alfred也提供Copy to Clipboard，用於將Workflow中上一個節點的輸出複製到剪貼簿中。之所以不使用，其實是因為剛開始的時候就是用的Alfred的Copy to Clipboard，結果發現git執行過程中的輸出也被Alfred接收了，跟圖片URL一起混進了剪貼簿中。所以最後改為直接呼叫pbcopy。

全文完。

【閱讀原文】

相關文章