Deploy a static subdirectory to GitHub pages

Update 8 Feb 2015

I came back to some projects after many months where I had used this method, and I was running into errors complaining about COMMIT_SHA is not an ancestor of commit when running the git subtree split command. I did some more research and found what I think is a superior method in the form of this shell script. The new method also allows the build directory to not be checked in to the git repository which I think keeps things cleaner.

So I packaged the shell script as an npm module so it can be installed to devDependencies and used it the same way as the previous method.

npm run-script

npm allows you to add arbitray commands to your package.json file and run them with npm run [command].

Here is a set of scripts that can be used to easily deploy a subdirectory of any project to the gh-pages branch on GitHub. This is useful for when your master branch is used to build a static site, but you need the static files to end up in the gh-pages branch.

There is one assumption:

a file build.js will output static to a directory _built/.

If that is true, then running npm run deploy will build your files, commit them and deploy them to the gh-pages branch. Simple!

package.json (new git-directory-deploy method)

First make sure the module is installed by running npm install git-directory-deploy --save-dev

  "scripts": {
    "build": "node build",
    "deploy": "git-directory-deploy --directory _build --branch gh-pages"

package.json (old git subtree method)

  "scripts": {
    "build": "node build",
    "commit-built": "git add _built -A && git commit -m \"_built files at `date`\" -n > /dev/null 2>&1; exit 0",
    "ghpages": "git subtree split --prefix _built/ -b gh-pages && git push -f origin gh-pages:gh-pages && git branch -D gh-pages",
    "deploy": "npm run build && npm run commit-built && npm run ghpages"

Finding All Your npm v0 Packages


Find all your v0 npm packages.

Lately, there has been some Twitter conversations about semver and v1. Here are some tweets from @izs whose opinion I trust when it comes to matters of packages and versioning.

My Modules

I had 20 or so 0.x.y versioned modules on npm. And all of them had been published using the "0.x escape clause" mentioned above. That was something that I really wanted to change.

The more I thought about it, I wasn't being a good module citizen. If I publish something to npm, I want it to be as useful as possible to the community, and I want people to be able to use it confidently.

npm 0.x.y Package Finder

But I wanted a way to easily see all my modules that were v0. So I built this.

You should be able to enter your npm username and see a list of all modules that are v0. I recommend taking a look at the project on GitHub (or wherever the issues are) and seeing if there are open issues. If there are, you can make a v1 milestone issue and list the things that you would like to have finished before publishing v1.

Updating to v1

If all you want is a simple one-liner that you can run in any package repo to update it to v1, here you go:

git pull && npm version major && git push && git push --tags && npm publish

I just did that for many of my modules, where I still liked the API and didn't feel anything needed to be changed. And if I do need to change APIs in the future, well that's what v2 if for.

Beep Boop: Ringing an R2D2 Telephone with Obihai, Asterisk, and Node

the R2D2 phone

I got this R2D2 telephone as a gift when I was in 6th grade(-ish). I used it in my room as a real telephone as a teenager, even though the handset was the most uncomfortable and least ergonomic handset imaginable. The ringer is the iconic R2D2 noise which will never stop being epic to me (maybe this is just because my name is Luke). In short, I love this phone.

The problem is I haven't used a hard phone in years, so it's been sitting on my desk as a piece of art. I've always planned on finding a better use for the talented droid, but never got around to it.

Then I saw this Twilio post about setting up a hard phone powered by their service. Even though I didn't want a hard phone (or to use Twilio), I still loved the hack. And then it dawned on me, I CAN JUST MAKE THIS PHONE RING. I thought it would be amazing to use the R2D2 ringer as a notifcation for events on my computer. And it was.

Read more

Symbolset and Bootstrap 3 Buttons

I've been using both Bootstrap 3 and Symbolset icons on a project, and I noticed the when using the icons inside buttons there are two issues:

  1. The icons look too big
  2. They are not aligned vertically

I wrote some very simple LESS code which I think makes them look much better.


Before and after: Symbolset icons inside Bootstrap buttons


.btn {
    .ss-icon {font-size:  @font-size-base - 2; vertical-align: middle;}
    &.btn-xs .ss-icon {font-size:  @font-size-small - 3;}
    &.btn-sm .ss-icon {font-size:  @font-size-small - 2;}
    &.btn-lg .ss-icon {font-size:  @font-size-large - 2;}

Tweet Your Bracket: What the Heck?

For the past two years, I've run a small project called Tweet Your Bracket. It started out as (and still is) just a crazy idea that I was passion about, so I did what I usually do in that scenario: quickly write some (messy) code.

The original (semi-)techincal write-up is over on the TagSoup blog and all of the original code was committed to this gist.

Read more