Server Side Includes, BlueHost, and Expression Web

NOTE: This tutorial assumes you do NOT have FrontPage Server Extensions installed.

I normally use Expression Web Design Time includes when working on websites that require repetitive content that will change from section to section like menus. The menus on this site are Design Time Includes. The only problem with using Design Time Includes on a site that does NOT have FrontPage Server Extensions installed is that you must republish ALL pages the include is part of. No big deal for a small site. But imagine a site with thousands of pages.

Perhaps you should consider Server Side Includes.

Does Your Server Support Server Side Includes?

First, you will need to check and see IF your server supports the use of Server Side Includes. It should be listed in the information on the type of package you have purchased. Two hosting services I have used are listed below.

1and1.com does support server side includes BUT only as part of their Business or Developer packages.
BlueHost (affiliate link) offers only one hosting package and supports server side includes but by default is set up so that your pages need the shtml file extension to use them. But if your pages use .html or .htm, you will need to add the ability to handle ssi's within these file types.

So if this feature is important to you, check first to see if they are supported by the account you have chosen.

Setting Up BlueHost to allow SSI's in HTML Pages

By default, BlueHost is set up to allow you to use server side includes in pages with the file extension .shtml. But if your pages use the .html or .htm file extension, they will NOT work with this default setup. What to do? BlueHost has a tutorial on how to add the other file extensions so they will work. See Server Side Includes (SSI) The instructions advise:

Apache Handlers

This is what you would use to specify how to treat file types. By default, .html files will not run server side includes, but .shtml files will. To allow these you need to add a new handler for HTML:

To allow SSI, set the handler as 'server-parsed' and the extension as '.html' (without the quotes).

This will tell the server to read the .html files so that you may use these directives in them.

I signed in to my Control Panel > Advanced > Apache Handlers.

View Screenshot

Fill in the form as instructed:

Handler: server-parsed
Extension(s): .html .htm

I click Add and check to make sure the site is still working. Internal Server Error is the message I see when I actually view ANY of my sites. Is part of the problem that I have pointed the main domain from the public_html folder to its own folder? Definitely!

WARNING: Do NOT use the Control Panel to create the apache handler if you have:

redirected your main domain name from the public_html directory to its own folder
have any WordPress blogs set up
these are only the ones I am familiar with but I am sure there are others

Editing the .htaccess file

Start Filezilla and sign in to your website. First, download the existing .htaccess file from your server. I save it to the actual website on my hard drive. If I am going to edit it, I save it as .htaccessold and work on the original copy. Make sure to set the server transfer type to ascii.

View Screenshot

NOTE: You will need to make sure the Filezilla is set to show the hidden files to view the .htaccess file. Click Server on the menu > Make sure Force showing hidden files is checked.

View Screenshot

If you already have a .htaccess file, open the file in Notepad and add the following to the end of that file:

AddHandler server-parsed .html .htm

Make sure you do NOT leave off the dot at the beginning of the file extension.

Upload the edited file to your server replacing the one currently there. Check your site in a browser to make sure it still works. Remember to Refresh so you are sure the site is working. Make sure and change the server transfer type back to Auto.

Creating a .htaccess file

If you do NOT currently have a .htaccess file on your server you can create one.

Start Notepad (or YOUR plain text editor) > From the Menu Click File > Save As

A dialog box will open. At the top of the box make sure it has the location of your website (on your computer) next to the Save in area.
To the right of File name type in .htaccess
To the right of Save as type, select All Files
Click the save button.

View Screenshot

Add the following to that file and Save the file. Do NOT forget the dot in front of the file extensions.

AddHandler server-parsed .html .htm

Using Filezilla > Upload the file to your server.

You will need to add a new .htaccess file or the edit the current one for each domain you wish to use server side includes with. If you then check your site in your browser and you see the message Internal Server Error go back and double check to make sure you have a dot in front of the file extensions.

Create the include file

When you use a SSI file the server takes the entire content of the file and inserts it into the page, replacing the include code. For example, the left side menu of this site changes from the main pages to the individual tutorial pages. If I use a SSI for the left side menu, I can make the change to just that file, save it and upload the include file to the server.

