HTML SSI – The forgotten awesomeness!!

Server Side Includes or SSI is an age old simple interpreted server-side scripting language used almost exclusively for the web. It basically consists a set of directives that are inserted in an HTML page which are evaluated on the server when the page is being served. Simply put it allows for more modular and dynamic HTML. The most important use of SSI is however for creating prototypes without using languages like PHP for including files etc and again to keep things modular.

As an interactive developer many times we are given VD’s (visual designs) in Photoshop which need to be converted into static HTML templates that can be integrated with the Server side scripting logic. In most cases we have the assets i.e. the CSS, Images and JS  files arranged in a modular fashion for better understanding. But what about the modules used inside the HTML like header, main menu , sidebar or footers. They are merely copy pasted from one HTML to another.  Well that’s not modular !!. So here is what you need to do.

The Apache set up:

1. Stop your apache server if it is running.

2. Open the apache httpd.config file and locate the following lines

AddType text/html .shtml

AddOutputFilter INCLUDES .shtml
Once located insert the following on a new line
Options +Includes

just after the line “AddOutputFilter INCLUDES .shtml”
(This tells Apache that you want to permit files to be parsed for SSI directives.)

3.  Next we would like to add some legacy support for directives if the apache instance has been updated recently.

Add the following lines inside a Directory tag in the httpd.config file.

    <IfModule include_module>
          SSILegacyExprParser on

4. Restart your apache server.

Using Grunt:

Finally if you have to dispatch the work you have done for code review or html validation or to a client who hasn’t set up apache you can use the grunt task defined in the project folder to  create a distribution folder containing the compiled .shtml file into pure well formed .html pages with all the includes appearing as inline HTML.

For more info on SSI and the various directives that exist please visit the following links:

Apache Tutorial: Introduction to Server Side Includes – Apache HTTP Server

Server Side Includes – Wikipedia, the free encyclopedia