How to setup Ghost blog platform (下)

by Captain Vincent

接著進入下一個主題, 如何部署 Ghost 到 git.io 以及 Ghost 進階的功能設定 (Syntax highlight, 使用 Disqus 添加留言功能, 添加 Google Analytics

Buster 作者Blog中介紹 有提到是受了 Octopress 的啟發以及在命名上由來的惡趣味, ker ker... Ghostbusters 又透露自己年紀了

部署 Ghost 到 git.io

首先要部署 Ghost 到 git.io 需要先安裝 python 以及套件 buster

brew install python  
sudo pip install buster

[Issue 1] 參考自 Stackoverflow, 在安裝 sudo pip install buster 出現錯誤時, 可以看看是否同樣是因為尚未安裝 xcode 的command line tool 所造成的

然後在 Ghost 目錄底下建立一個名為 static 的資料夾, 指向 github 上 git.io 的 repo

git clone git@github.com:username/username.github.io.git static

以手動方式完成(筆者是採用這種方式) 或是直接使用 Buster 提供的 command 來幫忙

buster setup [--gh-repo=<repo-url>]

接著透過以下指令分別產生完靜態頁面, 並透過 Browser 預覽產生完的結果

buster generate --domain=http://captainvincent.github.io  
buster preview  
open http://localhost:9000

最後就可以將 Ghost 以及日後做的變更 deploy 到 git.io 上囉。

buster deploy

Syntax Highlight in Ghost

使用 prismjs , 首先先至官網上如下圖操作

  1. 透過預覽來選擇不同的 Theme , 這邊設計有點詭異的地方在 preview window 在網頁底部
  2. 瀏覽完後再選擇你想使用的 Theme
  3. 接著勾選要支援 syntax highlight 的語言
  4. 接下來移至網頁底部分別按下按鈕來下載 js 與 css 檔案 (prism.css & prism.js)

下載完後再將 prism.css & prism.js 分別放置當前 Ghost 所使用的 Theme 底下路徑中 (Ghost 所預設使用的 Theme 為 casper)

/content/themes/[theme name]/assets/css/

與

/content/themes/[theme name]/assets/js/

接著修改以下路徑的檔案

/content/themes/[theme name]/default.hbs

在該檔案內分別添加以下關於 prism.css 與 prism.js 修改的兩行 Code

    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

與

    <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

接著就可以在文章中添加以下的寫法來測試一下。

 ``` language-javascript
 var s = "JavaScript syntax highlighting";  
 alert(s); 
 ```

添加 Disqus 留言功能

Reference Page Adding Disqus to your Ghost blog
參考官網教學上的做法即可, 故省略翻譯 XD

第一步先註冊一個 Disqus 帳號

登入後先點選右上角的 Setting 選項 Add Disqus To Site

再點選下圖中間的 Start Using Engage 或右上方 Install on Your Site 進入取得識別用的 Disqus URL

註冊一個識別用的 Disqus URL

取得用來內嵌的 Disqus Script

接著會得到的類似以下內文的 Script

<div id="disqus_thread"></div>  
<script>  
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
*/
/*
var disqus_config = function () {  
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable  
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable  
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');

    s.src = '//captainvincent.disqus.com/embed.js';

    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();
</script>  
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

再透過修改底下路徑的檔案, 將 Script 貼入希望放置留言區的地方, 目前筆者是放在 footer 區塊裡的 <section class="share"> 之後

content/themes/[theme name]/post.hbs

並修改剛貼入的 Script 中底下的四行, 先將註解符號 /* */ 移除,

/*
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable  
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable  
*/

最後再將 PAGE_URL 置換成 '{{@blog.url}}{{url}}', PAGE_IDENTIFIER 置換成 'ghost-{{id}}'

this.page.url = '{{@blog.url}}{{url}}';  
this.page.identifier = 'ghost-{{id}}';

存擋完畢就大功告成了。

添加 Google Analytics

先建立 Google Analytisc Account , 並先取得 Tracking Code 類似下圖

再透過 Ghost Platform 所提供的管理頁面選項 Code Injection

選擇右上角 Save 之後就完成了。