Deploying Middleman Sites on Hatchbox

I recently migrated the majority of a lot of my Rails applications over to Hatchbox from Heroku. It’s far cheaper and the speed of the sites has drastically improved. The speed of the sites is orders of magnitude faster (I’m hosting with Digital Ocean via Hatchbox). Furthermore, the cost savings is astronomical. Win win all around.

I also have moved over all of my static marketing and documentation sites over to Hatchbox as well.

My marketing sites for Listomo, Acropedia and Agilevent are all built using Middleman. Listomo’s API Documentation is also based on Middleman.

Middleman is a static site generator written in Ruby. You need to tell Middleman to compile the files and have a server serve them in order for for the site to deploy.

Here’s how you can set this up with Hatchbox and automate all your deployments every time you push to your git repo, meaning that the only thing you need to do is a git-push and the updated static site is live seconds later.

Setting up Your Hatchbox App and Connecting it to Git

In Hatchbox, set up a new app. Then go into the repository section and connect to GitHub and set your repo:

Save your changes.

You’re not done yet, one more step, we still need to tell Hatchbox how to build the static site for us and copy it to the right place so it can be served.

Click on “Dashboard”, then click “Edit”:

In the “Custom Build Script” box, you’ll want to put this code:

bundle install
yarn install
bundle exec middleman build
cp -r build public

Save your changes and that’s it!

Deploying Your Site

You can now click on “Deploy”. The first deploy will take awhile (multiple minutes) as its setting up the environment. Subsequent deploys will take less than a minute.
Your site will not be live on the domain you specified in your app settings or via the “View App” button.

Automating Deployments on Git Push – CI/CD Your Static Site

If you want to automate deployments of your static sites you can easily do that too.

Back under the “Repository” section of the app in Hatchbox, scroll down to “Automatic Deploys” and click “Enable Automatic Deploys”.

Now, then next time you push code to GitHub on the main branch, Hatchbox will pick up those changes, run the custom build script and deploy those new changes for you and your changes will be live in seconds.