The thoughts of Matthew Crist, a designer in Boston.

Jan 4, 2015

How-to: Host a Middleman Blog on Divshot

This blog is powered by Middleman, which is a static site generator. I’ve used Middleman on many sites and prototypes for clients. Typically, I’ll deploy it to S3, Github pages, or even Heroku on occasion. I’ve started using Divshot recently and have been very pleased with the performance of their static site hosting.

Here is a rundown of how my setup.

The first step is to get an account on Divshot. Once you have an account, you will need to install the Divshot command line tools using NPM (see this for help installing NPM).

npm install -g divshot-cli

This will install Divshot for you in the global scope. Now you will need to login to Divshot from the command line using this within your shell.

divshot login

Once you have logged in, you can get Middleman up and running. If you are not currently using Middleman, you will need to install it using Ruby gems.

gem install middleman
gem install middleman-blog

Now create a new Middleman blog with this.

middleman init BLOG_FOLDER_NAME --template=blog

This will create a directory for you with all of the files necessary to start building a new Middleman powered blog. Setting up Divshot can now be done using this.

divshot init

This will ask you a few questions and add a file called divshot.json to your project with the configuration. During the setup process, you will want to set the build directory as the deployment directory.

Building and deploying the blog can now be done using these commands in the shell.

middleman build
divshot push

This will push the files to Divshot under the development environment. This is a fairly good basic setup, but you’ll want to use some form of source control for your blog. In my case, I am using Git hosted by Github.

Because I’m using Git, I am able to employ Codeship which can automate the process of deploying for me. Essentially, I am lazy and having to build, push, then commit and push to Git is far too many steps for me. Codeship makes it easy for me to simply push to Github and then have a fully deployed site in a couple of minutes.

To get deployments setup, you will need an account on Codeship. Once that is acquired, create a new project for your blog and go to the project settings > environment page. An environment variable to handle the auth token for Divshot needs to be setup. Get this token with this command.

divshot auth:token

Then create a variable named DIVSHOT_TOKEN and copy/paste your token from your shell.

Click save and move to the test screen. Under setup commands paste this.

bundle install
middleman build

This tells Codeship that you want to install your gems and have Middleman build your blog. This will create a build directory in the Codeship environment.

Now go to the deployment page and create a new Custom Script deployment. Paste these two lines.

npm install -g divshot-cli
divshot push production --token $DIVSHOT_TOKEN

This tells Codeship to install the Divshot command line tools into their environment and then push your blog to production using the token set on the environment page.

Your blog should be up and running on Divshot now. Reach out on Twitter (@matthewcrist) if you have any trouble (or I made a mistake — which is more likely).