Coffee Space


Listen:

Site Creation V2

Preview Image

Preview Image

Why This Again?

So, here we are again. Designing a new system for automatic static page creation. Ah well, it had to happen some time.

The old system was a nice little technical feat, with a javascript file parsing the entire page from markdown to HTML in the client's browser - reliably and without crashing the browser. At the time the thinking was:

In reality, what happened is:

The point is, I started off with the best of intentions and ended up making my website less accessible. My page download time (request to render) was 0.7 seconds, which I thought was good... I had a feeling I could do better though.

So, What's Different?

The new process is in my opinion better. Let's start with some comparisons from what was previously spoken about:

How this is achieved is the files are now stored as pure markdown, with a custom script being run over the files to produce the HTML files using pandoc.

Below is the script used (for the purpose of completeness):

#!/bin/bash

# build()
#
# Build in the current directory.
#
# @param $1 The location of the style sheet.
# @param $2 The location of the navigation HTML data.
function build {
  for filename in *.md; do
    pandoc --section-divs -c $1 -B $2 -o ${filename%.*}.html $filename
    echo -n "."
  done
}

# clean()
#
# Clean the working directory.
function clean {
  rm *.html
}

# help()
#
# Display the help for this script.
function help {
  echo "bash run.sh <CMD>"
  echo ""
  echo "  ComManD"
  echo ""
  echo "    build    Build the different directories"
  echo "    clean    Clean the directory of build files"
  echo "    help     Display the help"
}

# main()
#
# Handle the main program logic.
#
# @param $@ Arguments from the command line.
function main {
  work="$(pwd)/www"
  style="http://coffeespace.org.uk/style.css"
  header="$work/header.html"
  directories[0]="$work"
  directories[1]="$work/blogs"
  directories[2]="$work/projects"
  directories[3]="$work/software"
  # Pre-build the header if required
  if [[ "$1" == "build" ]]; then
    pandoc --section-divs -o "$work/header.html" "$work/header.md_nocompile"
  fi
  # Iterate over the directories
  for dir in "${directories[@]}"; do
    cd $dir
    case "$1" in
      build)
        build $style $header
        ;;
      clean)
        clean
        ;;
      help)
        help
        exit 1
        ;;
      *)
        echo "Error: Use 'help' for more information"
        exit 1
        ;;
    esac
    cd ${directories[0]}
  done
  echo -e "\n[DONE]"
}

main $@

Notice the comments - I have no expectation of being able to remember how this works next year ;)

Then it's simply a case of getting the changes pulled from git and build automatically:

#!/bin/bash

# Infinite loop
while :
do
  # Fetch the latest changes
  git fetch
  # Check whether pull required
  if ! git diff --quiet remotes/origin/HEAD; then
    # Pull the latest changes
    git pull
    # Remove the old HTML files
    bash run.sh clean
    # Rebuild the HTML files
    bash run.sh build
  else
    echo "No changes"
  fi
  # Sleep for 5 minutes and check again
  sleep 300
done

Notice that the site is only rebuilt when there are changes pushed - this means the entire site is down for 5 seconds maximum for every push to the repository.

Conclusion

It's still very "hacky", I know - but I like it. This is run on my 3 euro ScaleWay instance and runs perfectly fine. I once purposely tried to DDoS my own server with no effect, so it should stand up reasonably well to attack.

It's redeeming features are that it's simple, easy to understand, easy to debug and easier to add hacks too. There may be better ways to do this, but from my perspective it does enough. I'm fairly happy with this system.

I'm interested in knowing your thoughts - please post your comments below!