-1

I'm creating a website using GitHub Pages and I want to put the header and footer into separate documents to then link to them on each page I make. GitHub pages only supports static websites, so I can't use PHP or anything like that. I'm trying to use the advice I found on:

Make header and footer files to be included in multiple html pages

https://www.youtube.com/watch?v=rDFxEALe0JA&ab_channel=JoseMartinez

https://www.quora.com/How-do-I-include-a-header-and-footer-file-in-every-HTML-page-we-are-designing

which uses jQuery but it's just not working for me. Can someone tell me where I'm going wrong?

My file hierarchy:

- index.html
- html
    - header.html
    - footer.html
    - otherfiles.html
- css
    - header.css
    - footer.css
    - otherfiles.css

this is in the index.html file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script> 
$(function() {
  $("#header").load("html/header.html"); 
  $("#footer").load("html/footer.html"); 
});
</script>


</head>

<body>

<!-- Header-->
<div id="header"></div>
 
<!--main section-->

<!-- Footer -->
<div id="footer"></div>

And I put this in footer.html and header.html body:

<body>
<a href="http://www.google.com">click here for google</a>

This is from what I can tell, what I'm meant to do, but it's not working at all. Just no header or footer appears on my website.

Rosie
  • 1
  • 2
  • Possible dupe: https://stackoverflow.com/q/22326742/519413. I won't VTC as this may be an outdated answer now – Rory McCrossan May 17 '22 at 14:06
  • That post looks like a general inquiry. I'm wanting a solution to the jQuery code. I'm not sure how to use Jekyll but it looks like I have to build an entire website with it? Not sure how to convert my website to a Jekyll website, and it seems like a lot when I already have a website and all I want to do is add the same footer to every page. I might just end up copy pasting it, I've been trying to find a solution for days I feel like I'm going insane – Rosie May 17 '22 at 22:03

1 Answers1

-1

possibly look into using an iframe object to reference the page, theres an example on the last link you posted (one of the comments)

OR try removing header/footer files from the html folder and put them in the same directory as index.html, to eliminate the possibility that its the file reference that is the issue.

OR look into using the handlebars.js library. this library can be used to implement an MVC layout (basically files are referenced by a home controller to display content). And it will work with GithubPages, I've done it before.

hopefully this helps a little, at the very least pointing you in the right direction.

ChrisKramer15
  • 1