Server Side Includes

Learn how SSI Technology can Ease Your Web Site Maintenance

You have built a 10 page website. You decide to change a copyright date on all pages. Of course, it’s not a big hassle to modify 10 files. But what if your site grows to 100 or 1000 web pages? It’s going to be a real pain trying to maintain your site. So what’s the solution? Server side includes can help you in this situation.

What is Server Side Include Technology?

SSI’s are directives that can be placed in HTML documents to execute programs or output particular data. When the server reads a document, it looks for server side include directives. If your server finds them, then it performs necessary actions.

One of the most useful and widely known benefits of using server side includes is the ability to include other files into static HTML documents. For instance, you can put your company’s logo into a text file and call that file from all your HTML documents. In this case, whenever you decide to change a name of your logo image, you don’t have to change every single file in your web site. You just have to alter one single text file. That’s it.

Imagine having a navigation menu on all your web pages. Now you just open one text file (include) and add another link to the navigation panel and it’s done. You don’t have to upload all your web pages to the server again. You just need to upload one include file and all your HTML documents will change accordingly.

Setting Up SSI on Your Server

Setting up server side includes isn’t very hard as you may think. Assuming that your website is hosted on a shared server, the steps to set up SSI’s are as follows:

1. Using any FTP program, connect to your server. Go to your root folder, where all your web files are stored (it’s usually named /public_html/, but may be named differently). You should see one of the following files:
   .htaccess or httpd.conf (usually in /etc/httpd/ directory). We’ll be working with .htaccess file, but the same works on http.conf file.

2. Now open any text editor (Notepad should work perfectly) and insert the following lines:

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

3. Save the file as .htaccess and upload it to your server’s root directory.

That’s it. Now SSI’s are enabled on your server. However keep in mind that all your web pages should have the file extension .shtml. You have to use .shtml so that your server knows what kind of files contains SSI commands and treats them accordingly.

Ok. Server side includes are relatively easy to set up and use on your server. Then why not so many websites are using SSIs? Why did you see so few web sites using .shtml file extension instead of usual .html or .htm? It’s because there’s a way to hide .shtml ending and show .html to your visitors.

Parsing HTML Documents for Server Side Includes

There may be many reasons why you’d like to have .html instead of .shtml file extension. Let’s say you just don’t want to confuse visitors with not usual filename ending. Solution is very simple.

All you have to do is alter the .htaccess file. Remember those lines (Options +Includes; AddType text/html .shtml…) that you’ve added? Now simply change .shtml to .html so that your .htaccess file looks like this:

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

This tells the server to “parse” every single file that has the .html file extension. If your web pages have the .htm ending, then add .htm. If you’re using any other programming language, such as PHP, then you don’t need any SSI’s, because they have their own includes (and it’s beyond the scope of this article).

Please note: You may fail to enable SSI’s on your server. Configuration stated above is correct only if your site is hosted on Apache server, if you’re running on *nix system and if your website host supports server side includes. If you’ve done everything correctly and it still doesn’t work, then you should contact your host and ask them to enable server side includes for you. Almost every host nowadays has server side includes enabled. If your host's support team refuses to add SSI’s, then go and find another host.

Include Directives for Calling files from HTML Documents

Now you know how to enable server side includes on your server. It’s time to find out how to insert include files into your existing HTML documents.

First, create a text file called my-include-file.txt (it will be your include file). Put some text in it, like: "Hello World" and save it into the same folder, where your existing HTML file is. Now insert the following line into your existing HTML document:

<!--#include virtual="my-include-file.txt"-->

This line tells the server to insert the include file my-include-file.txt into your existing web page. Let’s say you have a file called index.html in /public_html/ directory. Now, simply add that line above into your index file. That’s it. Now when you open index.html file in your browser, you can see your text (Hello World) that you’ve included in my-include-file.txt file.

