Menu
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.
734
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:
161
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.
30
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.
5
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
