開源一個小工具 - 更快、更簡單的靜態站點生成器 generator-pencil

generator-pencil

若是你有想過利用免費的Github服務來託管靜態站點，你就必定用過很多站點生成器。大名鼎鼎的Jeklly，以及它的加強型變種Octopress。

在你閱讀了各式各樣的教程、API文檔以後，你終於開始寫下第一篇博文。到這裏還算是不錯的體驗，可是一段時間以後：

• 這些軟件的preview和build慢如蝸牛
• 各式各樣的plugin、theme看起來美好，可是
  
  
  • 你卻徹底不知道它在幹什麼，還須要繼續閱讀一堆文檔來正確配置它。
  • 它會讓你的build更慢
  • 它會讓你的頁面瀏覽更慢
• 你願意爲製做任何小功能來來學習插件製做麼？

Small, fast, and simple

generator-pencil是一個yeoman generator。這個工具的特性：

• 使用Markdown來存儲文章內容和附加數據(metadata)
• 使用Handlebar來渲染頁面，同時提供更強大的模板功能(partial、helpers等)
• 總體流程的自動化工做則由Grunt和一些子任務(build、preview、deploy)完成

若是你不明白上面這些工具也不要緊，由於，大多數狀況下，你能夠沒必要修改任何配置。簡單的模板和js文件，你也能夠隨意修改，事情比你想象中的簡單得多。

安裝

npm install yo grunt-cli -g
npm install generator-pencil

因爲要使用更快速的node-scss做爲樣式表編譯操做；而node-scss目前不支持node v0.11.x。因此目前來講，本模塊目前也不支持最新的node。不過你能夠將node-scss從任務列表中刪除，這樣將沒有使用最新版node的限制。

建立第一個站點

mkdir mysite && cd mysite
yo pencil

接下來，你會看到一些可交互的命令行提示：

• 首先是詢問站定名稱，看起來rural-potato不是太好的名字，你最好寫上更帥的名字

• 而後會詢問Github上，該站點的git地址，你應該填寫ssh協議的地址，例如git@github.com:RobinQu/mysite.git。該地址的的gh-pages分支將會成爲咱們部署的目標。固然，你能夠直接輸入回車跳過這個步驟，以後再整合你本身的部署流程。

• 請問站點的做者名稱？你是Grea writer麼？

• 你的站點URL將會是什麼？請不要將URL的結尾加上/。例如，個人我的博客是 http://robinqu.me，而不是http://robinqu.me/。

• 是否啓用Disqus做爲你的評論系統。若是須要Disqus，請輸入你的Disqus ID：

• 在哪裏儲存你的Markdown文檔？默認是src/contents/blog文件夾，建議不修改。

這是該向導最後一個問題，接下來程序會幫你安裝各類依賴的工具和插件。

安裝完成後，你獲得一個以下的目錄結構：

其實，程序還偷偷幫你新建了一篇文章，名字叫A Brand new page。

文章放在src/contents/blog文件夾下，並按照年、月、日分組。打開這篇新建立的文章：

---
title: brand new page
date: Wed May 14 2014 13:13:36 GMT+0800 (CST)
template: article
---
Enter your content here

內容十分簡單，可是開頭的這些代碼，很多人會熟悉。對，和Octopress等同樣，geneartor-pencil也支持在Markdown內嵌入YAML格式的數據，做爲這篇文檔的屬性信息。有一些屬性是有特殊意義的，例如title。這裏詳細的定義，請參考文檔。

我要看效果！

若是你以前選擇了發佈到Github，並填寫了GIT地址，那麼你要確保當前項目的文件夾是一個初始化過的Git working copy：

# 初始化git版本庫
git init
# 添加你的實際GIT版本庫的遠程地址
git remote add origin <your git repo url>
# 添加目前的改動
git add .
# 進行第一次提交
git commit -a -m "站點的起點"

不管是寫了文章，仍是修改了配置，在進行預覽或發佈以前都必須進行提交。不然，你看到的將不會是你指望的內容。

