Wordless, HAML, SASS, and Coffeescript in your Wordpress

Wordpress can be a giant pain to develop for, especially if you come from a Ruby background. The framework feels outdated and clunky compared to Rails. A lot of the reason it feels this way is the lack of integration with our favorite build tools, such as HAML, SASS, Coffeescript. If you love these tools, like I do, you should check out the Wordless plugin for Wordpress.

Wordless creates a Rails-style theme that organizes all of your assets and let's you use HAML, SASS, and Coffeescript. Then, when you're ready to deploy you can compile and compress your assets, and it converts everything to regular PHP/HTML files.

If you read my previous post about using Docker for Wordpress development, I created a fork of eugeneware's image that you can use here.

git clone https://github.com/johnthepink/docker-wordpress-nginx-wordless
  1. Open this image in Kitematic, create an app, and it will install all the depencies for you, (rvm, ruby, wordless, wordpress, nginx, mysql, etc)
  2. In your browser, navigate to your new wordpress install (Kitematic has a 'View App' icon)
  3. Fill out the info about your site
  4. Login to the admin
  5. Click on 'Appearance' and activate the wordless theme
  6. Click 'Plugins' and actived the wordless plugin
  7. Go to the root of your site and see wordless is working
  8. Develop your custom theme

Check out the Wordless documentation for more info.

Using Kitematic/Docker for Wordpress Development


Kitematic is an awesome new tool for interacting with Docker, an awesome virtualization tool. I recently needed to do some Wordpress development, and rather than install a web server, mySQL, PHP, etc., I was able to generate and run a virtual server using Kitematic that set all this up for me.

Go ahead and download Kitematic, and go through the installation process.

Kitematic uses Dockerfiles to generate Docker containers, which are small virtual environments. Dockerfiles specify an operating system, as well as a series of commands to install the dependencies, languages, and other things necessary for the environment.

If you haven't used Kitematic before, go ahead and make a docker-images directory somewhere on your computer.

mkdir ~/docker-images/ && cd ~/docker-images/

Searching Github will bring up a lot of wordpress-related Dockerfiles. I used this one, as it handles everything for you. We can clone this in to the directory we just made.

git clone https://github.com/eugeneware/docker-wordpress-nginx

Back in Kitematic, click on the 'Images' button and then 'Create Image'. Click 'Select Folder' and then select the folder you just created. It will take a few minutes to install everything.

When the image is ready, click on the 'Apps' icon, and click 'Create App'. Name the app, and select the 'docker-wordpress-nginx' image.

Once the app is ready, click the 'View App' icon and your new Wordpress install will open in your browser.

Happy Dockering!

Deploy From Github To Heroku Using Hipchat/Hubot

So you've got Hipchat running at your company, and you've heard of teams using it for deployment, but you don't want to spend money on some kind of continuous integration service. Here's a cheap way you can start using Hipchat to deploy your repositories to Heroku, or any other server.

Set Up Hubot

First, if you don't have Hubot up and running, follow these install instructions and then deploy it to Heroku. Then come back. Don't worry, it's free.

Set Up Auth Admin

Next, you will want to use Hubot's Auth feature to give yourself admin status. To do this, you will need to know your Hipchat user id. Run this in Hipchat:

@hubot show users

Your id should be to the left of your name. Next, add your id as the Auth admin by running this from the command line:

heroku config:set HUBOT_AUTH_ADMIN=<your user id>

Now, when you ask Hubot who the admin is, it should say you.

@hubot who has admin role

Set Up Deploy Role

The next thing you should do is give whoever needs the ability to deploy from Hipchat the role 'deploy':

@hubot <your name> has deploy role

Now when you ask Hubot what your role is, it should respond with admin and deploy roles:

@hubot what role does <your name> have

Set Environment Variables

The last thing we need to do before setting up our scripts is add some environment variables to Hubot's Heroku server so it can securely talk to Github and Heroku.

First, you need to generate a new RSA key pair by running this in your terminal. Name it hubot_rsa, or something like that.

ssh-keygen -t rsa
cat ~/.ssh/hubot_rsa.pub

Copy the output, and then add it to your Github settings and Heroku settings.

Next, copy the private key you just created out of the terminal output:

cat ~/.ssh/hubot_rsa

Finally, we are going to add all this to Hubot's environment variables. Make sure to user double quotes on the private key to preserve line breaks.

heroku config:set APPNAME_GITHUB_URL=<insert git-based github remote (not https)>
heroku config:set APPNAME_PRODUCTION_URL=<insert git-based heroku remote>
heroku config:set SSH_PRIVATE_KEY="<insert private key>"

Install Hubot Script

Finally, ready for scripts. Take this bad boy, create a file name deploy.coffee in Hubot's scripts directory, and paste it in.

# Description:
#   Deploy is used to deploy from git repositories to servers.
# Commands:
#   hubot deploy <repo>
# Author:
#   johnthepink

