Extract common html content to separate files for reusing

Question

I have built a website (using GitHub pages) which contains a lot of sub-pages. Almost each one of these pages contains the following same content, e.g. footer part like this:

<footer id="content-info" class="container" role="contentinfo">
    ...
</footer>

My question is: how to extract this shared same part out to a separate file for reusing? Then I can simply somehow include this file wherever I need to contain the footer part. If this is possible, I can easily edit this part once and all pages that contain it will change automatically.

Answer 1

GitHub Pages supports Jekyll, a static site generator. Jekyll uses Liquid templating under the hood. You should be able to leverage the templating even without the static site generation.

Here is more info on Jekyll: http://jekyllrb.com/docs/home/

To get Jekyll to process with GitHub Pages, you probably need to add a _config.yml file. More info on that here: http://jekyllrb.com/docs/configuration/

Then once Jekyll is processing your .html files, you can use a simple templating syntax to include content form other files.

Example:

<!-- html here -->
{% include footer.html %}
<!-- more html here -->

This will include the contents of _includes/footer.html by default. More info on template includes here: http://jekyllrb.com/docs/templates/#includes

I hope that helps!