把GitHub做爲圖牀

背景

最近又迷戀上了寫博客，尤爲是前一段時間很想要寫點東西分享一些軟件的使用感想。但當寫完文章想要發表時就會碰到一個問題：因爲我是如今本機的編輯器中用Markdown寫好了全文的內容，再發表到各個平臺（曾經是GitHub Pages搭建的博客，後來又多了簡書，如今再加上SegmentFault）上的，所以文章裏的圖片都是引用在本地磁盤上的文件路徑的。這麼一來，若是直接將文章源碼粘貼到博客平臺上——好比粘貼到SegmentFault中，那麼這些本地的圖片連接就沒法在發佈後的文章中正常顯示了。

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

顯然，這樣的文章源碼複製到其它平臺（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的概貌其實很簡單

第二個節點所調用的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。

全文完。

【閱讀原文】