This tutorial describes how you can create a basic static website project (for example, a blog) with Middleman, and how to connect and deploy the project with Bitrise.
Creating & cloning a repository on Github
First, you need to sign in with your Github account, or sign up if you don’t have one yet.
Let’s see the tools you need to install and use Middleman.
Middleman is distributed using the RubyGems package manager. This means you need both the Ruby language runtime installed and RubyGems to begin using Middleman.
MacOS comes prepackaged with Ruby, however, some of Middleman’s dependencies need to be compiled during installation. On macOS that requires Xcode which you can install via the Mac App Store. Alternatively, you can just install the Xcode Command Line Tools, that should be enough if you don’t want to install the full Xcode app.
Once you have Ruby and Xcode (Command Line Tools), execute the following from the command line:
gem install middleman
This will install Middleman, its dependencies and the command-line tools.
Creating a Middleman project
Now that you have installed Middleman, let’s create a new Middleman project!
-
Navigate to the root folder of your repository and execute the following from the command line:
middleman init my_new_project
-
Once the setup has finished, commit and push your changes.
Connecting your repository with Bitrise
Before you start, make sure you’re signed up to Bitrise either via your git provider or email.
-
Log into bitrise.
-
Click + on your Dashboard to add a new app.
-
Connect a provider (in this case, GitHub). You will see a list of all your repositories on GitHub.
-
Select the repository you just created.
-
Next you will get an alert, since the repository you are connecting is not an Xcode project. Select Configure Manually, then enter the branch name master.
-
Once you created your project, select it in the Dashboard.
-
Go to Workflow Editor.
-
Delete all the automatically created steps (if any).
-
Add new Steps in the order below by clicking the + sign.
-
Select the Script Step and add the following lines:
#!/bin/bash
set -ex
bundle install
bundle exec middleman build --verbose
The above code installs the dependencies specified in your Gemfile, and runs a Middleman build on the virtual machine.
Now we are going to add and customize an Amazon S3 bucket sync to the workflow steps.
-
Go to your workflow.
-
Click + to inject the Amazon S3 bucket sync Step from the StepLib to your workflow.
-
Configure the Amazon S3 bucket sync Step:
-
Enter your AWS Access Key, AWS Secret Key and the name for your S3 bucket.
-
Add your local path which should be: $BITRISE_SOURCE_DIR/build/ (This will select the contents of the build folder in the project source path on the virtual machine. It will be uploaded on every build.)
-
Add public-read or private to Access Control.
Alternative deploy targets
You can of course use Heroku, GitHub pages or any other service as your deployment target.
Once the configuration of your Workflow is complete, you can run a build manually by clicking on the Start/Schedule a build button on the app’s page.
If you chose GitHub when adding your repository, each code change (commit) on GitHub will automatically trigger a Bitrise build. Otherwise you can find more information about how you can setup a Webhook, to trigger builds automatically for code push, pull request and tags here.
