Syncing code on static site between multiple html pages?

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.

Adrian J. Moreno · Accepted Answer · 2020-11-18 18:03:36Z

1

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.

answered Nov 18, 2020 at 18:03

Adrian J. Moreno

14.9k1 gold badge41 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

anshul Over a year ago

If I add css classes to it, would those be able to work from the style.css called from the html file it was generated into?

Adrian J. Moreno Over a year ago

@theAnshulGupta Read the documentation on SASS: jekyllrb.com/docs/structure

Collectives™ on Stack Overflow

Syncing code on static site between multiple html pages?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related