Server side includes alternative

问题

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.

回答1:

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:

回答2:

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.

回答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.

回答4:

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.