Your Location is: Home > Github-pages

Syncing code on static site between multiple html pages?

From: Kathmandu View: 3050 theAnshulGupta 

Question

I have a large website with several consistent text, like the nav, contact, footer, etc. I was wondering how I could keep all of these consistent on my static website (hosted on github pages) by loading the code from another file or any other method, since currently I have to manually update everything and it takes a while.

Best answer

Github pages uses Jekyll as the underlying static site generator. You can break down your site into multiple smaller html pages that can be included into a main layout.

https://jekyllrb.com/docs/includes/

The include tag allows you to include the content from another file stored in the _includes folder:

{% include footer.html %}

Jekyll will look for the referenced file (in this case, footer.html) in the _includes directory at the root of your source directory and insert its contents.

Read the documentation on this and you can easily find repeated text/html and replace them with includes.

If you're not already, this site has instructions so you can run jekyll locally to verify changes before pushing the changes to Github.