Super Micro Tutorial
Learn Something In 2 Minutes or Less!
Oct 12th, 2017
HTML Includes
Let's say you've got a website with some stuff that you want to appear on every page - like a header or footer. Let's also say that you're hosting this site out of an Amazon S3 bucket, meaning you can't run any server side logic to build up pages dynamically (that's how this site works!). How do you set things up so that you can share HTML across all of your pages? I've seen a couple of options, but I prefer the simplicity of using pure Javascript:
Step 1: Create a Javascript file to write out your HTML:
document.write('\
<div id="header">\
<center>\
<a href="/"><img src="/assets/Logo.png" alt="Super Micro Fun"></a>\
</center>\
</div>\
);Step 2: Insert a reference to that Javascript file wherever your want it to appear on the page:
<body>
<script src="/header.js"></script>
</body>Step 3: That's it! You did it, bud! Now you've got a single place to put shared HTML and there's no need to duplicate anything :)
Note - I'm able to get away with this because my header and footer are ridiculously simple. Something more complex might get pretty ugly!