static-generator
static-generator copied to clipboard
jaschaephraim
Minimal static website generator and development environment using Node.js, built specifically for jaschaephraim.com
Minimal Static Website Generator and Development Environment
Built specifically to manage jaschaephraim.com, and explained in detail in this article on medium.com.
- CLI
- stat-gen new
- stat-gen start
- stat-gen export
- Project Structure
- jade/index.jade
- styl/app.styl
- js/app.js
- static/
- content/
- tags/
CLI
stat-gen new new-project-dir
Creates new project template.
stat-gen [start project-dir]
Starts development environment. Compiles everything (without writing to files), starts watcher and server.
stat-gen export [project-dir] new-export-dir
Exports project to a static site with the structure:
[project-root]/
├──app.min.css
├──app.min.js
├──┬fonts/
│ ├──[font-one/]
│ └──[font-two/]
├──┬img/
│ ├──[image-one.jpg]
│ └──[image-two.png]
└──index.html
Project Structure
jade/index.jade
Exports to index.html.
styl/app.styl
Exports to app.min.css.
js/app.js
Exports to app.min.js. Can include CommonJS style require(), and you can require anything in bower_components/ by its package name.
static/
Contents copied recursively to / upon export. For images, fonts, etc.
content/
Each Markdown file in content/ represents an individual piece of content. Metadata can be included in YAML front matter, and will be available to Jade templates. The compiled markdown (which should not be html-escaped) itself is stored in the property body.
tags/
Similar to content/, each Markdown file represents a tag. Each file should define at least a content list in its YAML, listing the file names (without .md extension) that are included in the tag.
Example:
content/chihuaha.md:
---
title: Chihuahua
---
Chihuahuas are the best.
tags/dogs.md:
---
title: Dogs
content:
- chihuaha
---
I like dogs!
jade/index.jade:
doctype html
html
head
title= tags.dogs.title
body
h1= tags.dogs.title
div!= tags.dogs.body
each dog in tags.dogs.content
h2= content[dog].title
div!= content[dog].body
Will render to index.html as:
<!DOCTYPE html>
<html>
<head>
<title>Dogs</title>
</head>
<body>
<h1>Dogs</h1>
<div>
<p>I like dogs!</p>
</div>
<h2>Chihuahua</h2>
<div>
<p>Chihuahuas are the best.</p>
</div>
</body>
</html>
Metadata
Owner
jaschaephraim
Metadata
Minimal static website generator and development environment using Node.js, built specifically for jaschaephraim.com