Serving a Static Website with Nginx

In this tutorial, you will:

  • Download and run a web server container
  • Explore the container’s website data natively on your Mac
  • Use volumes to modify the website data

In this example website we’ll be serving the popular 2048 game, as shown below. Let’s get to it!

screen shot 2015-03-03 at 5 01 41 pm

Running the Nginx Web Server Container

First, download and start Kitematic if you haven’t yet done so. Once you’re in, the app should look like this:

screen shot 2015-03-03 at 4 56 14 pm

Click on the Create button of the hello-world-nginx listing as shown above. This will download and run a tiny Nginx web server in a container via Kitematic, allowing you serve website data on your Mac.

screen shot 2015-03-03 at 4 58 48 pm

Once it’s done downloading you should see a quick preview of the example website that comes with the container, as shown below. Click on the preview to see the result in your own browser.


screen shot 2015-03-03 at 5 43 47 pm

What just happened? Kitematic downloaded the kitematic/hello-world-nginx image from the Docker Hub and then created and ran a Docker Nginx container from this image.

Viewing the Website Data in Finder

This container exposes website data via a Docker volume. Kitematic makes managing Docker volumes easy - you can edit the data in Finder or with your favorite text editor. By default, Kitematic places volumes under ~/Kitematic but you can change this in the container settings. To access the files via finder, click on the in-app folder icon for a container:

screen shot 2015-03-03 at 5 45 03 pm

A Finder directory should open containing the index.html file we see being served by the container.

screen shot 2015-03-03 at 5 51 19 pm

Serving Your Own Website Data

Let’s serve a more interesting website! Download the files for 2048, a popular (and addicting) web-based game. Extract this zip file into the folder we just opened:

screen shot 2015-03-03 at 5 50 56 pm

Switch back to Kitematic and restart the container as shown below. Your Nginx container should now serving 2048! Awesome!

screen shot 2015-03-03 at 5 51 50 pm

What just happened? Kitematic automatically exposes Docker container volumes via directories on your Mac. In this case we changed the container’s volume data to serve a website we downloaded.