Server Side Includes (SSI)
We discuss usage of server side includes (SSI) at length due to its extreme usefulness in maintaining a website. For most website designs, a great majority of a web page's look remains the same except for the actual content found in the middle of the page. The site navigation, logo, and footer remain a constant no matter what page is actually being viewed. Given that, using server side includes makes it extremely easy to break a web page down into different sections for easy maintenance.
Each server side include is its own HTML (or text) file that represents a portion of the web page. For example, it's common for websites to have three server side includes to represent the top, sides, and bottom portion of a web page. The easiest way to utilize server side includes is to design your web pages normally. After doing so, analyze your HTML source code to find the exact code that remains the same regardless of the web page being viewed. Create a top.html file and place the source code in this file that displays the top portion of your website such as your logo. Then, create an HTML file to represent the side columns which usually include your site navigation. Finally, create an HTML file to represent the bottom portion of your website. The original HTML file should now include only the unique content found in the middle of the page, as well as the title and meta tags found in the head section of the HTML which also differ based on the actual web page being viewed.
Now that you have created the server side include files, you call the
individual server side includes by utilizing the following code:
<!--#include virtual="top.html" -->
The above code would paste the contents of top.html into the current HTML
file.
Now that you are employing SSI as part of your web design, you must ensure you add the following code to your .htaccess file. If you have not uploaded a .htaccess file to your website previously, you must create one now and upload it to the root of your website. It must include the following in order for SSI to function and parse HTML and SHTML files for SSI:
Options +FollowSymLinks +Includes
AddType text/html .shtml
AddHandler server-parsed .shtml
AddHandler server-parsed .html
Now that you are utilizing SSI, changes to your site navigation, graphics, etc. need only be updated once in the appropriate SSI file and your entire website will instantly reflect the change. Updating the overall web design becomes much easier since you no longer have to worry about ensuring your changes make it to your entire website (which may encompass thousands of pages). Indeed, with a well thought out web design that utilizes SSI website maintenance can be breeze.