How to template HTML code and use that across multiple HTML files?

Question

Not sure whether this is the best place for this question.

Is there a way to template a block of HTML code and then reuse it across multiple HTML files. I know you can do it with PHP include.

But what is the industry standard now? I have heard of Handlebars and Moustache. Are these the tools for this purpose?

And what is Jekyll and Middleman trying to do? What is static site generator?

Refer back to the above problem, which will solve my problem?

Answer 1

There are a number of templating engines these days that you can use. Mustache and Handlebars are both templating libraries with ports in different languages. There are a number of other templating engines: http://en.wikipedia.org/wiki/Comparison_of_web_template_engines

The library to use depends on your needs. Mustache emphasizes logic-less templates. This means that you should try and minimize the number of conditional statements (if/else) in your templates. Often, conditional if/else are used for determining what to render. Other libraries like Handlebars allow for logic. Choosing the right library will come down to the application requirements, how you want to use your templates, who will be maintaining them, and perhaps the language(s) that you are using for your application.

Jekyll, Middleman, Pelican and other static site generators use templating engines to help you generate a static site. When you write themes for these systems, you write the templates for the theme in the designated templating engine's syntax. For example, Jekyll uses the Liquid templating engine, and Pelican uses Jinja2. Static site generators started as a way to reduce the complexity of data management in blogs and websites. With some other blogging platforms, your posts and content would be stored in a database. This made migrating your work and backing it up a bit more complex, especially if you did not have in-depth technical knowledge of the blogging platform that you use. With static site generators, you can write all of your content in a text editor, using a simple file format like Markdown. To create a website, you just have to configure the system using a basic conf file, and follow the suggested project structure.

After writing your content, the static site generating system has the capability to automatically builds your website folder for you, making deployment easier. This is usually done through some kind of script/automation. All of your content is built into static .html and .css files (.js and image files as well, if you have them). This also can improve page load speed, since a static resource can be cached by the browser, and there are not as many operations on the server happening for each page request.

Using a static site generator will also help you configure how you manage content. A templating engine will be more for how you render content. Since rendering content is a subset of how you manage content, most static site generators will come packaged with a templating engine.