How to Get Apache to Modify Static Webpages on the Fly with Ease

When maintaining a website made up of purely static HTML pages, one common challenge is how to dynamically incorporate changes or external scripts that might be necessary for functionality. For example, web analytics tools like Woopra require embedding JavaScript code on every page, which can be cumbersome when dealing with multiple static files.

In this blog post, we will explore how to effectively integrate dynamic elements into static webpages using Apache’s capabilities.

The Challenge

You might find yourself in a scenario where:

  • You have purely static HTML pages.
  • You need to include a JavaScript snippet to track web analytics.
  • Adding this code to each individual file is impractical.

The initial thought might lean towards using Apache’s server-side includes (SSI) alongside rewrites to automate the process. However, as many have discovered, this approach can often fall short.

Example Attempt at a Solution

Here’s a simplified overview of your initial attempt:

  1. You set up mod_rewrite in your Apache configuration to catch requests for static HTML pages.

    RewriteEngine On
    RewriteCond %{REQUEST_URI} !=test.shtml
    RewriteCond %{IS_SUBREQ} false 
    RewriteRule (.*)\.html test.shtml?$1.html
    
  2. You created a file named test.shtml that is supposed to include the necessary JavaScript and the original HTML content.

    <script type="text/javascript">
        var XXXXid = 'xxxxxxx';
    </script>
    <script src="http://xxxx.woopra.com/xx/xxx.js"></script>
    
    <!--#set var="page" value="$QUERY_STRING" -->
    <!--#include virtual="$page" -->
    

However, you encountered issues that prevented the desired outcome.

The Solution

To effectively modify static files on the fly, the alternative method involves using mod_filter_ext. This module allows for the processing of files through external scripts, enabling you to insert JavaScript or other dynamic content seamlessly.

Steps to Implement the Solution

  1. Enable the Required Apache Module: Ensure that the mod_filter_ext module is enabled in your Apache configuration. This module enables you to define external filter programs that process specific file types.

  2. Create an External Script: Write a short Perl script that will inject your JavaScript code into your HTML pages. Here’s a basic structure:

    while (<>) {
        s/<html>/\Q<script>....\E/;
        print $_;
    }
    
    • This script reads incoming HTML files and substitutes a placeholder with your JavaScript code.
  3. Configure Apache to Use the Script: Update your Apache configuration file to register the script for HTML files. You may add something like:

    SetOutputFilter EXT_FILTER
    FilterDeclare EXT_FILTER
    FilterProvider EXT_FILTER pulse html
    FilterChain EXT_FILTER Perl-script-name
    
  4. Test Your Configuration: After you’ve set up the filter, access one of your static HTML pages directly. The JS code should now be included dynamically in the output.

Additional Tools

  • Alternatively, you could use command-line tools like sed to perform substitutions in a similar way, although the flexibility of a Perl script may provide more control in the long run.

Conclusion

Integrating dynamic elements into static HTML pages can be tricky, but with the right use of Apache modules and external scripts, it can be accomplished effectively. Whether you choose to use mod_filter_ext or another method, the goal remains the same: to streamline your workflow while keeping your site functional.

Feel free to reach out with any questions or if you run into challenges while implementing this solution!