Using SSI's to Ease Site Maintenance

Before building a site, every webmaster has to make a decision on what layout method to use. Most seem to go with either a frame or a table-based layout, the latter being more popular in these days. While both of these have their advantages and disadvantages, a frame-based site is usually easier to update. If you happen to have a 200-page site with the same navigation on every page, adding one link to the navigation menu might require you to edit all of the pages if the design is built with tables. On the other hand, if the site uses frames, you can get by with changing just a few files and save yourself a lot of time.

No, I'm not trying to convince you to switch to frames. I myself use tables and am not going to change my layout. The only problem is that over time, sites tend to grow. It just might be possible to edit around 20 pages when you want to change something, but when we start talking 50 or over one hundred, it just doesn't seem like a good idea. Unless you are prepared to spend hours trying to keep your navigation menu up to date, you have to come up with a better way of doing things.

SSI's to the Rescue

If your host supports Server Side Includes and is running Apache, you can use this article to make your table design as easy to maintain as it would be if you were using frames. The best part is that visitors won't even notice that you have changed anything. After the new system is in place, they will see exactly the same design and HTML code as before, but you will be saved from hours of monotonous work.

Server Side Includes, or SSI's, can be used in many ways. With them you can execute CGI programs, display the current date & time on your page and do plenty of other things as well. In this article, we use them for including external files to your HTML. The idea is to create a separate file from your navigation menu and use SSI's to point to it, requiring you to merely edit one file when you wish to change the navigation.

Should you have some knowledge of Server Side Includes, you might be a little worried. Doesn't this require that you rename all your pages from ".html" to ".shtml" if you want it to work? That would take a lot of time, break the links that are pointing to your site and you might have to resubmit your pages to the search engines. Is it reasonable to go through all that trouble to make maintaining your site a little easier?

Fortunately, there's no need to start renaming any files. You can simply instruct the server to treat your ".html" files as ".shtml" files and execute all SSI instructions in them. This can be done with a ".htaccess" file. If you already have one, you'll have to edit it. If you don't, open up a text editor, such as Notepad, and paste the following lines into a blank file. Be sure to replace .html with .htm, if you're using that extension.

Options Includes
AddType text/html .html
AddHandler server-parsed .html

Save the file in "All files" mode and name it ".htaccess". Include the quotes so that Notepad won't decide to name the file ".htaccess.txt".

Changing Your Pages

After the .htaccess file has been created, you'll have to make changes to your HTML files. To be on the safe side, take backups of them before doing anything. Then, paste the HTML you use to generate the menu from one of your pages into a blank file. Save the file as "navig.html" for example. Next, remove the navigation menu from all of your pages. Replace it with the following line:

<!--#include file="navig.html" -->

What you're doing is telling the server to insert the code from "navig.html" into the page. This will be done before the page is sent to the user who has requested it, so anyone visiting your site will merely see a normal HTML file. When you have finished editing your files, connect to your host via FTP and upload the ".htaccess" file, the "navig.html" file and the new versions of your content pages.

Then it is time for the true test, trying to visit your site and see what happens. If you have done everything correctly, you should see that your pages look the same as before. However, if you make a simple change to the "navig.html" file, it will apply to the navigation menu of every page. What used to take minutes or even hours can now be done in seconds, giving you the possibility to use that valuable time to do something other than changing the HTML code of each page separately.