How to create a consistent webpage layout with Server-Side Includes on Debian

Note: I have recently switched over to using a hand-coded Static Site Generator. As a result, I no longer use this method. It’s still perfectly valid, though.

If you’ve browsed through my website, you would know that the header, which includes the title (the font for which can be found here) and the menu bar, is consistent throughout all the webpages, giving a uniform look to the website. However, I don’t write the code for the header in every webpage. Although you wouldn’t notice this if you perused the source code, I have a single line in all my HTML files that adds the header into the page, allowing me to focus on the content. This also helps me avoid the unnecessary duplication of code.

This is accomplished through the magic of Server-Side Includes. In this guide, I’ll show you how to setup Server-Side Includes in your Debian server, and how to use it effectively.

What you’ll need

To use Server-Side Includes, you’ll need the following:

A Debian-based server that uses Apache (preferably v2.4)
An SSH connection
A text editor

Here is an excerpt about Server-Side Includes from the Apache Documentation.

Server-side includes provide a means to add dynamic content to existing HTML documents.

This is done by placing command directives in your existing HTML document, that tell the server to add the HTML code from another file at a particular point in the document.

To enable Server-Side Includes, you will need to enable the associated module in the web server. You can do this with the ‘a2enmod’ command. Simply type:

$ a2enmod include && systemctl reload apache2

This command enables the ‘include’ module, and reloads the Apache service in order to reflect the change.

You will now need to configure your Apache server to parse files for Include directives. This can be done by edititing the ‘apache2.conf’ file. Open the file in your favorite text editor, and the find the line which says:

<Directory />

Below this, you should find the Options for this directory (i.e. your web root directory). Append “+Includes” to the Options line.

You should now have Server-Side Includes configured for your Apache server. There is still one problem, however. Which files should Apache check for Includes directives? You could ask it to parse all of them, but that would be a strain on resources, especially if you aren’t going to be using SSI all that often. The better solution (in my opinion) is to enable the XBit Hack. This asks Apache to parse those HTML files that have the executable bit (+x). To enable XBit Hack, add the given line below the Options for your web-root directory.

XBitHack on

Now, create an HTML file in your web-root directory (or any subdirectory thereof) named (for example) “header.html”. that contains a piece of HTML code that you want to add to your website. Remember to only keep the specific piece of code that you want to add (do not add <HTML> tags, for example). Now, create another HTML document (e.g. mydoc.html), and include the header file with the following line of code.

Remember to make the included code ‘fit in’ with the file you’re including it in (i.e. Don’t create a <body> tag in your mydoc.html if header.html already contains one).
Now, make mydoc.html executable with the following Linux command:

$ chmod +x mydoc.html

Load mydoc.html in your web browser, and you should see the code in header.html load in. You can inspect the web page to make sure, and you will notice that your include directive is nowhere to be seen. This is because the HTML code in header.html is substituted in literally, and as a result, no one who views the soruce code for your web page would know that you’ve used SSI.

Headers aren’t the only thing you can add using SSI. You can add footers, title bars, and even show the current date and time. Check out the Apache Documentation on SSI for more information on how this is done.