A simple static HTML templating engine.
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.
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
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 website
src/templates: contains the templates used inside the
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:
and then the template which will be applied to this page:
Hello Human! This is a blog post[[[ title ]]][[[ author ]]] - [[[ date ]]][[[ content ]]]
Boxedjs will generate a page called
You can find more specific examples in the example folder.
Once you finished writing your HTML, you can just run:
The website will be exported in the
You can run boxedjs specifying the option
This will watch the full folder and will build a new version whenever there is a new change.
examples of this repository contains the output of the two project templates