util = require "util"
exec = require("child_process").exec

module.exports = (robot) ->
  robot.respond /deploy (.*)/i, (msg) ->

    # return unless deploy role
    unless robot.auth.hasRole(msg.envelope.user,'deploy')
      msg.send 'You do not have the deploy permissions. Contact the admin.'

    repo = msg.match[1]

    # you can extend this if statement to deploy more than one app
    if repo == 'app'
      msg.send "Deploying #{repo}"

      child = exec "./deploy-app.sh", (err, stdout, stderr) ->
        msg.send err if err
        msg.send stderr if stderr
        msg.send stdout
      msg.send 'I do not know him'

Install Shell Script

Do the same for this script, but this time in Hubot's root directory, and name it deploy-app.sh.


# Mostly stolen from https://github.com/vidpresso/hubot-syncer/blob/master/pullpushprod.sh

cd /app

echo "Setting up SSH."
mkdir /app/.ssh
echo "$SSH_PRIVATE_KEY" > .ssh/id_rsa
echo "Host github.com\n\tStrictHostKeyChecking no\n" >> ~/.ssh/config
echo "Host heroku.com\n\tStrictHostKeyChecking no\n" >> ~/.ssh/config

echo "Cloning repo."
cd /app/appname

echo "Adding heroku url."
git remote add prod $APPNAME_PRODUCTION_URL

echo "Pushing to heroku."
git checkout master # makes sure there's a master branch to push.
git push prod master

echo "Cleaning up..."
rm -Rf /app/appname
rm -Rf /app/.ssh

exit 0


Hubot is now ready to push the master branch of your Github repo to Heroku. Just call him out:

@hubot deploy app

The great part about this is you can extend the deploy.coffee file to handle multiple apps, and then create a shell script for each of them. If you don't use Heroku, you could easily modify deploy-app.sh to use rsync. You would just need to add your public key to the server and your good to go.

Command Line PHP Server

I spend a lot of time in Rails and Middleman and other Ruby frameworks. But, every once in a while I need to do some Wordpress development, and switching between those two environments can be a pain if you're not careful.

My old way of dealing with this was to:

  1. Shut down Pow
  2. Start up Xamp
  3. Play around in my /private/etc/hosts file
  4. Flush my DNS
  5. etc.

That's just not ideal. Lucky enough, PHP 5.4.0 and higher include a built in command line server. This is perfect for me. All you have to do is run this from the directory you want to serve:

php -S localhost:8000

More info is available in the PHP documenation.

Being Productive

As a web developer, I earn my living based on what I can produce. I'm not paid to sit in meetings, or craft email responses; although, I have to do those things, as well. I'm paid to be productive.

I am most productive when I have long, uninterrupted blocks of time to work. However, as you may know, working from a computer all day comes with all sorts distractions these days. I've come up with a few guidelines that may seem harsh, but don't take them personally if you've tried to talk to me. This is just what I've found works really great for me.

Control Your Communication Channels

If you're like me, it's a bad day when someone calls you, leaves a voicemail, sends an email with the same information, and finishes it off with a text to let you know about their other transmissions. There are too many ways for people to contact us. You need one place to view and prioritize the endless stream of messages you receive. For me, this is ultimately email.

To try to push things towards email, here are some boundaries I try to set:

  • All work is done over email.
  • Use an online project management tool that generates emails: Basecamp
  • Never text about work.
  • If a call or meeting is necessary, schedule it over email in advance.
  • When it's necessary to have real time chat, use Hipchat, Google Hangouts or not group texting.

Texting is the most convenient and the most invasive way to contact someone. If it's about work, please email or post to basecamp or something. People need to be able to turn off after work hours. Which leads me to my next point...

Control When You Communicate

It is impossible to control when someone will communicate with you. But, you can control how and when you see it. We have taken care of the how, now here are some ways you can control when:

  • Turn your email client off, and only check it at scheduled times throughout the day. I read and answer emails after lunch, and right before I quit for the day.
  • Turn off all push notifications on your phone regarding email, Hipchat, Google Hangouts, and other work-related messaging.
  • If someone calls or texts you while you're in the zone, return their call or text when you're done.
  • Maybe even put your phone on 'Do Not Disturb', but I try to leave that line of communication open for my wife and emergencies.
  • Only keep programs on your computer open that you are using.

The goal here is to prevent as many things as possible from interrupting you. This gives you the best chance at having long periods of uninterrupted time. Aside from extreme circumstances, no single work related message is important enough that you must see it and act on it right away. In those extreme conditions, people are going to be calling you anyways.

Have Friends

Yes, you get to have friends now! A side effect of setting up these communication boundaries is that after work hours, and during the weekend, you get to be friends with the people you work with. If your coworkers text or call you about work all the time, then when they text you over the weekend about something completely unrelated you will not want to read it. Setting boundaries is healthy for you personally, and for your relationships. So, go make some friends now.