Cool Wintersmith Continuous Deployment

Wednesday, Mar 23, 2016

Wintersmith describes itself as a “flexible, minimalistic, multi-platform static site generator built on top of node.js.” Aerobatic itself is built with node.js, so it’s only natural that we’d extend our static site auto-build feature to node.js based generators. So, starting today, Aerobatic now builds, deploys, and hosts Wintersmith sites!

In addition to Wintersmith, we also auto-build Hugo and Jekyll sites.

Getting Started

Wintersmith has a nice quick start guide on its site. So, we’ll just cover the basics in this post.

If you haven’t already, go ahead and install Wintersmith on your machine and build a sample site:

npm install wintersmith -g
wintersmith new site-name
cd site-name
wintersmith preview

This will fire up your browser at http://localhost:8080 and you can now start editing your site.

When you’re ready, you can then enter wintersmith build to create your compiled static assets in a /build directory. However, because Aerobatic builds Wintersmith sites automatically, you don’t need to do this step. In fact, we’ll add the /build directory to a .gitignore file:

/build
/node_modules

Enabling Automated Builds

Next, we’ll edit the Wintersmith package.json file to include the Aerobatic build information. Here’s the snippet you’ll add:

{
  "_aerobatic": {
    "build": {
      "engine": "wintersmith"
    }
  }
}

If you’re following the Wintersmith getting started tutorial, your entire package.json should now look as follows:

{
  "dependencies": {
    "moment": "2.3.x",
    "underscore": "1.4.x",
    "typogr": "0.5.x"
  },
  "_aerobatic": {
    "build": {
      "engine": "wintersmith"
    }
  },
  "private": "true"
}

Create repo

We’re now ready to create a git repository and push it to Bitbucket:

# initialize new git repository
git init

# commit and push code to master branch
git commit -a -m "Initial commit"
git remote add origin git@bitbucket.org:YourUsername/site-name.git
git push -u origin master

Your Bitbucket respository should now look similar to this:

Wintersmith repo screenshot

Create website

Now that we’ve pushed our code to Bitbucket, we can then create our website. We’ll assume you’ve already installed the Aerobatic add-on for Bitbucket. So, in Aerobatic, go ahead and create your site:

Aerobatic create website screenshot

Once you’ve done that, less than 20 seconds later, your site will be live, and you can even view the build log if you wish:

Wintersmith build log screenshot

Editing in Bitbucket

One neat thing about Aerobatic auto-building Wintersmith sites is that you can now just author and edit posts directly in Bitbucket, make a commit, and Aerobatic will automatically deploy a new version of your Wintersmith site for you.

Wintersmith edit in Bitbucket screenshot

Summary

If you haven’t hosted your sites before with Bitbucket and Aerobatic, it’s easy to get started. We’ll have your site live in less than a minute.

Here’s a link to the demo repo, that we referenced in this tutorial. Feel free to fork it!