I’m Chanpory, and this is my site on how to live and work better as a designer.

You should follow me on Twitter here.

For more, check out the archives.

SSI PageAfter posting Design like a pro: 20 web design tips last week, I began to put some of those tips into practice myself. Today, I discovered Server Side Includes (SSI)—a technique so simple, I’m offended no one told me about it.

SSI allows you to reuse a piece of code without having to hand code it into every single page. For example, you can keep a navigation header (or any other repeating element) of your site in a file by itself. When you want to include the header on a page, you simply insert a tiny piece of code to point to it. The web server writes the header into the page each time it loads.

To make a change to the header you only have to change one file. Every page that “includes” the header will reflect the change automatically, saving worlds of time and energy.

This tutorial explains the technical details, and other ways of achieving the same thing with PHP and ASP. All are easy for anyone comfortable with HTML code (I’m a beginner myself). I got a demo working in under 30 minutes.

Figuring this out was an “Ah hah!” moment for me. I knew it was possible, but I had no idea how easy it was. This may be the most important tool I have learned for developing web sites.

Do you have any simple, yet indispensable techniques for web development? Tell us about it, or link to a tutorial in the comments below.

7 Comments

  • Julien

    gravatarAug 3, 2006
    12:09 pm

    Make yourself an account on Netvibes and in : “ADD CONTENT”, add as many ToDoLists that you need for each projects you have (Web or anything else). And you can change the order of your lists by dragging them on top for prioritary tasks. It saves a lot of paper and as many hears.

  • ChuckEye

    gravatarAug 3, 2006
    11:11 pm

    I used SSI’s for my site about 10 years ago pretty regularly. Years later I wrote my own CMS and template system in perl. I never messed with ASP or PHP very much, nor ColdFusion. Now days I’m considering trying to teach myself some Ruby on Rails, but when it comes down to it, .shtml may still be a valid format for some applications.

  • Candi

    gravatarAug 4, 2006
    5:52 pm

    Hi there! I am addicted to your blog. I just love it, it’s very informative. Anyway, I have put up a link to LifeClever on my blog, and I was just making sure it’s okay with you.

    -Candi

  • Chanpory

    gravatarAug 7, 2006
    12:51 am

    Candi, thanks so much for reading LifeClever often! We’re glad you find it useful. It’s certainly okay for you to link to us!

  • Scott

    gravatarAug 23, 2006
    12:58 pm

    If you’re serving pages with Apache and would like to continue using .html as the extension on your primary pages, take a look at the XBitHack directive.

    http://httpd.apache.org/docs/2.2/mod/mod_include.html#xbithack

    This directive allows any text/html file that has the user-execute bit set to be treated as a server-parsed html document. This bypasses the need to change your page extension to .shtml.

  • Isaias

    gravatarNov 29, 2006
    8:21 pm

    I like checking out all the blogs, there sure are some strange blogs. you have a great blog.

  • Justin

    gravatarJun 11, 2008
    6:45 pm

    That is so deprecated.

    The idea is great, but there are much newer and better ways of doing it.

    I suppose it will work but in my opinion, not a good long-term solution.