Creating a Basic Webpage with html5-boilerplate

Here’s how I put together a basic personal homepage that is accessible, reads well on mobile devices, and follows current HTML5 and CSS3 best practices.

Framework

The first step was to survey the current crop of HTML5/CSS/Mobile frameworks. Leading the pack is html5-boilerplate. This is a full-site solution, including things like a .htaccess with smart defaults and a build script that automatically optimizes html/css/js/images for the web. It has decent documentation, including several videos which I couldn’t bring myself to sit through, so I just dove in and started working.

Obtain html5-boilerplate from GitHub and create a branch for your site. The GitHub version is up-to-date and branching makes it easier to merge future updates. My branch is called “homepage”.

git clone https://github.com/h5bp/html5-boilerplate.git
git checkout -b homepage

Content and Styling

The main files you’ll modify for a simple static site are index.html, css/style.css, all the favicon-y images, and humans.txt. For index.html be sure to add your information to the title and description tags and modify the Google Analytics id section.

The CSS is based on progressive enhancement, where the default CSS is minimal and targeted at a low-resolution and bandwidth mobile device. This is the first section of CSS in style.css, and then for larger-screen devices (presumably with more bandwidth and processing power) you later introduce extra styling in the @media sections.

My site has a top-to-bottom linear layout of all items by default. As the browser window width increases, an image is floated alongside the text and we accept the extra overhead of loading a background image tile. I chose the background from the site Subtle Patterns and the color pallet with the help of Color Scheme Designer.

Publish

When the site is ready to go, use the ant build script to generate the web-optimized site. This will create a publish/ directory that is ready to be placed on the server. On Ubuntu, the build required the Oracle JDK, rather than the OpenJDK that comes installed by default, to avoid seeing an error message.

I wanted to manage deployment via git, so that I would have an fast way to rollback changes and that didn’t require re-building the site. I created a git repository in the publish directory (it is .gitignore‘d by the parent project) and pushed it to my remote server. On the server, I cloned the repository directly into my web directory. The html5-boilerplate .htaccess prevents access to dotfiles, so the .git information is safe. I use the hash from the development repository branch for the commit message in the publish repository.

Unfortunately, by default, the html5-boilerplate build script deletes the publish directory, wiping out the git publishing repository. To fix this, I replaced the line in build.xml:

<delete dir="./${dir.publish}/"/>

with:

<delete dir="./${dir.publish}/" includeemptydirs="true" defaultexcludes="false">
<exclude name=".git/**" />
</delete>

Workflow

The process for updating my webpage is:

  1. Make changes to development branch
  2. ant minify
  3. local: git add/commit/push
  4. remote: git pull
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: