CLI package to build a static website from EJS templates
MIT License
This CLI package uses ejs to allow building a static website from modular ejs (HTML) files. The main goal is to enable a developers to create a static site in a modular way. It's also meant to be as simple as possible, while applying some best practices at build. It can also minify js & css, and encode png and jpeg files to webp on build.
Also check out the boiler plate repo which uses this package.
Install using the following commands
npm install modularize-html
Add the following lines in your package.json
under scripts
:
"create-config": "modularize-html create-config",
"dev": "modularize-html serve",
"new-page": "modularize-html new-page",
"build": "modularize-html build"
Next, run npm run create-config
. This creates the necessary config file. Ater that you can run npm run dev
, and start developing.
Build your website in a folder called src
in the root directory of your project. The page templates should go in src/pages
. Partials/components can go into any directory. Just link them in your page to use them.
There are a few configurable options for modularize-html in modularize-html-config.json
.
Boolean Minify the JavaScript files on build.
Boolean Minify the CSS files on build.
Boolean
Encode .jpg
and .png
images to .webp
on build. More info here.
String
<title>
for the index.html
file.
String
Suffix for the page <title>
. Can be empty.
Boolean
Remove .webp
<source>
tags from a <picture>
element while running the dev server. More info here.
Boolean
Send message to the browser if the link navigate to doesn't contain .html
. That means it's not linked in the html with .html
and won't work as a static site.
If you are planning on hosting the pages on a web server, you won't need to do so, because the server should resolve the url.
Object Keys in this object will be made available in your ejs template pages. This way you can pass in your own arrays and objects to the template in order to build the site from the provided data.
Boolean
To use scss while developing, set this to true. Entry file is styles.scss
.
To develop the website, this app uses a simple express server. To run the dev server enter npm run dev
in the terminal.
To create a new page use npm run new-page pagename
. Where pagename
would be the name of your page. This creates a new template with the head and tail already linked.
The page titles are based on the filenames. The only exception being index(.html), which can be set in the config. You can put a suffix behind the title, also found in the config. If you want to use a custom page title, you must add your own <head>
and not use the default head.ejs
.
While developing you can enable the options under the webp
key in the config to develop your website without having to worry about compiling images to .webp
format. This is done in the build step if encodeImages
is set to true
.
If you'd like to use .webp
images in the final build, it's recommended to use the provided image-jpg.ejs
or image-png.ejs
templates. Alternatively you can link your .webp
sources manually.
Linking to another file is the same as you would in a static html file, so link to /index.html
.
Also see the development.staticSite config option.
You can use your own css preprocessor if you so desire. Just make sure changes in your source file are being watched and compiled a css file and make sure it's linked in head.ejs, or your custom <head>
. Otherwise changes won't show up or be included in the compiled website.
You can use your own js transpiler if you so desire. Just make sure it's compiled and linked in tail.ejs, or anywhere else, before compiling the website.
If you are done you can build the website using npm run build
. This will copy the assets folder to a newly created dist
folder. It also compiles the ejs templates and creates an html file in the dist
folder.