12

I have a static site hosted on GitHub Pages which is starting to grow in size. Normally I would use server side includes (<?php include('path to file'); ?>) to bring in header, footer and any navigation files. However php doesn't run on GitHub Pages.

Is HTML5 embedding which adopts a sort of iFrame technique my only option here?

I have seen threads such as this, this, this, this however they do not seem to apply for GitHub pages.

Not really ideal.

Thanks.

Community
  • 1
  • 1
user3406225
  • 121
  • 1
  • 1
  • 3

7 Answers7

15

Jekyll is a common solution for this. It is a static site generator that allows you to use Liquid templates, and is made to run on GitHub's servers.

A great example of the {% include %} feature can be seen on the documentation pages from Twitter Bootstrap, which make use of includes for header.html and footer.html:

enter image description here

nicksuch
  • 1,544
  • 11
  • 11
  • Is there a way you use that syntax without using a theme? I am porting a site to github pages; it already its own style. I just need the includes to work. – user664303 Oct 16 '21 at 13:40
5

Use templates and preprocess them at build time (as opposed to run time). You could set them up to build as a git commit hook.

There are a lot of tools for doing this listed here, I'm fond of ttree.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
3

I know this is a late answer, but here's something I stumbled on recently.
Turns out that the guys over at http://w3schools.com/ created some simple JavaScript code as an alternative to SSI:

<!DOCTYPE html>
<html>
<script>
function w3IncludeHTML() {
  var z, i, a, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    if (z[i].getAttribute("w3-include-html")) {
      a = z[i].cloneNode(false);
      file = z[i].getAttribute("w3-include-html");
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          a.removeAttribute("w3-include-html");
          a.innerHTML = xhttp.responseText;

          z[i].parentNode.replaceChild(a, z[i]);
          w3IncludeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}
</script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>

Here's an example.

undo
  • 257
  • 3
  • 19
  • 1
    @PatMyron Glad to see that someone finds it useful! – undo Mar 07 '17 at 07:18
  • It does not support css styles so basically this is not a solution. Anything inside of the content.html does not get styled. So, no working navigation etc. – Joshua Robison Jul 16 '22 at 14:18
0

I wrote two bashscripts that does what you are looking for (same reason you are askimg actually). Right now it is extremly basic, but it may be helpful for you. Documentation is nonexistamt, but should be easy to figure out and make work for your site.

https://gitlab.com/frc-team-8733/website/-/tree/master/tools

Minecraftchest1
  • 96
  • 2
  • 8
-2

I made a video about how to Import custom HTML templates using AJAX. It will run the script tags in the imported HTML without using eval(), and the script tag you use to make the import call will replace itself with the imported code, so there's no nesting in divs. It's basically a really clean AJAX site builder. Here's the link: https://www.youtube.com/watch?v=ZqD61tIoG2s&t=18s&index=1&list=PLRJ8uW8FBcZJMiFbPNG67lsFHhFF1k322

The source code can be found in the video description.

Frank
  • 2,050
  • 6
  • 22
  • 40
-2

jQuery load() works well for this.

Kieran Mathieson
  • 27
  • 2
-5

SSI should be supported!

<!--#include virtual="layout.html" -->

The file that contains the above line must end with ".shtml" or ".shtm" extensions!

User
  • 71
  • 1
  • 7