≡ Menu

How to Setup HTML Server Side Includes SSI on Apache and Nginx

What is SSI?

SSI stands for Server Side Includes. As the name suggests, they are simple server side scripts that are typically used as directives inside html comments.

Where to use SSI? There are several ways to SSI. The two most common reason to use SSI are to serve a dynamic content on your web page, and to reuse a code snippet as shown below.

1. Serve Dynamically Generated Content

For example, to display current time on your html page, you can use server side includes. You don’t need to use any other special server side scripting languages for it.

The following html code snippet shows this example. The line highlighted in bold is an SSI script.

<html>
  <head> 
  	<title>thegeekstuff.com</title>
  </head>
  <body>
  	<p> 
  	  Today is <!--#echo var="DATE_LOCAL" --> 
  	</p>
  </body>
</html>

2. Reuse the Same HTML Script

You can also use SSI to reuse a html snippet on multiple pages. This is very helpful to reuse header and footer information of a site on different pages.

The following is a sample header.html file that can be reused.

<header>
  <h1> The Geek Stuff</h1>
  <img  href="./images/logo.png"  alt="Logo" />
</header>

The following is a sample footer.html file that can be reused.

<footer>
  <span> The Geek Stuff, Los Angeles, USA <span>
  <ul> 
  	<li> <a href="aboutus.html">About Us</a> </li>
  	<li> <a href="contactus.html">Contact Us</a> </li>
  	<li> <a href="ourworks.html">Portfolio</a> </li>
  </ul>
</footer>

Now, when it is time to reuse the above two files (header and footer), we simple include them on any other html page using the #include SSI as shown below.

This is the index.html, which includes both header and footer using server side includes.

<html>
  <head> 
  	<title>The Geek Stuff</title>
  </head>
  <body>
  	<!--#include virtual="header.html" --> 
  	  <div> 
      <!-- Page content goes here   -->
  	  </div>
  	<!--#include virtual="footer.html" --> 
  </body>
</html>

Similar to including a html page using SSI, you can also include the output of cgi script to the html using the following line:

<!--#include virtual="/cgi-bin/sometask.pl" -->

3. Setup SSI in .htaccess File

We can instruct the webserver to interpret Server Side Includes either using .htaccess or modifying the web-server config file directly.

Create .htaccess file in your web root and add the following lines of code:

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

The above lines instruct the web server to parse the .html extension for the server side includes present in it.

We can also instruct the server to parse the file with custom extensions as well. For example, we can use the following lines for parsing the “.shtml” file extensions.

AddType text/html .shtml
AddHandler server-parsed .shtml

Similarly for parsing the cgi script we can add following lines:

AddType application/x-httpd-cgi .cgi

4. Modify Apache httpd.conf File

On Apache web server, the following directive lines should be present in httpd.conf file for SSI

Options +Includes
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

The first line tells Apache to allow the file to be parsed for SSI. The other lines tells the extension of the file to be parsed.

5. SSI On Nginx Web Server

On Nginx web server, SSI should be set to “on” in the “nginx.conf” file settings.

An example of lines in nginx.conf is as follows:

location / {
	ssi on;
	ssi_last_modified on;
	ssi_min_file_chunk 1k;
	ssi_silent_errors off;
	ssi_types text/html;
	ssi_value_length 256;

	root /var/www;
	index index.html 
}

In the above Nginx SSI configuration:

  1. First line tells the server to enable the SSI parsing.
  2. Second line tells the server to keep “Last-modified” field in header.
  3. Third line states the minimum size of the include file.
  4. Fourth line suppresses the error message in case of SSI parsing error.
  5. Fifth line allows the addition of the MIME types.
  6. Sixth line set the maximum length of the parameter values in SSI commands.
Add your comment

If you enjoyed this article, you might also like..

  1. 50 Linux Sysadmin Tutorials
  2. 50 Most Frequently Used Linux Commands (With Examples)
  3. Top 25 Best Linux Performance Monitoring and Debugging Tools
  4. Mommy, I found it! – 15 Practical Linux Find Command Examples
  5. Linux 101 Hacks 2nd Edition eBook Linux 101 Hacks Book

Bash 101 Hacks Book Sed and Awk 101 Hacks Book Nagios Core 3 Book Vim 101 Hacks Book

Comments on this entry are closed.

  • Jalal Hajigholamali July 10, 2014, 1:03 am

    Hi,

    Thanks for nice and useful article…

    Thanks again

  • Douglas July 10, 2014, 7:25 am

    Thanks,

    Fascinating! I am still learning Apache’s capabilities and I never knew it could do this. Excellent article.