Planning for Growth with SSI

Discussion in 'Web Design and Development' started by bricktowntom, Mar 30, 2006.

  1. bricktowntom macrumors newbie

    Mar 30, 2006
    I wanted to share some information that can make your life so much easier as your site grows and you constantly want to add to or take away from it.

    It's a long read, sorry for that and I hope that it is understandable!


    Designing with SSI

    What is SSI?
    SSI is an acronym for server side includes and what it does is allow you to make a change across hundreds or thousands of pages by editing only one file.

    What is it useful for?
    SSI is useful for managing your navigation, header and footer files although there are many other uses which I will touch base on later. By using ssi, you can modify your navigation menu, header or footer and the changes will be instant across every page on your side utilizing the ssi by calling it via a tag in your page.

    How do I do it?
    Ok, let's take a look at this page
    It looks like a complete web page but actually it uses several ssi calls to include html
    from other pages.

    The header is called from here

    The footer is called from here

    The navigation menu is called from here

    You can view the source on each of those pages to see that is is just basic html with no head or body tags, you don't need those as they will be on the main page that is calling these, you don't need them more than once.

    Placing the following tags on any page exactly where you want that page to appear on your new page
    <!--#include virtual="header.html" -->
    <!--#include virtual="navigation.html" -->
    <!--#include virtual="footer.html" -->

    The path in the tags above assumes that the header.html, navigation.html and footer.html are in the same folder. If your header, navigation and footer files were at the root of your domain and you were designing a page one level down you would use the tag <!--#include virtual="../header.html" -->

    For this to work there are a couple of things that must happen. First your server must support ssi, most decent hosting companies do. Secondly, your pages should end with .shtml instead of .html, the server is configured to parse files ending with that extension for ssi code.

    If you have existing pages you would like to add the ssi into but don't want to change the extension from .html to .shtml, you can still use it by editing your .htaccess file. If you are unsure what this file is, I would suggest not messing with it. But for those that are comfortable doing so, you can add the following to your .htaccess file

    AddType application/x-httpd-php .php .html .shtml
    AddType text/html .shtml
    AddHandler server-parsed .shtml

    This will tell the server to treat .html extensions as .shtml and the pages will be parsed for your tags. The reason it's not configured to do this automatically is because it does cause a little more work for the server but unless you are receiving massive traffic (thousands of visitors a day), you will not notice.

    You can find more information about ssi here.
  2. mooty macrumors regular

    Mar 7, 2006
    cant you do all this with PHP?

    include ("Location: navigation.html");
  3. rendezvouscp macrumors 68000

    Aug 20, 2003
    Long Beach, California
    Yes, with something like this.
    <?php include("folder/file.php"); ?>
    "include" can be replaced with include_once, require, and require_once (I believe).
  4. jaseone macrumors 65816


    Nov 7, 2004
    Houston, USA
    Does that post sound spammy to anyone else? Looks like a bit of tricky SEO to me....
  5. NoNameBrand macrumors 6502

    Nov 17, 2005
    Halifax, Canada
    Looks like it to me.


    1997 called, they want their .shtml back.

Share This Page