If you look at the source code, you’ll not see any server side include traces. That’s because the whole process is performed on the server and only then sent to the browser. So no one will ever know if you’re using SSI commands or not.

In the example above, both index.html and my-include-file.txt are in the same folder. But let's say you want to include the same my-include-file.txt into another HTML document called my-page.html, which is in a different folder called /my-dir/. In that case, the code in your index.html file should remain the same, but my-page.html should have this line instead:

<!--#include virtual="../my-include-file.txt"-->

In this example, relative path is used. That’s because your include file is one level higher than my-page.html file. Here’s how it should look in your server:

/public_html/my-include-file.txt (include file)
/public_html/index.html (main web page)
/public_html/my-dir/my-page.html (web page in another folder)

You may decide to keep include files in another folder. Let’s say, includes are in /includes/ folder. Now, your index.html and my-page.html pages should have this line:

<!--#include virtual="/includes/my-include-file.txt"-->

This is absolute path. The forward slash at the beginning tells the server that it’s root directory. Now wherever your HTML pages may be, one, 2 or 3 levels deep, the include files will always have the correct path if you add the recent line into all your web pages.

When playing around with SSI’s, you may see this line when viewing your pages:

[an error occurred while processing this directive]

This error occurs, because the server can’t find include files. This means that SSI’s are working on your server, but you have simply typed in the wrong path to an include file. Check your inserted lines in web pages again, make changes and the problem should be fixed.

Server Slowdown using Server Side Includes

Many people tell you that using server side includes on your site will slow the server down. That’s because your server has to scan through every file that has .html extension and look for SSI directives no matter if the page actually has SSI directives or not. This may slow things down a bit. In that case, there’s another option called – XbitHack.

Using this technique, server doesn’t have to look for SSI directives on all web pages that end with .html extension. It instead scans only those files that you declare as having server side includes. It saves the server performance, because not all files are scanned through SSI commands.

Here’s how to configure your server to parse server side includes using XbitHack method. First, open .htaccess file again. Erase everything inside that file and add the following line:

XbitHack on

Now, save that file and ftp it (using ASCII mode) into your root folder. Then make your HTML files executable simply by setting the execute bit to 744 (or +x) instead of 644 as usual. Now, all files that you’ve “chmoded” to 744 and that have .html extension will be parsed for SSI’s, but all other files will act as usual.

Note that if you don’t have .htaccess file, but have http.conf, then use the latter one.

AddHandler Directive or XbitHack Method?

Ok, now you may have a simple question: “Should I use AddHandler directive or XbitHack?”

Well, it depends on your situation. Keep in mind that when you tell Apache to scan every file for SSI’s, the slowdown is very low, almost unnoticeable. If all your web pages have server side includes, then there’s no big difference if you use AddHandler directive or XbitHack, because your server has to scan every file for SSI commands anyway.

But if you have 100 public web pages and for some reason want only 5, 20 or 50 of them to have SSIs, then XbitHack is better choice.

Other Server Side Include Options

The widely known benefit of using server side includes is the ease of maintaining your web site by including other files in HTML documents. But SSI’s can offer more than that. Here are a couple of more useful things you can do with SSI technology:

• Today's Date <!--#echo var="DATE_LOCAL" --> Add this line into your HTML documents and it will show the current date and time.
• File Modification Date <!--#flastmod file="yourfile.html" --> This line shows when the file was last modified.
• Output CGI Programs <!--#include virtual="/cgi-bin/program.cgi"--> Add this line into your documents to output the result of the CGI program.

If you’re interested in some of these options above, then you can find more information on Apache website.

In Conclusion

If the extra server load scares you off and you still wonder whether you should use SSI or not, then go ahead and try them out. Slowdown is negligible and the advantages of having server side includes far outweigh the disadvantages.

If you’re planning to have a website or already have a small one and think it may grow later, then it’s strongly recommended to use SSI’s. This server side technology can really make your site’s maintenance easier and save you tons of hours.