baf.zone

This is the source to my website. It presently contains a simple homepage and my blog. In the future, it will gobble up projects.baf.cc and have whatever other content I come up with added to it.

The site itself is statically generated. I'm using Wintersmith to do the heavy lifting in that department, along with an extended version of the blog plugin provided by the Wintersmith examples.

For hosting, I'm simply deploying the site to Amazon S3, with CloudFront wrapped around it for speedy CDN caching/HTTPS.

To manage all of the tasks involved in deploying the site, I am utilizing Grunt.

Deployment

To build and deploy the site, a grunt-aws.json configuration file will need to be created, containing the following:

{
	"key": "AWS KEY",
	"secret": "AWS SECRET",

	"stagingOptions": {
		"bucket" : "staging deployment bucket"
	},

	"productionOptions": {
		"bucket": "production deployment bucket"
	}
}

This file is ignored by .gitignore, so it won't be accidentally committed.

• To run a preview server on localhost:8080, run grunt preview.
• To deploy to the staging environment, run grunt deploy-staging.
• To deploy to the production environment, run grunt deploy-production. Deploying to production will create a new Git tag marking the deployment.

Wintersmith

Organization

Things are organized as follows:

• build/ - whatever the last build of the site was. This is generated by Wintersmith (either manually or via Grunt), and is not committed to Git.
• contents/ - the main contents of the site.
  • blog/posts/ - blog posts. Each post gets its own folder, with an index file for the actual post, and any additional assets associated with that post. Front-matter includes the post title, tag list, and old Tumblr permalink (for posts that I carried over from my old blog).
  • components/ - not used at the moment. This folder was intended for any dependencies that I choose to include using Bower.
  • css/ - CSS for the site. I'm using a Stylus plugin for Wintersmith here, but plain old CSS will work just fine (or any other CSS plugins).
  • js/ - JS for the site. I'm using CoffeeScript here, but plain old JS will work (and, of course, any plugins that generate JS).
• plugins/ - custom Wintersmith plugins (documented further below).
• templates/ - Jade templates for the site.

Plugins

NPM

The following plugins are included from NPM:

• wintersmith-coffee - provides CoffeeScript compilation for content.
• wintersmith-stylus - provides Stylus compilation for content.

Custom

There is currently one custom plugin in use.

Blog

The Blog plugin is loosely based on paginator.coffee from the Wintersmith blog example. I've extended it a bit to add new features.

Currently, it:

• Generates the blog listing pages.
• Generates JSON files that mirror the listing pages (for possible future use in implementing infinite scrolling)
• Generates tag listing pages.
• Generates redirect pages at URLs mirroring the old Tumblr permalinks, where necessary.

Other NPM Modules

A few other NPM modules are included. Most notably,

• moment.js - provides nice timeago functionality.
• nib - a nice Stylus plugin that deals with browser prefixes for CSS.
• typogr - typogrifies markdown content in a nice fashion.

Grunt

I'm using Grunt to pick up where Wintersmith leaves off. Grunt is used for scripting all of the various tasks that need to be done.

Grunt Tasks

The following Grunt tasks are loaded from NPM:

• grunt-contrib-clean - for cleaning the build output
• grunt-contrib-cssmin - for minifying/uglifying production CSS
• grunt-contrib-htmlmin - for minifying production HTML
• grunt-contrib-imagemin - for optimizing/minifying production images
• grunt-contrib-uglify - for minifying/uglifying production JS
• grunt-git - for integration with Git (currently used for creating tags)
• grunt-hashres - to add a hash to every filename to allow for long cache lives without worry about contents changing
• grunt-s3 - for uploading the actual site content to S3
• grunt-wintersmith - for integration with Wintersmith

The following tasks are registered to manage everything:

• preview - just runs wintersmith:preview to start up a preview server
• pre-build - handles any pre-build tasks
• post-build - handles any post-build tasks
• build - builds the site, chaining in pre- and post- build tasks
• deploy-staging - deploys to the staging S3 bucket
• deploy-production - deploys to the production S3 bucket and creats a Git tag marking the deployment.

grunt-s3

I've made a bugfix to grunt-s3 related to globbing. The fix has been merged upstream, but, as of 5/28/2014, has not been released on NPM yet. Due to this, I'm loading grunt-s3 via a submodule reference for now.

For this to work properly, you'll need to:

• git submodule init in the root of the repo
• npm install --production in the grunt-s3 subfolder

Afterwards, grunt will work properly.