Do you want to create custom, standard footer and sidebar files to be served constantly and uniformly on all your web pages just like in WordPress?

Perhaps, creating a sidebar.html and footer.html is a good idea for your static HTML site. It will save you time and effort.

Here is the script. Place it before the </body> tag of every HTML pages:

First, make sure you've loaded the JQuery file in your HTML page.

<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>

<script>

$(function(){

var includes = $('[data-include]');

jQuery.each(includes, function(){

var file = '/' + $(this).data('include') + '.html';

$(this).load(file);

});

});

</script>

And here's the code to call your sidebar and footer in your HTML pages.

<div data-include="sidebar"></div>

<div data-include="footer"></div>

Then upload your sidebar.html and footer.html files to your main root directory.

Using the same method, you can also have notification bar on top of your webpage. You can edit this particular file, only when needed, and not all the pages, and it will be served uniformly on all your web pages - saving you enormous time.

Are you thinking of the 'Header' file? Sorry about that, you can't because you'll need to change the meta tag content for every article you publish. If you are not using the meta tags, then perhaps you can choose to have a header file too.

Update: You can use JavaScript to change the meta-tags of your page. I have verified that Google does index these client-side changes for the code below.

<script type='text/javascript'>
document.getElementsByTagName('meta')["keywords"].content = "My new page keywords!!";
document.getElementsByTagName('meta')["description"].content = "My new page description!!";
document.title = "My new Document Title!!";
</script>

If you find this post helpful, kindly consider sharing it on social. If you face any problem, let me know in the comment below.