JavaScript >> Javascript 文檔 >  >> Node.js

Wintersmith — Node.js 靜態站點生成器

過去的這個週末對我來說是一個非常有成效的周末,因為我已經開始工作並發布了我的書的單頁網站——rapidprototypingwithjs.com。我用 Wintersmith 來學習新東西并快速發貨。 Wintersmith 是一個 Node.js 靜態站點生成器。它的靈活性和易於開發給我留下了深刻的印象。此外,我可以堅持使用我最喜歡的工具,例如 Markdown、Jade 和 Underscore。


為什麼使用靜態站點生成器

這是一篇關於為什麼使用靜態站點生成器通常是一個好主意的好文章,靜態站點生成器簡介。它基本上歸結為幾個主要的事情:

模板

您可以使用 Jade 等模板引擎。 Jade 使用空格來構造嵌套元素,其語法類似於 Ruby on Rail 的 Haml 標記。

降價

我從我的書的介紹章節中復制了 markdown 文本,並在沒有任何修改的情況下使用它。 Wintersmith 默認帶有標記解析器。在我的舊帖子 Markdown Goodness 中詳細了解為什麼 Markdown 很棒。

簡單部署

一切都是 HTML、CSS 和 JavaScript,因此您只需使用 FTP 客戶端上傳文件,例如通過 Panic 或 Cyber​​duck 傳輸。

基本主機

由於任何靜態 Web 服務器都可以正常工作,因此不需要 Heroku 或 Nodejitsu PaaS 解決方案,甚至不需要 PHP/MySQL 託管。

性能

沒有數據庫調用,沒有服務器端 API 調用,沒有 CPU/RAM 開銷。

靈活性

Wintersmith 允許為內容和模板使用不同的插件,您甚至可以編寫自己的插件。

溫特史密斯入門

在 github.com/jnordberg/wintersmith 上有一個快速入門指南。

要全局安裝 Wintersmith,請使用 -g 和 sudo 運行 NPM:

$ sudo npm install wintersmith -g

然後運行使用默認博客模板:

$ wintersmith new <path>

或空站點:

$ wintersmith new <path> -template basic

或使用快捷方式:

$ wintersmith new <path> -T basic

與 Ruby on Rails 腳手架類似,Wintersmith 將生成一個帶有 contents 的基本骨架 和模板 文件夾。要預覽網站,請運行以下命令:

$ cd <path>
$ wintersmith preview
$ open http://localhost:8080

除了 config.json 文件之外,大部分更改都會在預覽模式下自動更新。

[旁注]

閱讀博客文章很好,但觀看視頻課程更好,因為它們更具吸引力。

許多開發人員抱怨 Node.js 上缺乏負擔得起的高質量視頻材料。觀看 YouTube 視頻會讓人分心,花 500 美元購買 Node 視頻課程很瘋狂!

去看看 Node University,它有關於 Node 的免費視頻課程:node.university。

[旁注結束]

圖片、CSS、JavaScript 和其他文件進入 contents
Wintersmith 生成器的邏輯如下:

  1. 在目錄文件夾中查找 *.md 文件,
  2. 讀取模板名稱等元數據,
  3. 處理 *.md 文件中每個元數據的 *.jade 模板。

完成靜態站點後,只需運行:

$ wintersmith build

其他靜態站點生成器

以下是其他一些 Node.js 靜態站點生成器:

  • DocPad
  • 鐵匠
  • 蘇格蘭威士忌
  • 小麥
  • 石化

有關這些靜態站點生成器的更詳細概述,請參閱基於節點的靜態站點生成器。

對於 Rails 和 PHP 等其他語言和框架,請查看 GitHub Watcher Count 的靜態站點生成器和“所有站點生成器列表之母”。


Tutorial JavaScript 教程
  1. 您可以通過多少種方式在 JavaScript 中重定向您的網頁?

  2. 建立一個更好的 Blogroll / WordPress 播客

  3. 用於導航的 LinearGradient 和 onPress

  4. 如何根據常見的子字符串模式減少和變異/更改數組的字符串條目?

  5. 使用 jQuery Select2 清除下拉列表

  6. 更好的 Heroku 體驗,使用簡單的 Express 服務器部署僅前端的 React 應用程序

  7. Reacts Hooks 可能更便攜

  1. HTML-CSS-JS 入門回購

  2. 具有條件動態導入的輕量級 Meteor 包

  3. 在可重用的 React 鉤子中優化回調

  4. 狀態機出現:當今最簡單的狀態機將改進您的代碼(1/24)

  5. 為什麼你需要給 Firefox 一個機會

  6. 如何使用 Javascript 獲取特定頁面上的所有圖像源

  7. 如何製作一種類型取決於參數

  1. React 與 Vue – 快速比較(2020 更新)

  2. 使用 JavaScript 和 CSS 的隨機梯度生成器

  3. 相同的參考與相同的價值

  4. 在 React 應用程序中讀取 CSV 文件而不安裝任何包