Making a static site more dynamic

Since our website now has a brand new blog it’s now time for our first ever blog entry! And what subject would be better than blogging about the development of this new feature.

First of all let me describe some technical backgrounds of this site. Though this site was containing some “dynamic” features like a newsfeeds or a sitemap everything on the server was deployed as a bundle of static HTML pages (this has changed a bit now), CSS style sheets and some JavaScript. So all you needed to run this site was a simple HTTP-Server, no need for a server side language like PHP or ruby.

This was done by using nanoc a ruby site compiler which generates the final pages using some templates and some scripts. It’s a very interesting project and it’s a good content management alternative (I also call it a coders CMS :-)). There is a new version coming soon so it might be good start to give nanoc3 a try.

The good thing by this approach is that as soon you have set up your site you only have to deal with simple Markdown text files for the content creation. For testing you can use the build-in autocompiler which is basically a little webserver which compiles your changes as soon as you reload your browser. When your done you fire the rake build script and our site is build for production and uploaded to the live server.

For the new blog feature this approach would be still enough. But for the comments section of the blog we had to put some code on the server side. As nanoc of course can also generate PHP pages this seemed not like a big deal but as the autocompiler can’t handle php we had to change the development environment drastically.

First of all we had to use another webserver for development. On the Mac the first choice was MAMP which contains a complete Apache, PHP, MySQL setup targeted for development. If you are on another platform you might have a look at XAMPP.

As our site uses a directory for every page (links look like e.g. /blog/) we first had to change the DirectoryIndex to enable apache to load our new PHP index pages. This is done in the conf/apache/httpd.conf file in the MAMP application directory.

DirectoryIndex index.html index.php index.shtml

The next step was to tell nanoc that index.php is actually an index. This can be done in the site config ( config.yaml ) by changing the index_filenames entry to:

index_filenames: [index.html, index.php]

After this we where able to generate and test PHP pages and started to integrate TalkBack as the comment engine into our site. As we now had to compile the site after each change by hand we wrote some scripts to automate those tasks at least a little bit. First of all we used some AppleScript to automatically refresh the browser:

on run
  tell application "Safari"
    activate
  end tell
  tell application "System Events"
    tell process "Safari"
      keystroke "r" using {command down}
    end tell
  end tell
end run

And then we extended our build script with a new task which first compiles the complete site and then refreshes Safari and shows us the changed page:

desc "Compile site and refresh safari"
task :refresh => [ :compile] do
  system 'osascript tasks/refresh.applescript'
end

Of course this is not as elegant as the old autocompile solution but we have to use the new technique only for the blog pages at the moment. All other pages can still be tested the old way.

The good thing is we still have the cool features of a static website like fast page loading, search-engine friendly links (plus many others) and on the other hand we now can include dynamic pages wherever we need them.