Question

I am tasked with creating a website using only client side techs such as HTML, CSS and JavaScript. We can’t using any server-side tech because the instructor is too lazy to install anything and won’t allow us to deploy using something such as Heroku. Is there a way I can do this? In particular I want to create partials for that navigation and footer without having to copy and paste them in every single file.

Answer 1

I know of two different approaches:

1. Using Ajax

You can use ajax to do this – probably with the help of a JavaScript library or framework.

JQuery’s load can do things like $('#header').load('header-partial.html');

If you’re building something more complex with a lot of views, etc… I’d consider using a MV* javascript framework like Backbone.js or AngularJS.

Check out the AngularJS seed project on GitHub for an example

2. Using a build script

If your site is simple enough that all you want to do is include a header and footer on each page, you should consider doing this as a build step in your deployment process. I.E. complile your html with the partials locally, and upload full pages, with the header/footer code on every html page.

This approach has the benefit of not breaking your site if js is disabled.

For an example, check out html5boilerplate’s ant build script