Beginner's Guide to SSI (server side includes)

Don't worry, SSI doesn't require a rocket-science degree to understand and use. It is, however, a highly useful feature that lets you do incredibly time saving tasks such as include the contents of an external file across multiple pages on your site, or access and display server specific information such as the current server time, visitor's IP address, etc. In this tutorial I'll introduce new comers to the wonderful world of SSI! SSI is short for Server Side Includes, by the way.

Does my server support SSI?

The first thing that needs to be settled is whether your server supports SSI and have it enabled. SSI is a Linux/Apache specific feature, so if you're on a Windows server for example, you'll need to look for the Windows equivalent of SSI (sorry, not a Window's guy). To test if your server supports SSI then, you can run a simple test, by inserting the below code inside a webpage, and saving the page with a .shtml extension (the most common extension configured to parse SSI by default):

test.shtml source:

<!--#echo var="DATE_LOCAL" -->

When you run test.shtml in your browser, you should see the current date plus time of your server displayed:

Saturday, 24-Aug-2013 04:39:16 MDT

If not, you can either ask your web host about SSI support for your account, or try and manually enable SSI, by reading "Enabling SSI on my server."

With that said, lets explore some nifty abilities of SSI now.

Using SSI to include the contents of an external file

The most common usage of SSI is to include the contents of an external file onto a page or across multiple pages on your site. Modify the external file, and all pages that have this file embedded is also updated with the modified information. For a site that uses the same header, navigational menu, or footer across pages, for example, this can save you countless time and energy. The syntax to embed the contents of an external file onto the current page is:

Which one to use depends on where "external.htm" is located. The first command assumes that the file is located in the same directory as the document containing it while the second syntax uses an absolute reference to "external.htm" starting from your root HTML directory. Typically you'll want to turn to the second syntax, as the external files to include most likely will be in a central directory while the pages including them are scattered across different directories. Here are a couple of more examples of the second syntax:

With the first code, I'm telling the server to look for "navbar.txt" inside the "includes" directory that's directly beneath the root HTML directory (ie: http://www.mysite.com/includes), while in the second code, I'm simply telling it to look in the parent directory of the page that's including "navbar.txt"

As shown, you're also not limited to just including .htm files, but other static text files such as .txt. You cannot, however, include .cgi files using this syntax without additional configuration to your server. Just FYI, both the left menu and copyright footer on this page and across the site are dynamically included using SSI using two external files. To update the copyright notice for example, all I have to do is make one simple modification to one of these files, and the changes are reflected across the entire site.

Manually enabling SSI on your server

If you're on a Linux+Apache server that probably supports SSI but just doesn't have it enabled, you can try manually turning it on using the magical little file called .htaccess. Simply create an empty txt file called .htaccess, and add the below to it:

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

Then, upload this file to the root HTML directory of your server account, enabling SSI across the entire site for any web page with a .shtml extension. To isolate SSI ability to just a specific sub directory, upload this file to that directory instead.

Now, assuming this works, you should now make sure your web host allows you to manually turn on SSI. Some hosts may not like the idea of you turning on a feature without paying more, so to be safe, you should check with them first.

Enabling SSI on regular html pages

Now, the above requires that your webpages be named with a .shtml extension in order for SSI to be enabled for that page. If you're going to be using SSI across the board, you may want to consider just turning on SSI for regular .html and .htm pages, so you don't have to rename your files or follow the .shtml convention. To do this, add the below code to your .htaccess file:

AddHandler server-parsed .html
AddHandler server-parsed .htm

Viola, SSI should now be enabled for regular HTML pages as well!

iNet Freaks

Beginner's Guide to SSI (server side includes)