Easier Way to Edit Static Content Using SSI

From Lunarpages Web Hosting Wiki

When working on a regular HTML based web site, you might often notice that you need to insert the same blocks of information again and again. For example, your web site’s basic navigation links (such as home, about me, my projects, etc) might be pasted in every single page that you create. Editing and updating these links can quickly become a pain if you get to many to work with. What is a webmaster to do? By using Server Side Includes (SSI) you can point every page to one location where your navigation is stored.

To start out, let us look at this basic web site source code.


This is just about as basic of a plan web site as you can get. Now instead of having to keep Link #1, Link #2, and Link #3 updated on every page I create, re-writing it each time, I want to update one file that will keep these links up to date on all my pages. We are going to replace the navigation link text with a Server Side Include that looks like this:

 <!--#include file="navigation.shtml" -->

Why is the extension .shtml instead of .html? Pages that use Server Side Includes will require you using .shtml as an extension on ALL of your web pages where the special code is used.

So copy and paste the text you want to duplicated from one location on all your pages into a new text file. Here is what my text file looks like:


Now, I want you to save that file and call it navigation.shtml. In your own pages, the name navigation could be anything, I am just using it so it matches up with my example above. Also, make sure you include the .shtml extension.

Go back to your original page, and where your navigation goes, replace it with this:

 <!--#include file="navigation.shtml" -->

So now, your web page code looks like this:


Now save your main web page as myssitest.shtml. The myssitest could be any name, just make sure you remember the .shtml extension for the file in question.

Finally, upload both myssitest.shtml and navigation.shtml to your public_html folder. To test things out, point your internet browser towards:

Remember to replace with your actual domain name.

You can now use these same steps to create the rest of your pages, and you will now only have one file, navigation.shtml, to update when you want to add, change or remove one of your web site’s navigational links at the top of the web site.

Bonus Tutorial: Want to make SSI work on .html pages?