How To Use Server Side Includes - Step by Step SSI Tutorial
Introduction: - Server Side Includes (SSI's) consist of files that are inserted into your webpage by the server. They are included into the page via the server, thus the name Server Side Includes. For example, on this very page, the code for the top menu comes from the file http://www.freechurchwebdesigns.com/topmenu.txt. This same code is used on ALL pages of this site. So if I want to add or modify a menu item, I simply edit this ONE file and the changes take place sitewide! Before I discovered this method, I would edit each and every pages menu code!
Step 0 - Verify The Type of Server Side Includes Your Host Allows. Some hosts only allow .shtml files to use server-side includes. Other hosts allow html files to use these includes. I use Hostgator Shared Hosting. Hostgator allows server side includes in html files and also provides support via their chat support function if help is needed.
Step 1 - Create Your File As You Normally Would This is exactly how it sounds. Create your file as if you never heard of a Server Side Include, including all code for menus, footers, or any other shared element. Preview your file to make sure it looks OK. At this point, you can preview by simply opening your file with your choice of web browser. And a good rule of thumb is to preview your file in both Internet Explorer and Firefox. You may also choose to preview in the Google Chrome browser, if you have it. The code for this page, before using a server-side include for the top menu is shown here and below.
Step 2 - Select Your Code and Create a Text File. Once you have your page the way you want, copy the code for the part of the page you want to include via a server-side include. Typically this will be navigation menus, areas where you rotate advertisements, and footer areas (bottom of page menu) where you include links to privacy statements, contact info, and copyright notices. Create text files named something like topmenu.txt, bottomofpage.txt, etc. In this example, I will create a file called topmenu.txt To create text files, you may use notepad or wordpad. I used Notepad for this example, as shown below.
Step 3 - Replace Your Code With Server Side Include Prompt Code. Now, you can replace your code with code that calls up the included file. This is code shown in yellow below beginning <!--#include file= "yourfilename.txt" -->. I would also suggest that you use comments above and below the included code as well, as shown below. Comments always have the format <!--your comment -->. Include this same code on every page where you want to input the contents of this file. Note that if your included file is in a subfolder you will need to include this as something like <!--#include file="subfolder/yourfilename.txt" -->. Also keep in mind that if a menu is used in pages that are in different subfolders, you will need to use the full URL of the page destination - so if I had a menu item pointing to resources/links.html, I would need to use the full URL http://www.freechurchwebdesigns.com/resources/links.html in my menu button URL. The other alternative is to use a different menu file for files of each subdirectory. Another thing to note is that if your included file is in the public_html top-level folder and your html file is in a subfolder, you must use the code <!--#include virtual="../topmenu.txt" -->. An easy way to avoid any of these difficulties is to keep all your html files and included text files in the public_html top-level folder and only create and use subfolders for images, videos, pdf files, or other files that are not html pages or include text files. You may then simply use the convention below.
Step 4 - Make Changes on Your Server & Upload Your Files. This is the slightly tricky part since this procedure might vary depending on your hosting. It is helpful to use a hosting service that provides some support to reset things for you if needed. I use Hostgator Shared Hosting as they will help on just about any problem via their chat support. If you are using Hostgator, follow the steps below. Other hosting servers should be similar, but you should contact your hosting service for details. I have used hosting in the past that only allowed .shtml files to use server side includes. SHTML files are html files with an .shtml extension that allow for server side includes on virtually every host.
Find the file on in your public_html folder titled.htaccess Within this file, add the following lines and then save the file.
AddHandler server-parsed .txt
AddHandler server-parsed .htm
AddHandler server-parsed .html
This will allow the server to insert the contents of text files, html files, and htm files as they are called via the code you included. If you are using .shtml files, you may neet to add the command AddHandler server-parsed .shtml as well.
If you are using some hosting other than hostgator, refer to their support files, chat support, or see the instructoins shown at http://httpd.apache.org/docs/2.0/howto/ssi.html.
After making needed changes on your server, upload all your files, including any text files you created.
Copyright 2008 - Michael Sakowski About This Site Privacy Policy Free Church Resources Contact Me Portfolio