Site reboot part two: building the static pages._

🇺🇦 Resources to help support the people of Ukraine. 🇺🇦
September 19, 2016 @16:00

I have actually been building the static content of the site from a python(1) script for a while, though until recently it ran from cron(8) and rebuilt all the pages every hour. This wasn't too bad since there were a few internal pages that also got rebuilt, including my graphing pages that are built from SNMP queries of various network gear.

So a little bit about the page generation. The script uses the Cheetah Template engine to assemble the files for each static page. There is some logic in each template to ensure the proper elements are included based on which page is being created.

ScreenShot of code.html

For example code.html is made up of 4 files.

  1. header.html.tmpl - This is not visible, it is everything up to the closing head tag.
  2. nav.html.tmpl - This is the nav element, including the other page buttons. This is actually even included on the index.html page but it hides itself since it knows it is not needed.
  3. code.html.tmpl - The content of the page.
  4. footer.html.tmpl - the footer element and the closing body and html tags.

This lets me build a wide variety of content out of the same style. There are configuration provisions in build.py that allow me to add additional JavaScript and CSS links in header.html.tmpl if I need to. This is used by the network information page to include additional style and the JavaScript that allows for dynamic hiding of the lists.

        elif page == "network.html.tmpl":
            extras["custom_css"] = [
                '/css/lists-ok.css',
                '/css/network.css'
            ]
            extras["custom_js"] = [
                '/js/jquery.js',
                '/js/network.js'
            ]

The whole build process is fired off by the following post-receive hook in git.

#!/bin/sh
# going-flying.com post-receive hook
# (c) 2016 Matthew J. Ernisse <matt@going-flying.com>
# All Rights Reserved.
#
# Update the on-disk representation of my website when I push a new
# revision up to the git repository.

set -e

BUILD_DIR="/var/www/going-flying.com"
GIT_DIR=$(git rev-parse --git-dir 2>/dev/null)
REV=0

if [ -z "$GIT_DIR" ]; then
    echo >&2 "fatal: post-receive GIT_DIR not set"
    exit 1
fi

echo "updating $BUILD_DIR"
GIT_WORK_TREE=$BUILD_DIR git checkout -f

echo "building html from templates"
$BUILD_DIR/build.py

while read oldrev newrev refname; do
    REV="$newrev"
done

echo "optimizing JPGs."
find "$BUILD_DIR" -name \*.jpg -print0 | xargs -0 jpegoptim -qpst

echo "optimizing PNGs."
find "$BUILD_DIR" -name \*.png -print0 | xargs -0 pngcrush -reduce \
    -rem alla -q -dir "$BUILD_DIR"

echo "setting rev to $REV"
sed -e "s/GIT_REV/${REV}/" "$BUILD_DIR/index.html" > "$BUILD_DIR/index.html.new"
mv $BUILD_DIR/index.html.new $BUILD_DIR/index.html

echo "site deployed."

The result is that a git push looks like this:

Counting objects: 11, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (11/11), done.
Writing objects: 100% (11/11), 195.70 KiB | 0 bytes/s, done.
Total 11 (delta 2), reused 0 (delta 0)
remote: updating /var/www/going-flying.com
remote: building html from templates
remote: optimizing JPGs.
remote: optimizing PNGs.
remote: setting rev to 3ac149f570d379bf71ed78a7734042af2200591a
remote: site deployed.
To git@repo.ub3rgeek.net:going-flying.com.git
   197843c..3ac149f  master -> master

It works pretty well, allows me to serve static files, have a long Expires: header and in the end causes the pages to load reasonably fast.

First test using GTMetrix from San Jose

Result of GTMetrix Page test

Even if I test from Australia using PingDom...

Result of PingDom Page test

Next time we will talk about the gallery generator. In the mean time... 🍺

Comment via e-mail. Subscribe via RSS.