Best way to partition repetitive static html?

#askdev

I want to make multiple pages for a site, and they all have common header and footer segments. What is the best way to write this code so I won't have to make the same change across multiple html files?

I guess the modern approach is to go with React-router, declaring the repeated header and footer as components and then using something like Gatsby to render it server side.

I also came across handlebars.js which appears to be what I'm looking for, but I want to choose a method with the most minimal initial setup, or at least an environment that is easy to reproduce.

Top comments (3)

Lucas Bersier • Dec 3 '18 • Edited

If you don't plan on making the content dynamic, you should look into a html compiler, such as Pug. You can use includes and build your HTML once locally.

pugjs.org/language/includes.html

head.pug

meta(charset="utf-8")
meta(http-equiv="x-ua-compatible" content="ie=edge")
meta(name="description" content="This meta tag will be on all pages")
meta(name="viewport" content="width=device-width,initial-scale=1")
meta(name="title" content="Hello world")
title Hello world
link(inline rel="stylesheet" href="src/style/style.css")

(every other file)

doctype html
html(lang="en")
    head
         include head.pug

Pranith Hengavalli • Dec 3 '18

But wouldn't this require a rewrite of all my code to be in the pug syntax?
I worry that this could become less popular in the future and I would eventually have to port it again. Is this different from creating a react component in terms of how opinionated the syntax is?

Lucas Bersier • Dec 3 '18

React is a javascript framework, and you (might) have to convert your current code to JSX or an alternative. It tells the end-user what the DOM tree is supposed to look like and then the user parses it.

Pug is a template engine, so you would write your code on your machine and it would print out html files that you distribute.

You're right that this could be less popular in the future, but I would also argue that since it's a development tool that you would use and not something that is dependent on the client this is less of an issue.

Handlebars.js and Pug are both template engines and you should not require the user to compile or parse your templates, this will increase runtime. (handlebarsjs.com/precompilation.html)

In the end, these are all tools, and you could use either or use React, it's all about choice. You might start a simple little ToDo app or a codepen.io to test out these things before committing to one.

DEV Community

Best way to partition repetitive static html?

Top comments (3)

head.pug

(every other file)

Read next

Comparative Benchmarking: ILP, A*, and Branch and Bound Algorithms in High-Throughput Scenarios

Kong Admin API for PHP: A Framework-Agnostic Client for Seamless Kong Gateway Management

Setting Up ESLint 9.13.0 with Prettier, TypeScript, Vue.js, and VSCode Autosave Autoformat

Loop haqida