Pink Lemonade/Sans Static Site Generator
An HTML and CSS boilerplate project. This is also a learning exercise in creating a static site generator, allowing for markdown usage and frontmatter use in pages.
There are a lot of static site generators out there that I could've learned but I was already using Nunjucks as a templating engine and decided to see how I could build on that.
What is frontmatter?
Frontmatter is the data at the front/top of your document. It is typically enclosed between two lines with 3 dashes. It can be extracted from the document and into a file-based data format for usage (e.g. JSON or YAML).
How to use
Don't run any of these commands without actually having files in the
templates directory or you'll probably get an error. See recommended directory structure below.
Nunjucks Template Structure
- Layouts: Stores my layouts. Acceptable file extensions are
- Pages: Stores pages that inherit the layouts defined by the files in
layouts. Acceptable file extensions are
- Partials: Stores reusable code that can be included in pages and layouts. Acceptable file extensions are
- Posts: Stores my posts which are all written in Markdown and with frontmatter at the top. Only acceptable file extension is
For more on Nunjucks, check this out: https://mozilla.github.io/nunjucks/templating.html
gulp: will spin up the server and render your nunjucks files from the
builddirectory. You'll be able to actively develop with this instance. CSS and markup changes will be reflected instantly.
gulp posts: renders posts written in markdown into a nunjucks template that is then rendered to html
gulp nunjucks: renders nunjucks pages to html
gulp build: just compiles nunjucks, posts, and copies js and css files into the
gulp clean:build: will delete all the files in the
builddirectory but keep the directory. This directory is gitignored
Tasks to prep/test for production
gulp clean:prod: will delete the
distdirectory and its files.
gulp copy: copies files from the
gulp preview: copies files from the
distand gives you a browser-sync instance to preview
gulp package: just copies files from the
gulp clean: deletes the
distdirectory and its files and deletes the files in
These tasks are used just for copying files at the moment:
Recommended directory Structure
├── build (required!) ├── node_modules └── src ├── css ├── data ├── img ├── js ├── scss └── templates ├── layouts ├── pages ├── partial └── posts