Hologram 是一個用來讀取樣式檔中的註解，並轉換成 Style Guide 的工具。
註：以下操作若未特別說明，一律是在「 iTerm 」或「終端機」的命令列下輸入指令執行。
確認 Ruby 版本大於 1.9.3 ，輸入：
ruby --version應出現：
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin13]
確認 RubyGems 有安裝，輸入：
gem --version應出現 (版本號不一定) ：
2.0.14
確認 Xcode 有安裝，輸入：
xcode-select -p應出現：
/Applications/Xcode.app/Contents/Developer
確認 gcc 有安裝，輸入
gcc --version應出現：
Configured with: --prefix=/Applications/Xcode.app/Contents/Developer/usr --with-gxx-include-dir=/usr/include/c++/4.2.1
Apple LLVM version 6.0 (clang-600.0.56) (based on LLVM 3.5svn)
Target: x86_64-apple-darwin13.4.0
Thread model: posix
確認 PHP 有安裝，輸入：
php --version
應出現：
PHP 5.4.30 (cli) (built: Jul 29 2014 23:43:29)
Copyright (c) 1997-2014 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2014 Zend Technologies
用 RubyGems 安裝 hologram ，輸入：
sudo gem install hologram確認安裝成功 (版本需大於 1.3.1) ，輸入：
hologram --version先以慣用的方式建立測試專案資料夾 (假設資料夾名稱為 hologram-test ) ，這裡用 mkdir 命令：
mkdir -p ~/hologram-test/{css,scss}這樣會在個人家目錄 (~) 下，依序建立 hologram-test 、 hologram-test/css 、 hologram-test/scss 等三個目錄。
hologram-test稱為「專案根目錄」，也就是我們的專案所在位置。hologram-test/scss存放原始的 scss 檔案。hologram-test/css存放編譯好的 css 檔案。
其他專案需要的目錄或檔案因為跟 Style Guide 無關，這裡就不多做說明。
註：當然不一定要直接在個人家目錄下建立，這裡僅是舉例。
切換到 hologram-test 輸入：
cd hologram-test稍後的指令都要在這個目錄下操作。
文件樣版能提供頁首和頁尾和文件樣式來讓 hologram 在產生文件時組合， hologram 本身有提供非常陽春的文件樣版，但實用度不足。
目前也有第三方提供功能較多樣化的文件樣版，例如 。
Yago/Cortana 及 jaceju/groot-theme ，這裡用 groot-theme 示範。
安裝文件樣版，輸入：
curl -L -# http://jaceju.github.io/groot-theme/install.sh | sh這樣會在專案根目錄下建立一個 groot-theme 目錄，裡面就會包含我們需要的文件樣版。
開啟 Sublime Text ，從 Finder.app 中把專案根目錄拖曳進去。
註：接下來的操作若無不特別說明的話，都是在 Sublime Text 進行。
在專案根目錄下新增 hologram.yml 檔，內容如下：
source: scss # 來源檔案
destination: styleguide # 產生後的文件位置
documentation_assets: ./groot-theme # 文件樣版
css_include:
- '/css/main.css' # 編譯好的 CSS ，也是專案的主要樣式
js_include:
- 'http://code.jquery.com/jquery-2.1.3.min.js' # 其他要包含進來 JavaScript在 hologram-test/scss 目錄下建立測試用 SCSS 檔 (假設為 main.scss ) ，並在寫入以下內容後存檔：
/*doc
---
title: Buttons
name: button
category: Base CSS
---
Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:
```html_example
<button class="btn btnDefault">Click</button>
<a class="btn btnPrimary" href="http://trulia.com">Trulia!</a>
```
*/
Hologram 會解析這裡面的內容，將它轉換成文件。
每個 scss 檔案都可以寫入對應的註解，註解的說明如下：
title: 元件顯示的名稱name: 元件錨點的名稱category: 元件的分類- 以上三個屬性上下用
---包起來 - 其他部份為 Markdown 語法
html_example: 會讓 HTML 範例自動變成預覽畫面與原始碼的對照
在 hologram-test/scss 目錄下建立一個 index.md 它會被當做是 Style Guide 的簡介。可以用 Markdown 語法寫入任何內容，例如：
# 〇〇〇 Style Guide
Our pattern libraries, code standards documents and content style guides回到命令列，輸入：
hologram -c hologram.yml這樣就會開始產生 Style Guide ：
Adding renderer for haml examples
Adding renderer for html examples
Adding renderer for js examples
Adding renderer for jsx examples
Adding renderer for react examples
Adding renderer for slim examples
Build completed. (-:
產生出來的文件就會放在 hologram-test/styleguide 裡面，可以放到網站空間上瀏覽。
臨時找不到網站空間來放置產生好的 Style Guide 的話，可以用 PHP 啟動一個臨時的 Web 伺服器，輸入：
php -S localhost:8000 -t styleguide這樣就可以在瀏覽器上打開 http://localhost:8000 來查看 Style Guide 了。