HTML+

Build Static Pages

Building a static site simply means you are compiling all your files into a final version that will work in any browser with or without the need to setup a production server.

Using the build function

HTML+ exposes the build function which is an asynchronous function that does not return anything but will handle your files.

The below example simply reads all file from the specified source directory in srcDir option, compiles and place everything inside the destination directory specified in the destDir option.

const {build} = require("@beforesemicolon/html-plus");

build({
	srcDir: path.resolve(__dirname, './pages'),
	destDir: path.resolve(__dirname, '../public'),
})
	.then(() => {
		console.log('done');
	})

Other Options

The build function takes couple of options similar to the engine function.

It also uses the hp.config.js file if available to grab details to build your project. This allows you to share configuration between development and production mode.

They actually are things that your pages will need to function like the staticData, customTags and customAttributes

const {build} = require("@beforesemicolon/html-plus");
const CodeSnippet = require("./tags/code-snippet.js");
const Wrapper = require("./attributes/wrapper.js");

build({
	srcDir: path.resolve(__dirname, './pages'),
	destDir: path.resolve(__dirname, '../public'),
	staticData: {
		title: 'Before Semicolon'
	},
	customTags: [CodeSnippet],
	customAttributes: [Wrapper]
})
	.then(() => {
		console.log('done');
	})

Dynamic context

There may be data that you need to pass to a specific page only. When you use the engine it gives you the option to pass context data based on the page requested by using the onPageRequest option which gets called with the express request object and must return a object containing the data.

The build function has a similar option called contextDataProvider which is a function that gets called with a object containing the absolute path to the page and the route path it corresponds to and must return a object containing the data to pass to the page on build.

const {build} = require("@beforesemicolon/html-plus");
const path = require("path");

build({
	srcDir: path.resolve(__dirname, './pages'),
	destDir: path.resolve(__dirname, '../public'),
	contextDataProvider: page => {
		return {path: page.path, fileName: path.basename(page.file)};
	}
}).then(() => {
	console.log('done');
})

This dynamic data injection into your pages bases on what they are does not take care of when you reuse templates for different data set. To handle same template and different pages case you need to check how to build by data on next page.