/suo

node-based static website generator that uses a JSON data source and Handlebars templating

Primary LanguageJavaScriptOtherNOASSERTION

suo

suō Latin /ˈsu.oː/ Verb 1. I sew, stitch. 2. I join, fasten together. 3 (figuratively) I devise, cobble.

suo sews together your JSON data with handlebars templates to generate a static website.

Usage: node suo.js

Alternate usage: node suo.js someotherdatafile.json

This is still very alpha.

FAQ:

  • Q: isn't there already a million static website generators that do this same thing? A: First of all "aren't there", and yes, I just wanted to do something similar to jekyll-perf and I also wanted to play around with node

How it works:

Files & folders:

  • files: this folder includes all static and binary files of the site: images, css/scss, js, etc
  • f: any font binaries go here
  • i: any images go here
  • j: any javascript files go here, currently, main.js is the only file that will be compressed by uglify
  • s: any stylesheets go here, css or scss, compass and its dependent binaries should be installed separately
  • node_modules: this folder is generated by node when the required modules are imported by npm
  • templates: this is where all the handlebars templates for content are
  • www: the destination folder where all files will be placed
  • .gitignore: standard git ignore file
  • data.json: this is the JSON source of all data for the site
  • LICENSE: MIT license file
  • package.json: node js package file
  • README.md: standard readme
  • suo.js: the code to be executed

npm list:

suo@0.0.1
├── adm-zip@0.4.4
├── async@0.2.10
├─┬ fs.extra@1.2.1
│ ├─┬ fs-extra@0.6.4
│ │ ├── jsonfile@1.0.1
│ │ ├── ncp@0.4.2
│ │ └── rimraf@2.2.6
│ ├── mkdirp@0.3.5
│ └─┬ walk@2.2.1
│   └─┬ forEachAsync@2.2.1
│     └── sequence@2.2.1
├─┬ handlebars@2.0.0-alpha.2
│ ├─┬ optimist@0.3.7
│ │ └── wordwrap@0.0.2
│ └─┬ uglify-js@2.3.6
│   └─┬ source-map@0.1.33
│     └── amdefine@0.1.0
├── html-minifier@0.5.6
├── moment@2.6.0
├── node-json-minify@0.1.3-a
└─┬ uglify-js@2.4.13
	├─┬ optimist@0.3.7
	│ └── wordwrap@0.0.2
	├─┬ source-map@0.1.33
	│ └── amdefine@0.1.0
	└── uglify-to-browserify@1.0.2

Order of operation:

  1. there are a few config settings at the top of suo.js, if the paths in the files directory have changed then they need to be updated
  2. if files exist in the destination folder (www), they are archived
  3. if files exist in the destination folder, they are deleted
  4. if the destination folder doesn't exist it is created
  5. assets are copied from the source folder (files)
  6. css/scss and js files are versioned and renamed based on their date modified
  7. the json data is parsed
  8. helper functions for handlebars are registered: 1. moment: date/time helper that uses moment js 2. startsWith: boolean string function 3. equals: boolean string function 4. coalesce: inspired by SQL COALESCE, returns first non-null value 5. static: references the static files processed and returns the correct path/name 6. gravatar: returns gravatar hash for a given string
  9. handlebars templates from json data are processed
  10. pages from json data are processed
  11. list pages are processed: post archive, categories, rss/atom, home, manifest, sitemap
  12. the sitemap.xml file is gzipped
  13. time elapsed is displayed

TODOs:

  • so many callbacks
  • not generic enough
  • so many refactorings
  • include optional image compression?
  • enable a dev mode for debugging css & js

Example site using suo: http://dieseltravis.github.io/