What is SSI?

SSI actually covers a number of features to improve your website. I am going to speak here of just one critical improvement, referred to as an “include” file.

Essentially, an “include” file is a separate file that your web page can include as if it was part of the page file. Let’s take a real-life example. My site at http://www.vitamin-supplements-store.net uses SSI in a number of places.

If you are used to using FrontPage or have recently learned HTML, you probably assume that every web page is a single html file. The example above is actually five files. There is the main HTML file for the page. There is a style sheet (CSS) and there are three SSI “include” files — one for the left navigation menu and two for the two navigation menus across the bottom. I could have, perhaps even should have, used more “include” files, but you can be the judge when you’ve finished reading this article.

Why use SSI??

SSI makes it easy to bring changes to your website. There are some changes you will need to make to every page or to every page in a specific section. Your website might start out with just 10 pages, and you might figure that it is no big deal to cut-and-paste a change to the navigation menu 10 times.

But each time you add a page, you have to update that menu. And with each new page added, you have to paste one more time. When you reach 50 pages (Never thought your website would grow that big? You’re not alone.) it becomes very tedious to update.

For instance, when I wanted to add the website monitoring logo and the link to the navigation menu at http://www.thehappyguy.com, I had to change just one file, and — presto! — the change appeared on every page of the site bearing that navigation menu. It was so very much easier than past updates before I began using SSI.

There are two other benefits to SSI “include” files. Because a single line of code replaces what might have been several dozen in each HTML file, your files are much smaller, taking less space on your server. And, because the “include” file has already been loaded with the first page a visitor sees, the next page is much quicker for visitors to load.

How to set up SSI??

You need three things to set up SSI.

1. Configure your server for SSI
2. Set up your “include” file
3. Call up your “include” file into your web page HTML file

First, you need your server configured for SSI. Ask your web host if this has already been done. Also ask if it has been set up to parse .html extensions to read SSI.

If your server has been set up for SSI, you are one step closer. If it has also been set up to parse .html extensions to read SSI, you are two steps closer.

Not all hosts support SSI, but most do. If yours does, but it has not been set up for your account, look for the .htaccess file in your root directory (where your index.html or home page file is stored). In my experience, this is not usually viewable using an FTP process; you have to find it through your control panel.

The .htaccess file is a text file. If you do not already have an .htaccess file on your server, you can create one in NotePad or even in Word (just save it with a .txt extension), but whatever you do, make sure not to write over a .htaccess file already on your server. If it is already there, just add the following lines to the file, being careful not to erase anything that is already there:

AddType text/html .shtml
AddHandler server-parsed .shtml
Options Indexes FollowSymLinks Includes

So far, so good. But this will recognize only .shtml files for includes, and you probably don’t want to change the .html extensions to .shtml on all your pages, if for no other reason because it will mess up all your inbound links to those pages.

So add this line. In theory, it should be the second line, but careless me has gotten it to work at the end, too:

AddHandler server-parsed .html

Save the edited .htaccess file to the root directory of your server.

As an aside, there are several ways to configure your server for SSI. This one has worked for me across several hosts.

So much for the techie stuff, now you need the second element: the “include” file itself. Suppose your “include” file is the navigation menu. You don’t need “head” and “title” and “body” tags. Just type in your text and code just the way it would appear in your webpage. It’s that simple. Save it as an HTML file, and load it to your route directory or to its own directory.

All you need now, is to call up your navigation menu in each file you want it to appear in. To do this, a simple line suffices where a whole column of code and text once stood.

Here is the line to place in your code:?

This assumes that nav1.html is the name of the “include” file and that it is in the same directory as the page it is being inserted into. If you place the file into a directory called “nav”, you would have to include code like this in your web page file:

Hope above information will helpful for you.