A simple static HTML templating engine.
Why?
While working on my personal website, which is just static HTML and CSS, I realised I would need some very basic templating system. I didn't want to clutter the project with too powerful or overly-complicated engines, just to repeat my footer and header in all the pages of the website.
So I wrote this.
NOTE: This is intended as an experiment and nothing more.
Install
npm install -g boxedjs
Create a new project
You can create a project manually or with the project starter option:
boxed create [project-template] [project-name]in the folder where you want to start a new project.
The available templates are simple-website and simple-blog.
Project structure
The script needs to be run in the root folder of the project and it expects the following project structure:
/
├── src/
├── assets/
├── pages/
├── templates/
├── .boxedrc
where the content of the folders is the following:
src/assets: contains all the styling files, images and other files but html.src/pages: contains the pages of your websitesrc/templates: contains the templates used inside thepages
.boxedrc
This file contains the configuration for the project. By default it has the following content:
Feel free to customise it to suit your project structure better.
How to use the templates in a page
Whenever you want to use one of the templates in one of the pages you can require them like the following:
<!-- src/pages/index.html --> My templated website [[header]] <!-- Template src/templates/header.html --> Occaecat eu occaecat cupidatat et in dolore ullamco do dolore laboris magna deserunt in fugiat aute irure occaecat veniam tempor fugiat qui cillum ad aliquip dolore labore pariatur ut dolore est sit minim amet irure. [[footer]] <!-- Template src/templates/footer.html --> The code above, will result in a page called index.html which will contain the injected content of the templates.
How to create pages and apply templates to them
While the approach above can be enough if you want to build simple, and unique pages, what about more complex cases like a blog post?
Boxedjs allows you to specify pages in different formats (json or yaml) which contains information about a page, which will be then applied to a specific template. To follow the blog example, you could try to create a page like the following:
src/pages/blog-post-1.json
and then the template which will be applied to this page:
src/templates/post.html
Hello Human! This is a blog post [[[ title ]]] [[[ author ]]] - [[[ date ]]] [[[ content ]]] Boxedjs will generate a page called dist/post-1/index.html.
You can find more specific examples in the example folder.
Export
Once you finished writing your HTML, you can just run:
cd root_of_projectboxedThe website will be exported in the dist/ folder.
Watch
You can run boxedjs specifying the option -w or --watch.
This will watch the full folder and will build a new version whenever there is a new change.
Examples
The folder examples of this repository contains the output of the two project templates simple-website and simple-blog.