Update Your Site Using Server Side Includes - SSI

Update Your Site Instantly with SSI
Copyright © Les Goss 2003

Summary: In a large site, updating identical information (such as the copyright date) on every page is a time-consuming task. Make short work of it using Server Side Includes (SSIs).

Update Your Site Instantly Using SSI

There are probably two main ways you currently update your site. The first, and most important, is adding new content. Whether you are updating a calendar, adding a new page, or putting in a photo of a new product, you are enhancing the value of your site for your visitors.

The second, and more time-consuming changes are those that are made to every page of your site. These might include copyright dates, contact information, the date and time, or navigation links. If you have a large site, changing just your company phone number on every page can be a time-intensive, boring job.

Modern web development tools such as Macromedia's Dreamweaver offer a template feature that allows your web designer to change one section of a single page (say the contact info) and have the software automatically change all the pages that were made from that template. Those changed pages are still on the designer's computer, however, and must be uploaded to your server one page at a time. Depending on the number and size of the pages, and the speed of your designer's modem, updating a site this way can take awhile.

A simpler and faster method uses something called Server Side Includes (SSI). We'll use the example of updating your contact information, which is currently found at the bottom of every page of your site.

Here's How It's Done
Your designer originally creates a new page that only contains your contact information. This page is saved as a regular HTML page.

Next, the designer decides where on each page of your site to place the contact info. In that spot, instead of typing in your address, phone number and email, he places a single line of code that might look something like
< !--#include virtual="../includes/newsSSI.html"-->.

This code tells the server to take whatever is on the SSI page and place it in this location.

Each page is then saved with the .shtml suffix instead of the plain .html ending. For instance, the URL of your home page might be www.yourcompany.com/index.shtml. This tells the server that hosts your web site that this page has a Server Side Include in it which must be dealt with before the page is sent back to the visitor. Every time this page is called, the server will check the SSI page and load its content into the designated area of the web page.

How This Saves Time
Once the system is in place, updating every page of a large site is a two-step operation. The SSI page is changed (perhaps the phone number) and that one page is uploaded to the server. That's it! Now every page with a dot shtml ending will show the change instantly, without the entire site having to be uploaded to the server.

I use this on my site every time I add a new article. At the top of each page is a pointer to my SSI page. On that page it just says, "This week's article is..." with the article name and a link to it. Every time I add a new article to the site I just change the title and link on the SSI page and upload it to the server. Instantly, every page on the site has the new article name and link.

Probably the most common use of SSI is to automatically post the current date and time. Just insert the code < !--#echo var="DATE_LOCAL" --> where you want the date and time to appear and the server will take care of the rest.

Conclusion
If you have a relatively small site, you probably don't need to use SSIs, but as your site grows, these little snippets of code can save your designer a considerable amount of time, which should save you a corresponding amount of money.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

For all your web design needs, or to join our mailing list, visit ZebraMoon Web Design . To catch up on the articles you may have missed, please come to our article archives http://www.zmoon.com/webdesigntips.html                 


Return to Beginning HTML Tutorial Index


Free Text to HTML Converter for Web Publishing