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!

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:

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.

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.

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:

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

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:

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

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.