Dockerize Middleman

Welcome to part 2 of the “Add Webpack, dockerize and deploy your Middleman app to Github Pages” series!

In the last post we built an empty Middleman application locally and added Webpack as the external pipeline. Now it’s time to set up the same app but inside a Docker container to get everything ready for deployment.

Head over to the previous post to learn how to set up Webpack to your Middleman app or skip this all together and learn how to deploy your Middleman app to GitHub Pages using GitHub Actions, in part 3.

Setting up Docker

If you haven’t already, download Docker.

Create a new file named Dockerfile in your repository root directory where your Middleman app already exists. We’re going to be using a Ruby 2.6.3 image and install Node.js in it.

Open the Dockerfile file and paste the following configuration for our Docker image:

Now create another file in the same root directory with the name docker-compose.yml, open it and paste these lines:

We’ll be using port 1234 for LiveReload later.

To get the app up and running using Docker:

1. Run $ docker-compose build to build the Docker image first.
2. Run $ docker-compose up to start the container and get the environment ready.

If the last command fails, make sure you don’t have the application running locally in a previous terminal session.

Your app should still be available at http://localhost:4567/, but now running inside a Docker container!

You can stop the running container pressing CTRL + C inside the terminal.

Adding LiveReload

Let’s improve the app by making sure we don’t have to refresh the browser every time we want to see new changes. In order to achieve that we’re going to add LiveReload. LiveReload will automatically refresh the browser whenever files in the repository are modified.

With the Docker container stopped, add this line to the Gemfile:

gem 'middleman-livereload', '~> 3.4.3'

Run $ bundle install to install the LiveReload gem.

Open your config.rb file and add the following lines of code under the “# Activate and configure extensions” section, to activate LiveReload in our application:

Because we modified the Gemfile, we need to build the docker image again:

1. Run $ docker-compose build
2. Start the web container again running: $ docker-compose up

Try modifying any css property to quickly see LiveReload in action. The browser should refresh the preview automatically.

Great!

Now the application is all set and ready to be deployed.