Working outside the bounds of a modern backend server or frontend stack isn't without its limitations -- you've often got to be creative if you'd like to avoid a lot of duplication and you've got to be careful with how you load your content.
To avoid rendering an unstyled page, make sure you preload your CSS!
<link rel="preload" as="style" href="/layout/layout.css">
<link rel="stylesheet" href="/layout/layout.css">
To avoid duplicating my header and footer on every page, I've put together a simple loading script that sandwiches layout content around your page content.
document.addEventListener('DOMContentLoaded', function() {
const headerPromise = fetch('/layout/header.html').then(file => {
file.text().then(content => {
document.body.insertAdjacentHTML('afterbegin', content)
})
})
const footerPromise = fetch('/layout/footer.html').then(file => {
file.text().then(content => {
document.body.insertAdjacentHTML('beforeend', content)
})
})
Promise.all([headerPromise, footerPromise]).then(function() {
document.body.style.opacity = '1'
})
})
You'll note that I'm waiting for the header and footer to load in prior to setting the page opacity. I'm defaulting the page body to fully tranparent until my layout has been inserted.
Super simple and it even mostly works. Absolutely not how you'd do it for anything other than a pet project.