I'm back to coding a small business website and it seems silly to have like 40% duplicate code (head and menu) across 10 HTML-pages. On the other hand, it also seems overkill to throw something like Next.js at such a small project.
Is there a simple way to mitigate the duplicate code by including a head.html within every page either server- or client-side?
I prefer PHP. Change your .html (static) pages into .php (dynamic) pages. Just 'save as'. You can separate pretty much anything into templates.
You have the following simplified file structure:
index.php
header.php
home.php
footer.php
style.css
The index.php contains + calls the header.php + home.php + footer.php
The header.php has your menus, etc.
the home.php can have your slider, and more sections, etc.
the footer.php has your menus + copyright, etc.
the style.css has your styles and you can have many .css files depending what you want styled.
You can expand this to your other pages: about.php, services.php, contact.php, etc.
Into index.php file you add something like
<?php require ('your-folder-for-content/header.php'); ?>
<?php require ('your-folder-for-content/home.php'); ?>
<?php require ('your-folder-for-content/footer.php'); ?>
Close </html> bracket at the end of your footer.
One page or little repeated sections call the other and redundancy is prevented.