StackEdit 的優點：
- 免費
- Open Source
- 支援 Markdown
- 支援 YAML
- 可輸出成 HTML
- 支援離線編輯
- 支援多種雲端儲存同步 (Dropbox, Google Drive..)
- 支援一鍵發佈/更新文章 (Blogger, Gist, Github, Tumblr, Wordpress..)
- 支援目錄(Table of Contents)
- 支援線上對話
- …
Dropbox 的優點：
- 編輯圖片後不須重新上傳，blogger 的圖片也會自動更新。
- URL 固定，用 markdown 寫文章時，只需要修改最後面的檔名，加快寫作效率。
- 圖床使用 dropbox 的高速 CDN，讀取速度飛快。
- 可以建立資料夾將圖片分門別類，整理起來更有序。
Blogger 的優點：
- 免費空間
- 內鍵 Google CDN，速度快
- 自訂 Domain
- 自訂版面
- 自訂 CSS
- 自訂 javascript
- 自訂 widget
- 自訂選單
- 支援第三方外掛(discuss, google analysis..)
目錄：
- (一) 理想中的部落格工具
- (二) 事前準備
- (三) 自定 Blogger 版面
- (四) 範例發文 workflow
- (五) 簡易 Q & A
- 1. 要怎麼在 StackEdit 創建目錄(Table of Contents)
- 2. 讓文章在首頁只顯示部分內容，不要顯示全部內容
- 3. StackEdit 連結不了 Google 或 Blogger 帳號
- 4. 用 firefox 時，code 不會自動 wrap 到下一行
- 5. 修改文章的 permalink URL
- 6. 在文章中嵌入 Youtube 影片、Flash 元件
- 7. 跳脫 HTML tags
- 8. Blogger 預設用 br tag 取代掉 p tag，導致文章排版走樣
- 9. Dropbox 的圖片不會在 popular post widget 出現 thumbnail
- 10. 加入 Disqus 留言板
- 11. 設定 google analysis
- 12. 在新分頁開啟超連結
(一) 理想中的部落格工具
我常隨手用 Sublime Text 將各種筆記用 markdown 格式記錄起來，存在 dropbox 內，並在適當的時間整理，因此最基本的需求是：以前寫部落格最麻煩的地方在於，每當要修改文章內容時，總是會被部落格的 content management system (CMS) 給綁死，只是改一點內容就得大費周章，更不用說更換圖片或照片了。所以我希望能：
- 能夠快速發佈/更新文章。
- 文章不受限於 CMS，可儲存於本地端。
- 圖片不受限於 CMS，可儲存於本地端，且圖床速度要快。
- 免費空間
- 內鍵 Google CDN，速度快
- 自訂 Domain
- 自訂版面
- 自訂 CSS
- 自訂 javascript
- 自訂 widget
- 自訂選單
- 支援第三方外掛(Disqus, google analysis..)
註: 我曾堅持用 Github Pages + jekyll 寫了兩個月的部落格，最後覺得我為什麼要這樣搞自己..= =。
註2: 更多關於 Stackedit 的介紹請參閱這篇文章：Logdown 的啓發 - StackEdit
(二) 事前準備
1. 申請 Blogger
到 Blogger 申請一個帳號就可以了，(you may need to edit your google+ profile on the way, since google wants to bind them together.)2. 申請 Domain
基本上跟著官方教學：如何在網誌使用自訂網域名稱 的步驟做就可以了。要注意的是，如果你的 Host Domain 的 DNS 內已經有某名稱(e.g. blogger)的紀錄了(e.g.
A record)，則新增同名稱的 CNAME 會失敗，要先把相關的 A record刪除才行。3. 使用 StackEdit
使用 StackEdit 不須註冊，但依照使用的需求可能會需要連結 Google 帳戶、Dropbox 帳戶與 Blogger 帳戶。StackEdit 的使用方式相當簡單，看官方的展示影片應該很快就能學起來了。
幾個重要的工具都在左上角的選單中：
- 連結 Dropbox 文章：
Synchronize -> Open from Dropbox -> 授權 Dropbox -> 選取文章(markdown) -> 開啟- 發佈至 Blogger：
Publish -> Blogger -> 授權 Blogger -> 輸入網址(自訂 Domain 也可)4. Dropbox 圖床
2017/9/1 更新：Dropbox 已經關閉 Public Folder 功能，故以下方法已經不再適用！請另尋其他圖床。StackEdit 只是個介面，並沒有提供空間給我們放圖，但提供 markdown 語法插入圖片 URL。
我們的其中一個需求是：
圖片不受限於 CMS，可儲存於本地端，且圖床速度要快。但是如果使用 Blogger 內建圖床的話，圖片會需要上傳至 Picasa，這對旅遊、美食類部落格來說或許很方便。但對我這種懶得上傳圖片，且可能需要常修改圖片的人而言，實在太過麻煩，我希望能夠在修改完圖片的同時，就已經自動完成上傳的動作。
世界上有這麼方便的事情？
有，使用 Dropbox 的 Public Folder 即可。
若你的 dropbox 帳號是在 2012/12 之後建立的，那你的資料夾預設是沒有 public folder 的，解決方法很簡單，到你的 Dropbox 資料夾最上層建立一個叫做 “Public” 的資料夾即可，建立完成後，該資料夾會有顆地球的 icon。
放在 Public Folder 的檔案會被視為「公開」的檔案，與一般 Dropbox 檔案不同的地方如下。
A. 一般的 Dropbox 檔案
一般 Dropbox 檔案按右鍵後會是分享 Dropbox 連結。
一般 Dropbox 的檔案的 Dropbox 連結是獨立的，例如：
https://www.dropbox.com/s/b4vk2d3yaljlzb2/run1.png https://www.dropbox.com/s/vusefbcg59u9nte/eat4.png上傳到 picasa 的圖片網址也是獨立的，例如：
https://lh6.googleusercontent.com/eXRsawqkbjg3QPxQ57lRN https://lh5.googleusercontent.com/xdret56V2b-_7ghrwGK9eB. Public Folder 內的 Dropbox 檔案
Public Folder 內的檔案按右鍵後會是複製公開連結。
Public Folder 的檔案的 Dropbox 連結是可推敲的，例如：
假設 Dropbox/Public/2015/dogs/run1.png 的網址是
https://dl.dropboxusercontent.com/u/XXXXXXX/2015/dogs/run1.png 則 Dropbox/Public/2013/cats/eat4.png 的網址會是
https://dl.dropboxusercontent.com/u/XXXXXXX/2013/cats/eat4.png對想要用 markdown 快速插入圖片的我們來說，Dropbox 的 Public Folder 非常方便。
更大的誘因在於，當 Public Folder 內的圖片有變更時，Dropbox 會自動更新圖片，而網址依然不變！
圖片放在 Dropbox public folder 的優點：
- 編輯圖片後不須重新上傳，blogger 的圖片也會自動更新。
- URL 固定，用 markdown 寫文章時，只需要修改最後面的檔名，加快寫作效率。
- 圖床使用 dropbox 的高速 CDN，讀取速度飛快。
- 可以把整個資料夾的圖片透過 TinyPNG 等方式一次壓縮。
- 可以建立資料夾將圖片分門別類，整理起來更有序。
- 圖片 URL 是公開的，表示任何人都可以隨意讀取。但是寫 blog 本來就是要給大家看得，所以沒什麼差。
- 無法做到 thumbnail (純 markdown 做不到，必須透過 StackEdit 或 Blogger 的後端來做)。
- 不適合大量照片，例如旅遊、美食等等，大量照片最好還是用 picasa/Facebook/wordpress 等相簿尤佳。
(三) 自定 Blogger 版面
我的 Blogger 版面放在 Github，可供參考：https://github.com/johnyluyte/blogger-theme-picturewindow-with-tabs。
1. Syntax highlighter
我本身沒有用這個，不過列出來給大家參考。https://github.com/syntaxhighlighter/syntaxhighlighter
安裝方式請參考：How to Format Code and Syntax Highlighting to Blogger
- 從 Github 下載 syntaxhighlighter 的 release 版本。
- Use Dropbox to host the files. Simply add the unzipped files to your Dropbox Public folder. dropbox CDN is very fast.
2. Google Code Prettify
參考這篇文章：在Blogger內加入程式碼高亮-使用Google Code Prettify從 官方網站 下載下來後即可自己編輯 CSS，之後將編輯好的 CSS 放在 Dropbox public folder 即可。
CSS 的編輯與預期效果可參考 預設的範例。
預設好像只支援
Code Blocks，我依自己的需求將其修改成可套用在 Code Spans 裡面。$("code").each(function(){
if(!$(this).closest("pre").length){
$(this).addClass('prettyprintinline');
}
});Code Spans 與 Code Blocks 編譯成 HTML 的 <code> 與 <pre> TAG，因此我們只要在 Blogger 用 javascript 抓出這些 TAG 並套上 Google Code Prettify 的 Class 即可達到全自動 code highlight 的效果。3. 自訂選單 Tabs
我的版面使用 Blogger 官方 template 的 Picture View，我喜歡其簡潔明瞭的設計，但它似乎缺少了預設的選單。參考這個網頁：How to Add Neat CSS3 Dropdown Menu in Blogger 擷取出簡單的 HTML Menu 選單。
將此 HTML 插入 layout 的 javascript 中，並加入適當的 CSS 調整版型。
<div id='contact-links'>
<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='linkToSomeAwesomePage'>My Page</a></li>
<li><a>Dropdown lists ▼</a>
<ul>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
</ul>
</li>
<li><a href='#'>Another Page</a></li>
</ul>
</nav>
</div>
</div>linkToSomeAwesomePage 最好使用 Absolute Path，要用相對路徑當然也可以，但要注意網域問題。4. 相關文章推薦
參考這篇文章： [小工具]Blogger 相關文章 V2__安裝懶人包 並自行做修改。5. 自訂其他版型 CSS
我的版面使用 Blogger 官方 template 的 Picture View，其<Table> 的預設版型並不好看，我們可以自行編輯 CSS 來調整其版型，但是我們又不是 CSS 高手，怎麼設計出好看的版型呢？解決方法也很簡單：拿別人做好的來版型套用就好了。
我直接拿 Bootstrap 的 table 部分 來做修改，並擷取出自己需要的部分。
修改後的 CSS 大概長得像這個樣子：bootstrap-table.css。
接著再到 layout 去插入 javascript。
<!-- bootstrapTable javascript starts -->
<link href="https://dl.dropboxusercontent.com/u/PATH_TO_YOUR_PUBLIC_LINK/
css/bootstrap-table.css" rel="stylesheet" type="text/css"></link>
<script type='text/javascript'>
$("table").each(function(){
$(this).addClass('table');
$(this).addClass('table-bordered');
});
</script>
<!-- bootstrapTable javascript ends --><table> 長這個樣子：
插入 CSS (bootstrap table-striped-bordered)之後的
<table> 好看多了：
6. 其他版面元素
其他元素如字體、背景、等等也都可以自行設定。body{
font-family: 'Helvetica', 'Microsoft YaHei',
'Arial', sans-serif !important;
}https://github.com/johnyluyte/blogger-theme-picturewindow-with-tabs。
(四) 範例發文 workflow
- 編輯 markdown 文章
- 編輯本文
- 編輯 YAML
- 修正圖片，使用 https://tinypng.com/ 壓縮圖片
- 從 Dropbox public folder 取得公開連結，插入圖片
- 用 StackEdit 上傳
- 讀取並同步 markdown，看看有沒有明顯缺失，同步修改
- 檢查 TOC 是否正確
- 用 StackEdit 上傳至 Blogger
- 複製 postid 到 markdown，方便之後更新文章
- 檢查網址是否正確，有需要的話就 revert to draft，改網址
- 修正圖片長寬大小
因為我已經習慣了 Sublime Text 的各種快捷鍵，在自己熟悉的編輯器內寫文章/Coding 的效率會是用其他工具的好幾倍！
(五) 簡易 Q & A
1. 要怎麼在 StackEdit 創建目錄(Table of Contents)
在 Markdown 文章中輸入[toc] 即可。2. 讓文章在首頁只顯示部分內容，不要顯示全部內容
使用<!--more--> 來標示要部份顯示的內容(在該行之後的內容要點進文章內才會顯示)。推 mouth5566:有一次 我在衣蝶遇到郭采潔 他人超好的 跟他要簽名然後
<!-- 以上內容會顯示在首頁 -->
<!--more-->
<!-- 以下內容要點開本文才會顯示 -->
推 aray81205:就射了
推 huntersp:就射了
推 thousandgold:就射了
→ huntersp:靠杯一次三個人射喔3. StackEdit 連結不了 Google 或 Blogger 帳號
請參閱這篇討論：Can’t sync with Google Drive after Upgrade #158Chrome 的 Disconnect extension 會擋住 google 認證的步驟，停用就可以了。
4. 用 firefox 時，code 不會自動 wrap 到下一行
請參閱這篇文章：MDN > CSS > word-wrap將 CSS 的
word-wrap 修改成 word-wrap 即可。{word-wrap: break-word;}5. 修改文章的 permalink URL
假設某文章 md 檔名為2015-01-02-google-sheet-accounting.md title 標題為
用 Google 試算表做免費實用的雲端記帳用 StackEdit 發佈文章後，文章 URL 會是
http://your_domain/2015/01/google.html而不是理想中的
http://your_domain/2015/01/google-sheet-accounting.html因為 StackEdit 抓取的 URL 是 title 標題，而不是 md 檔名。
A. Blogger Page
解決方法：Custom Permalink Blogger Pages | Change Blogger Static Page URLsBlogger 頁面的話需要先到 Blogger 後台建立一篇文章，建立時的文章標題名稱就會自動設定成 permalink，先藉由輸入文章標題指定 URL，建立完成後再複製 postID 到 StackEdit ，從 StackEdit 更新真正的文章標題即可。
註: 由於 URL 不能含有中文字，要作為 URL 的文章標題只能包含英文、數字和底線。
B. Blogger Post
解決方法：Changing blogger post URL – Change the permalink URL of published Post普通部落格文章的話，就先用 StackEdit 發文，到 Blogger 後台將文章改回 draft，此時即可更改 permalink，再發佈即可。
6. 在文章中嵌入 Youtube 影片、Flash 元件
A. 嵌入 Youtube 影片
# Blogger 基本上用 iframe 就可以嵌入 youtube 了
<iframe title="YouTube video player" width="480" height="390"
src="http://youtube.com/v/iJ1tl20YDj0?html5=1" frameborder="0"
allowfullscreen></iframe>
# 如果不行的話改用這個折衷的方法
[](https://www.
youtube.com/watch?v=iJ1tl20YDj0)
# 再不行的話就只能這樣惹
[https://www.youtube.com/watch?v=iJ1tl20YDj0](https://www.youtube.
com/watch?v=iJ1tl20YDj0)更多資訊請參閱這篇討論：Is it possible to embed Youtube/Vimeo videos in Markdown using a C# Markdown library
以及這篇討論：How do I get a YouTube video thumbnail from the YouTube API?
B. 嵌入 Flash 元件
<iframe title="Flash player" width="200" height="290"
src=" http://chunnorris.cc/public/blog-sticker/yuki_clock_II_v10.swf"></iframe>C. 修改 CSS
我們之所以使用<iframe> 而不用 <embed> 的原因在於：StackEdit 將 <iframe> 視為特殊 Tag，並且會用我們期待的方式處理 <iframe>，反之 <embed> 則會當作一般文字而不予處理。有些瀏覽器預設會對 iFrame 做樣式處理，例如增加 border, inset 等等，如果覺得這樣不好看的話，記得到 CSS template 裡面加上
iframe {border: None}。7. 跳脫 HTML tags
請參閱這篇討論：superscript in markdown (Github flavored)?依此類推，可直接在文章內刻上各種 HTML tags。反之，當在文章內出現
<p> 等符號時，記得用 code span 跳脫，否則會被視為 html tag。8. Blogger 預設用 br tag 取代掉 p tag，導致文章排版走樣
解決方法：參閱我之前寫的 這篇文章。9. Dropbox 的圖片不會在 popular post widget 出現 thumbnail
請參考下列討論：Re: Thumbnails Not Showing on Popular Post Widget原因在於
The Popular Posts widget will only display images that are uploaded to Blogger。我們沒有上傳圖片到 blogger，而是使用 dropbox 的 Public folder，故 popular post widget 不會出現任何圖片。
解決方法：用自訂的 javascript + CSS 做到 popular post widget 的效果。例如：
<div id="gadget_feature_posts">
<ul>
<li>
<img src="https://dl.dropboxusercontent.com/u/34354811/your_icon.png">
<a href="http://blog.chunnorris.cc/2015/01/google-sheet-accounting.html">
用 Google 試算表做免費實用的雲端記帳
</a>
</li>
</ul></div>$('#gadget_feature_posts') 的 CSS 即可。10. 加入 Disqus 留言板
登入 blogger 跟 Disqus，到 https://disqus.com/admin/blogger/ 照著上面的指示操作即可。11. 設定 google analysis
- 登入 google analysis 設定 blogger 網址。
- 登入 blogger 後台的 settings -> other 設定 google analysis ID。
12. 在新分頁開啟超連結
Markdown 預設的超連結目標都是目前的分頁，但是我們可以用一些 簡單的 javascript 小技巧，使文章中的超連結可以在新的分頁 (tab) 中顯示，例如：<!-- Set markdown link target=“_blank” javascript starts -->
<script type='text/javascript'>
// 將所有在 .post-body.entry-content 文章內的連結都設定為 target = _blank
$(".post-body.entry-content a").attr('target', '_blank');
// 但是目錄 TOC 的連結不要
$(".toc a").attr('target', '');
</script>
<!-- Set markdown link target=“_blank” javascript ends -->