Server Side Includes - Server Side Includes Tutorial

If you have content that shows on every page of your website OR on many pages of your site, you might want to consider using Server Side Includes (SSI.) SSI's allow you to make a change in one page and have it update on all the pages where it is included. One of the disadvantages/inconveniences of SSI's is that you can NOT see them when you are working on your computer. The SSI directive in your page tells the server to follow the instructions and merge the called file into your document before it is viewed in the browser.

Example of Page Using SSI: https://www.genealogy-web-creations.com/ssi-example/ssi-site-template.html

The left menu as well as the top menu and footer use server side includes (SSI)

Using SSI

Create the page you want to include as a plain text document including any formatting you might want as part of it. Since I use an external cascading style sheet (css) I use classes and id's in formatting.

Left menu text file

Place your cursor at the place in your html document where you want the file to be included. Insert the following code changing the file name to what you have named your file.

<!--#include virtual="left-menu.txt" -->

This code works ONLY when the file you are including is located at the same level as the file it is being included in. If you were to put all of your includes in a folder named _includes (which I do) then the code would be -

<!--#include virtual="_includes/left-menu.txt" -->

If the page you want to insert the include in is down one or two levels (folders) then you would need to add ../ for each level.

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 are left in the dark as to what your navigation 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.

There is a simple way of showing the #include information locally and without affecting the coding on the pages loaded to the server, e.g.

<div id ="topmenu">
<!--#include file="top-menu.txt" -->
<script type="text/javascript" src="top-menu.js"></script>
</div>

To make this possible, open your file e.g. "top-menu.txt" in your editor, highlight and copy into

HTML to JavaScript Convertor

Click the 'Convert to Javascript' button, then Copy & Paste the result into a new text editor page and save as e.g. topmenu.js into the same Folder/Directory as 'topmenu.txt. Before saving, edit out anything before <!-- and after //-->.

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

Don't load the javascript file to the server, and all the server will do is serve the <!--#include text file. The javascript file is not there and no one will know any difference (if it's there, you'll get two helpings of the menu!).

Examples of Server Side Includes SSI (The example site uses the above javascript solution so that I can now view the includes on my local computer.

Additional Resources

• Elsi's FreePages SSI General Info
• Elsi's SSI Examples
• SSI Commands
• HTML Goodies
• Google's Search Results for Server Side Includes
• View SSI Data in your Local Folders A JavaScript Solution by Barry Carlson

CSS Layout Templates (includes Server Side Includes)

• Nightlights Template
• Baubles Template

Revised and Updated:  January 2020