Archived Design Uncategorized

HTML5 Boilerplate – Quick setup script

Recently I’ve been setting up new websites left, right and center.  These have been almost exclusively for testing purposes and, since I’ve been basing them all off Paul Irish’s HTML5 Boilerplate, I needed a quick way to get a new site template up and running.

Enter automation

I set about making a quick script to automate the process of setting up a new website template based on the boilerplate (which I’ll refer to as h5bp from here on).  The steps it goes through are as follows (Bash-specific but could be retro-fitted to Windows without too much trouble).

  • Checks to see if git is installed.  This is required as the latest h5bp version is available from github.
  • If git isn’t installed, the script will fail gracefully and provide instructions on how to install git.

      • Checks for a single parameter.  If found, the script will use this as the name of the directory to create the project in, relative to “.”
      • If no parameter is specified, the destination folder is setup to a folder named after the current date and time.
      • Checks to see if the destination folder exists (almost impossible if using the date and time method).  If it’s not found, it is created.
      • Initialises a new git local repository in the new project directory.
      • Clones the latest h5bp version into the project directory.
      • Clones the latest h5bp ant build script into the project directory,
      • Cleans up the directory structure a bit, e.g. renames the ant build script from “ant-build-script” to “build”  I’ve found this to be a required step before the build script will run properly.
      • Converts the h5bp markdown documentation to HTML, if pandoc is found on the local system.
      • Does a bit more cleanup and moves some non-critical files into a directory called “_exclude”
      • Configures some global git options, i.e. the user name and user email address.
      • Adds all the project files to the new git repository.
      • Does a full commit of the new files.
      • Finishes up with a small message showing some steps that may be helpful to new users.

    Care to share?

    Sure.  If you’re interested in the script, here it is in its entirety.  On my system I have it installed as an alias by putting into ~/.bash_profile inside a function called h5bp.  If you want to use the script in a stand-alone way, that works fine, too.  For the purposes of this article, I’ll show the code in its function-based form.

    The script

     # function to create a new website based on the HTML5 BoilerPlate ( function h5bp { if [[ -z `which git` ]]; then echo " The git binaries were not found on this system and are required before this script will run properly." echo " If you are sure git is installed, please investigate why the 'git' command wasn't found, then try again." echo " To do this, you can try running "echo `which git`" (without the double quotes but keep the single ones!)." echo " If you don't have git installed, please download and install it by following the instructions located at" else echo "git binary found at `which git`." echo "Creating new website." if [ -z $1 ]; then newFolderName=`date +%Y-%m-%d_%H-%M-%S` echo "No folder name specified, using current date and time: $newFolderName." else newFolderName=$1 echo "Using '$newFolderName' as destination folder." fi if [ ! -d $newFolderName ]; then echo "Destination folder not found, creating it now." mkdir $newFolderName cd $newFolderName else cd $newFolderName fi echo "Initialising new git repository in `pwd`." git init --quiet echo "Getting latest h5bp build from github." git clone echo "Getting latest h5bp build script." git clone echo "Moving files into place." mv html5-boilerplate/* ./ rm -Rf html5-boilerplate/ mv ant-build-script/ build/ mkdir _exclude/ if [[ -z `which pandoc` ]]; then echo "Unable to convert the file to HTML for viewing. You can fix this by installing 'pandoc' from" else echo "Converting markdown documentation to HTML." pandoc -o readme.html mv readme.html _exclude/ fi mv _exclude/ echo "Setting git global options." git config --global "Put your name here" --quiet git config --global --quiet echo "Adding new files to new git repository." git add * echo "Running initial project commit." git commit -m "Initial h5bp project creation" --quiet echo "" echo "You should edit humans.txt in the '$newFolderName' directory before going any further." echo "Also, if you're not familiar with how to use the h5bp, you should go through the readme file in the _exclude/ directory (, or readme.html if you have pandoc installed)." echo "" echo "Done!" fi } 

    Can we see it in action?

    Of course you can.  I’ve recorded the script in action and put it up on YouTube – see below.  To view the video in HD so that your viewing experience doesn’t suffer from small-video-itis, I’d highly recommend watching it on the YouTube website (opens in a new window).