What is the best way to manage duplicate code in static HTML websites

Question

I am managing a legacy website with a lot of static HTML websites, no server side scripting, just plain HTML/CSS, minimal javascript. I found it a huge waste of time to change the same piece of code numerous times in different pages. For example, when something in the menu changes, since the menu is just static text in each document, I have to make the same change numerous times.

I was wondering what the best tactic would be to minimize this overhead, in other words what would you recommend for managing things like navigation code across multiple static HTML pages.

I know you can use:

1. server side scripting (like PHP), but there is no other reason to use scripting at that particular site.
2. frames (but that's bad because its.. well, frames :))
3. server side includes (that seems like it could lead to trouble when changing the server)
4. javascript (bad for SEO)

What would you recommend?

Thanks.

Answer 1

You can use a static site generator. I recommend jekyll.

Answer 2

Out of all the possibilities, both what you listed and anything else I know of, I'd still just run with a simple PHP-based solution. It's easy and clean, requiring next to no effort on your part. I do this with all the small sites I design.

Most often, you end up with fairly trivial structure. You write up a full page, then for each subsequent page you're just changing the bit in the middle where the content lives. In that case, just take everything above and below the content and save it in header.php and footer.php files, then put <?php require_once "header.php"; ?> at the top of each content file (and similarly with the footer file). Done!

This does have some minor disadvantages. For one, you're depending on scripting, but PHP is the most widely deployed server-side language in the world, so that's not really an issue. You don't even care if it's PHP4 or PHP5, since you're not doing anything fancy.

For two, you're running a script on every page load, in order to serve what is essentially a static file. That slows down your responses, and stresses the CPU unnecessarily. This probably doesn't matter much (the lag is very minor), but if you find it wasteful, there are some good PHP frameworks which will take your PHP-generated pages and generate static htmls out of them for you. (This is easy enough to do yourself, too, with just a bit of work using output buffering.) This way you get the best of both worlds - PHP templates (and the full PHP language if you end up wanting something fancier down the line) but static html pages for minimal CPU activity and fastest page load times.

Answer 3

If you are set on maintaining a static site, I would recommend using a static site generator.

One I have used in the past is webgen

From the webgen page:

The page layout is separated from the content: if you change the layout, all pages that use that layout are automatically updated. You can have any number of different layouts and even nested ones.

Write content in a markup language: The content and layout files can be written in a markup language like Markdown, Textile or Haml which lets you concentrate more on what you write.

Automation: webgen can automatically generate, for example, menus and breadcrumb trails for you.

Dynamic content: It is easy to add some dynamic content if there is a need for it.

Answer 4

You could preprocess your website with PHP and then just upload the generated static HTML files.