說了這麼多，咱們終於能夠看看效果了：

grunt preview

這個命令會在本地的9000端口開啓一個HTTP服務器。正常的輸出開啓是這樣。你能夠不關注輸出內容，但你須要知道，當出現Waiting字樣時，表明全部任務都完成了， 你能夠打開http://localhost:9000/看看了。

$ grunt preview
Running "revision" task
HEAD at revision 88e0eba

Running "clean:build" (clean) task

Running "writer:all" (writer) task

Running "concurrent:build" (concurrent) task

    Running "imagemin:dist" (imagemin) task
    Minified 0 images (saved 0 B)

    Done, without errors.


    Execution Time (2014-05-14 05:35:46 UTC)
    loading tasks  3ms  ▇▇▇▇▇▇▇▇▇▇▇▇ 25%
    imagemin:dist  9ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 75%
    Total 12ms

    Running "sass:build" (sass) task
    File dist/css/blog.css created.

    Done, without errors.


    Execution Time (2014-05-14 05:35:46 UTC)
    loading tasks   3ms  ▇▇▇▇▇▇▇▇ 17%
    sass:build     14ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 78%
    Total 18ms

    Running "svgmin:dist" (svgmin) task
    Total saved: 0 B

    Done, without errors.


    Execution Time (2014-05-14 05:35:46 UTC)
    loading tasks   3ms  ▇▇▇▇ 7%
    svgmin:dist    43ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 93%
    Total 46ms

    Running "htmlmin:dist" (htmlmin) task
    Minified dist/about.html 1.86 kB → 1.51 kB
    Minified dist/archive.html 2.31 kB → 1.67 kB
    Minified dist/blog/2014/5/14/brand-new-page/index.html 2.72 kB → 2.28 kB
    Minified dist/index.html 2.04 kB → 1.68 kB
    Minified dist/page/1/index.html 2 kB → 1.64 kB

    Done, without errors.


    Execution Time (2014-05-14 05:35:46 UTC)
    loading tasks   3ms  ▇▇▇▇▇ 9%
    htmlmin:dist   31ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 89%
    Total 35ms

    Running "copy:resources" (copy) task
    Created 35 directories, copied 179 files

    Done, without errors.


    Execution Time (2014-05-14 05:35:46 UTC)
    loading tasks     2ms  ▇ 1%
    copy:resources  190ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 98%
    Total 193ms

Running "connect:preview" (connect) task
Started connect web server on http://0.0.0.0:9000

Running "watch" task
Waiting...

看起來一切正常，咱們打開http://localhost:9000/。

事情就是這麼簡單！你已經能夠在這個簡單的站點裏面轉轉了。事實上，程序已經幫你作好了這些頁面：

• 首頁 /
• 介紹頁面 /about.html
• 歸檔頁面 /archve.html
• 文章列表頁面 /page/{page}

建立新文章

如何建立新文章？

yo pencil:post "Another post"

新的文章就生成好了；打開你喜歡的Markdown編輯器開始寫做吧！

發佈到線上

一樣也是一條命令：

grunt deploy

你能夠到你以前設置的線上地址查收部署結果了。

接下來...

• 瞭解更多配置信息，例如自定義頁面等：
  
  
  • grunt-writer: 這是generator-pencil的力量來源，大部分邏輯存在於這個Grunt任務重
  • marked：這是完成Markdown向HTML轉換的重要組建。速度是它的強項。
  • build-control：這是完成GIT發佈的模塊。
• 若是你想添加Google統計、廣告，直接試試編輯src/templates/partials/footer.hbs這個模板吧，這和普通Web開發沒有什麼區別
• 若是你想從Octopress遷移你的Markdown文檔，這也是沒有壓力的，generator-pencil徹底兼容這些文檔。你須要作的就是文件拷貝工做。
• 遇到問題的話就來問我咯：
  
  
  • 提交BUG
  • 電子郵件
  • @ELFVision