If you have a large web site using server side includes could save you considerable time and make the site easier to maintain. You need only make the change to the include file, save it and upload the include file to the server.

Create a file which contains the reusable code with the extension .htm or .html. You could also use .php BUT this tutorial does not cover those files.

If the ssi file is a menu with links to the various pages, the links can be either absolute (the full url) or root relative links (a URL relative to the document being served.

Screenshot Server Side Include

NOTE FOR EXPRESSION WEB USERS: Unlike Server Side Includes, Design Time Includes need to be a full html document with at least the opening and closing <html> and <body> tags. The content between the opening <body>and closing </body> tags is what is inserted.

View Screenshot Design Time Include

Calling Server Side Includes into your page

The filename is given using a relative path and the referenced file which must reside on the same server as the calling page. The file extension of the included file doesn’t matter. It can be .txt or .html or .htm, or .inc or even .ssi.

Go to the page that will use the include and add the following code in the appropriate place:

The above is used if the include file is NOT in the same directory as the calling page. It should specify a URL relative to the document being served.

The above is used if the include file is in the same directory as the calling page. The file attribute is a file path, relative to the current directory.

If you use the wrong the syntax for the SSI or ask for a file that does not exist, you will see the error message below in place of the include.

[an error occurred while processing this directive]

Once the ssi is placed into the parent page you will not be able to tell it is an include. The code will look like it is part of the page.

Example Page - the left side menu is the include.

Using SSI's with Expression Web DWT's

If you are using Design Time Includes as part of your Dynamic Web Template and attach it to a page, any relative file paths are adjusted so they will continue to work no matter which directory you save the page too. This is NOT TRUE if you are using server side includes as part of your DWT. If you are going to use server side includes within your DWT, you will need to use root relative file paths for them to work no matter which directory level you use to save the page. Absolute file paths to the include file will fail since SSI will not work across domains.

I am going to use a test site I created within this domain (named test-site) to explain the file path you need to use within the DWT.

This assumes the starting at the root of your web /, then within a folder named test-site, there is a folder named _includes with the file named footer.html

If the file you are working with is in a folder called _includes located in the root of the web, the path to the include file becomes:

This assumes starting at the root of your web /, then within a folder named _includes and the filename footer.html

REMEMBER it is the actual path to the include file you are inserting into the DWT.

If you are using Design Time Includes within your pages, when you preview in your browser you will see the content of the include as part of your page. It often becomes a problem when you decide to use Server Side Include (SSI) for adding navigation menus etc. to your pages. Without the use of a Virtual Server on your own computer, you cannot "see" what your navigation (or other ssi's) actually looks like when checking through your pages.

NOTE: I would like to thank Barry Carlson of the FreePages list for coming up with this solution.

<!--#include virtual="/test-site/_includes/left-menu.html" -->

<script type="text/javascript" src="_includes/left-menu.js"></script>

To make this possible, open your file e.g. "left-menu.html " in Expression Web, highlight and copy into:

HTML to JavaScript Convertor

Click the 'Convert to Javascript' button, then Copy & Paste the result into a new text or javascript page and save as e.g. left-menu.js into the same Folder/Directory as 'left-menu.html. Before saving, edit out anything before  .

Just add the javascript link as in the example above to each of your pages, and lo and behold, you will have your server side includes showing locally.

Mark the javascript file to exclude from publishing, and all the server will do is serve the

<!--#include virtual="/test-site/_includes/left-menu.html" -->

The javascript file is not there and no one will know any difference (if it's there, you'll get two of the include wherever it is!).

Example Page using the javascript described above.

The Server Side Include I view source to see the actual code.

View Screenshot - The javascript file since it is excluded from publishing.

While using Server Side Includes may make site maintenance a tiny bit easier in that you do not have to upload the parent page when updating the include page, I still prefer using the Design Time Include feature of Expression Web.

Additional Resources

Expression Web 4.0 Tutorials 2nd Edition from Install to Publish, a FREE EBook by Pat Geary.

Expression Web has a group on Facebook. If you are a FB user, come join us.

Disclosure: This is an affiliate link, which means that if you visit Bluehost.com through this link and purchase this product, I’ll get a commission.

Microsoft MVP Logo.
April 2007 - April 2013