Server Side Includes (SSI) is an easy and efficient way to manage dynamic content in static websites. It simplifies content updates, improves server performance, and enhances web development efficiency. By following the tutorials and best practices outlined in this guide, you can effectively implement SSI in your projects.
A simple "Interpreted Server Side" scripting language used almost exclusively for the web. It is most useful for including the contents of one or more files into a web page on a web server, using its "#include" directive.
This could commonly be a common piece of code throughout a Website, such as a page header, a page footer and a navigation menu. SSI also contains control directives for conditional features and directives for calling external programs.
For a example, we could use SSI Includes on this web page to call our "Blog Menu" links in the left column. This would allow us to make changes to the navigation by changing only 1 file, instead of changing hundreds of individual pages. But as it turns out we are actually using PHP Includes which work in almost the exact same way
SSI calls are supported by Apache, LiteSpeed, NGINX, IIS, As well as W3C, and the W3C's Jigsaw Server.
When someone views a web page, the Browser sends a request for the HTML page to the Web Server. The Server grabs the page, then sees the SSI Command (or “call”). This tells the Web Server to do something to the HTML file before giving the HTML file to the visitor's browser. Because of the way SSI calls work, you will not see the SSI code, only what the SSI call is showing you.
Server Side Includes (SSI) streamline web development by allowing reusable content like headers, footers, and navigation menus to be managed in a single file. This reduces redundancy, simplifies updates, and improves site maintenance. SSI enhances performance by minimizing HTTP requests and server load, making web pages load faster. It also supports dynamic content, such as timestamps and environment variables, without the complexity of full-fledged scripting languages. With its lightweight nature and easy implementation, SSI is an excellent choice for static websites that need small dynamic elements.
To allow SSI calls on your Web Server, you need the following directive (code), either in your httpd.conf file, or in a .htaccess file.
Options +Includes
This tells the Server that you want to permit files to be parsed for SSI directives. You also need to tell the Server which files should be parsed. There are two ways to do this. You can parse any file with a particular file extension, such as .shtml, with the following directives:
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
The disadvantage to this approach is that if you wanted to add SSI to an existing page. You need to change the name of that page and all hyperlinks to that page, in order to give it a .shtml extension.
The other method is to use the XBitHack directive:
XBitHack on
XBitHack tells the Server to parse files for SSI directives if they have the "Execute Bit" set. So, to add SSI directives to an existing page, rather than having to change the file name, you would just need to make the file executable using chmod
chmod +x pagename.html
On Windows Servers, there is no such thing as an "Execute Bit" to set, so that limits your options.
For more on enabling SSI on Apache Web Servers, see the Apache HTTPD Tutorial: Introduction to Server Side Includes.
There are 2 ways to use SSI with your webpages
Rename all web pages using SSI calls with the ".shtml" extension instead of ".HTML". Otherwise, all of your "Include Calls" will be ignored.
Edit or if you do not have a .htaccess file, add one. Then add the following lines
AddType text/html .html
AddHandler server-parsed .html
You can "Include” a file into your HTML document. For example, you have a footer that you would like to show on every page in a website. You have named the footer filefooter.html. In your main HTML document (let’s call it index.shtml), you would include this code:
<!--#include virtual="footer.html"-->
It is important to remember the pound sign (#), as that is the key to letting the server that you are using SSI. When your index.shtml is retrieved by a visitor, the Web Server reads your page and sees your call to insert footer.html into your page. The server then retrieves fthe "footer.html" and inserts it exactly where you placed your SSI call.
You can insert your environment variables For example, in your .shtml document, typing
<!--echo var="HTTP_HOST--> returns rshweb.com on this Web Server.
Other environment variables that are available and their corresponding output include:
<!--echo var="SERVER_SOFTWARE"--> : Apache/1.3.26 (Unix)
<!--echo var="GATEWAY_INTERFACE"--> : CGI/1.1
<!--echo var="DOCUMENT_ROOT--> : CGI/1.1
<!--echo var="REMOTE_ADDR"--> : 64.208.172.178
<!--echo var="SERVER_PROTOCOL"--> : HTTP/1.0
<!--echo var="REQUEST_METHOD"--> : GET
<!--echo var="HTTP_USER_AGENT"--> : ia_archiver
<!--echo var="SERVER_NAME"--> : rshweb.com
<!--echo var="SERVER_PORT"--> : 80
<!--echo var="SERVER_ADMIN"--> : webmaster@rshweb.com
<!--echo var="DATE_LOCAL"--> : Displays current time:
<!--echo var=""LAST_MODIFIED"--> This is the output of "last modification date" for a page
<!--include virtual="footer.html"--> : This makes updating across multiple pages with one file
SSI allows conditional content based on variables:
<!--if expr="$HTTP_USER_AGENT = /Chrome/"--> :
Welcome, Chrome user!
<!--else--> :
Welcome, visitor!
<!--endif--> :
Server-Side Includes tend to run slower than regular .HTML documents because the server looks for SSI commands to parse into the .shtml documents before displaying the page to your visitors. If we had our configuration set to allow SSI parsing in .HTML documents, server response would be degraded for those users who don’t use SSI. For that reason, we have our server configuration set to SSI-parse only those documents with the .shtml extension.
If you want to override the default Server configuration so SSI will work with .HTML documents, you can create a file named .htaccess and upload it (in ASCII mode) to your main directory. Add the following lines to your .htaccess file:
AddType text/html .html
AddHandler server-parsed .html
If you want both .HTML and .HTM documents to parse SSI, create your .htaccess file with these lines:
AddType text/html .html
AddHandler server-parsed .html
AddHandler server-parsed .htm
Please note that because the server will now look for SSI commands in each .htm page before displaying the page to your visitors, pages with this extension may parse slightly slower (the same speed as normal .shtml files).
Server Side Includes (SSI) is an easy and efficient way to manage dynamic content in static websites. It simplifies content updates, improves server performance, and enhances web development efficiency. By following the tutorials and best practices outlined in this guide, you can effectively implement SSI in your projects.
If you're looking to optimize your website without the complexity of full-fledged scripting languages, SSI is a great choice. Start experimenting today and enhance your web development skills.
One of the best creative blog writers and social media. He has...
Tweet Share Pin Email