Dynamically generate a static web site

Jan Stocker <Jan.Stocker@t-online.de>

Abstract

This is a short article about a method to create a static web site in a Content Management System manner. It uses a small PERL script to merge content with a separate layout file.

Introduction

My web site is made of static web pages, but on all pages you can see the same title, menu and footer. You will say, pah, why don't you use PHP and here you go. But my provider doesn't give me access to server scripting for the money I've paid.

The only solution is to use frames, which I wouldn't, or to copy the main framework to each of the pages. I have made a make-shift-CMS PERL script to do this in a dynamic way.

I didn't have the time to investigate all those real content management systems out there. I just needed a thin feature-less gadget in a short time period and none of those over-dozed applications.

I chose PERL for this because I had some experience with it, it is installed nearly everywhere. Also, you can use regular expressions in an easily.

First step

First I created something similar to PHP includes. So you can build a file for each part and include them later in the the finished HTML page.

This implementation still exists and can be used, like all other tags in this article, in a recursive way. Let us assume we have a heading, a menu and a footer beside the main text, so you can create single files for each part and include them later.

My pseudo tag is named <fw> for framework and must be used with an attribute "include" to include other files. An extract for my example could be:

<fw include="head.html" />
<div><fw include="menu.html" /></div>
<div>This is the main text</div>
<fw include="footer.html" />

The file path used in any of the tags is relative to the file where the tag is written in. Please note: This is not a real URL, it is parsed by the PERL script and "/" means the root of your local system and not the web sites root dir.

Template-Content architecture

So far, this really does not fit my goals about splitting content from code. It also has another weak point: You can not easily add or remove another container, i.e. an advertisement on the right. In this case you need to edit all the files and insert a new <fw include=""> tag.

I was thinking of using one file, let us call it a template, containing all framework elements we previously called the heading, menu and footer. With a special command we can define the place where the real content should be inserted. The other file only contains the content itself. With this architecture we can alter all the surroundings in one file and move the main text to the place where it should be.

Creating a template

A template should be built of all display elements not connected with the main texts and displayed on each page. As mentioned before you need to mark the place for the text. This is done with a print tag

<fw print="name" />

For a name you can use anything that suits your need, you only need to remember this for later definition. If you have a look at my FreeBSD site www.shellbang.org you find the common things I already used in my earlier example but you will also notice that each page has its own title shown in the web browsers window and it has some hidden <meta> tags for search engines. These HTML definitions need to be put into <head></head> and you have to define at least two blocks.

Our example template will be structured like this:

<html>
  <head>
    <fw print="head" />
  </head>

  <body>
    <h1>HEADLINE</h1>
    <div>Menu bar</div>
  
    <div><fw print="content" /></div>

    <p>Footer</p>
  </body>
<html>

The content files

This script is designed to be used with more than one template, so a text file is started with the template definition.

<fw use="template.html" />

Like the include tag the path is relative. Now we know the template, the next step is the definition of the content we used before. This is done by using <fw define="name">Content</fw>, for our example we need "head" and "content":

<fw use="template.html" />

<fw define="head">
<title>Example</title>
<meta />
</fw>

<fw define="content">
<p>This is the main text. You can enter <b>what you want</b>.</p>
</fw>

Making the distribution

Last but not least is the PERL script. It copies all the files from the source directory to the destination directory. All .html files will be examined and the fw tags will be processed. The result is a new file in the destination directory with the same name. The directory structure and all other files are copied, so you have created the complete web site.

createsite [options] <source> <dest>

where options can be:

-dm <dm> | -dirmode=<dm>       directory creation mode (0775)
-fm <fm> | -filemode=<fm>      file creation mode (0664)
-ed <ed> | -excludedirs=<ed>   exclude dirs, comma separated 
-ef <ef> | -excludefiles=<ef>  exclude files, comma separated
-f <f>   | -htmlfiles=<f>      html files, comma separated ("*.htm;*.html")
-noprocess                     ignore html files
-nocopy                        ignore non html files
-v                             verbose: copy and process msgs)
-v -v                          verbose: copy, process and ignore msgs
-v -v -v                       verbose: above and process tag msgs

Conclusion

This small script helps anyone without server scripting abilities to reduce the work.

Copyright

(C) 2004 Jan Stocker
Redistribution of this text is permitted as long as the copyright is retained and all text altering is marked by author and date.

Version 1.0 - 2004-08-18

FreeBSD

Misc.