Rebuilding my blog in JavaScript

For fun and undefined

Published May 7, 2023 — 2 minute read

I’m rebuilding my blog with 11ty and writing the templates in JavaScript to get a better grasp of the language. This project is unlikely to see the light of day, but I’m excited that I got a build to succeed with all 212 pages!

One issue I had was assuming 11ty used ES modules. 11ty uses CommonJS modules, which are synchronous, and the syntax is not as intuitive. There’s a solution that depends on an abandoned NPM package, but that wasn’t something I wanted to hang the entire build on. I had to rewrite my imports using Node’s require() method, and exports using module.exports.

I’ve been following Reuben Lillie’s well-documented setup thanks to a tip from Bryce Wray.

While I haven’t gotten into the more complicated stuff, like pagination or image optimization, after hours of fighting errors, I am surprised at how little JavaScript I needed for a base layout. The majority of the file is HTML.

Here’s my base layout, where I’m returning HTML with template literals (${foo}):

module.exports = function render(data) {
	return `<!-- _includes/layouts/base.11ty.js -->
		<!DOCTYPE html>
		<html lang="en">
			<head>
				<meta charset="UTF-8" />
				<meta http-equiv="X-UA-Compatible" content="IE=edge" />
				<meta name="viewport" content="width=device-width, initial-scale=1.0" />
				<meta name="generator" content="${data.eleventy.generator}" />
				<title>${data.title} | ${data.metadata.title}</title>
			</head>
			<body>
				${data.content}
			</body>
		</html>
	`;
};

I’m doing the same with pages, and setting the page title and layout:

class Page {
	data() {
		return {
			title: "Home",
			layout: "layouts/base.11ty.js",
		};
	}
	render(data) {
		return `<!-- content/index.11ty.js -->
			<main>
				<h1>${data.title}</h1>
			</main> `;
	}
}

module.exports = Page;

It’s recommended to use the full file name of the layout, otherwise 11ty will spend extra time cycling through file extensions.

Just wanted to share my progress! I’ll post more updates if the momentum continues.