A Beginner's Guide to Creating a Static Website with Docker

Docker is a powerful tool that has revolutionized how we develop and deploy applications. It provides an easy and efficient way to bundle all dependencies, libraries, and configuration files required by an application into a single package known as a Docker image. These images can then be used to create containers, which are isolated environments where the applications run.

In this guide, we'll walk through the process of creating a Docker container that serves a static website using the Nginx server. This is a beginner-friendly project that will give you a solid introduction to Docker.

Here is a video about this topic 🚀

https://www.youtube.com/watch?v=hYf8Zv66FY0

Understanding Docker Concepts 🛳️

Before we start, it's important to understand some basic Docker concepts:

Docker Image: A Docker image is a lightweight, standalone, and executable software package that includes everything needed to run a piece of software, including the code, a runtime, libraries, environment variables, and config files.
Docker Container: A Docker container is a lightweight, standalone, executable package that includes everything needed to run a piece of software. It is created from a Docker image and is the runtime instance of an image.
Dockerfile: A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image.

Setting up the Project 🚀

For this project, you'll need to have Docker installed on your computer. If you haven't installed it yet, you can download it from the Docker website.

We'll start by creating a simple static website. Create a new directory for this project and inside that directory, create an HTML file (index.html), and add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>My Static Website</title>
</head>
<body>
    <h1>Welcome to My Static Website</h1>
    <p>This is a sample static website hosted inside a Docker container!</p>
</body>
</html>

This is a simple HTML page that we will serve from our Docker container.

Creating a Dockerfile 📂

Next, we'll create a Dockerfile, which is a text file that Docker uses to build an image. Here's what our Dockerfile will look like:

# Start from the nginx:alpine image
FROM nginx:alpine

# Delete any existing default nginx page
RUN rm -rf /usr/share/nginx/html/*

# Copy the HTML file to the nginx container
COPY index.html /usr/share/nginx/html

# Expose port 80 for the app
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

Here's what each line in this Dockerfile does:

FROM nginx:alpine: This line specifies the base image for our Docker image. We're using the nginx:alpine image, which is a lightweight version of Nginx based on the Alpine Linux distribution.
RUN rm -rf /usr/share/nginx/html/*: This line deletes any files that are in the /usr/share/nginx/html directory of the Docker image. This is the directory where Nginx looks for files to serve, so we're clearing it out to make sure our HTML file is the only one there.
COPY index.html /usr/share/nginx/html: This line copies the index.html file from our project directory to the /usr/share/nginx/html directory in the Docker image.
EXPOSE 80: This line tells Docker that our container will listen on port 80.
CMD ["nginx", "-g", "daemon off;"]: This line starts the Nginx server. The -g "daemon off;" part tells Nginx to run in the foreground, which is necessary for Docker.

Building the Docker Image 🪧

Now that we have our Dockerfile, we can use it to build a Docker image. From the command line, navigate to your project directory (the one containing the Dockerfile and index.html), and run this command:

docker build -t my-static-website .

This command tells Docker to build an image using the Dockerfile in the current directory (that's what the . means), and tag it (-t) with the name "my-static-website".

Running the Docker Container 🏃‍♂️

Once the Docker image is built, we can create and run a container from it with this command:

docker run -d -p 8080:80 my-static-website

This command tells Docker to run a container in detached mode (-d), map port 80 in the container to port 8080 on our host machine (-p 8080:80), and use the "my-static-website" image.

Accessing the Website 🚧

Now you should be able to access your static website by opening a web browser and navigating to http://localhost:8080. You should see the HTML page you created earlier. If you see the default Nginx welcome page instead, make sure you deleted the default Nginx files from the Docker image and correctly copied your index.html file.

Conclusion 🤗

This project is a simple introduction to Docker, but it covers some of the most fundamental concepts and commands. With Docker, you can create a portable, self-contained environment for your application, ensuring it runs the same way, no matter where it's deployed.

As you continue learning Docker, you'll find it's a powerful tool for not only web development, but also for data science, machine learning, and much more.

That's it for now.

You can Buy Me a Coffee if you want to and please don't forget to follow me on YouTube, Twitter, and LinkedIn also.

If you have any questions or would like to share your own experiences, feel free to leave a comment below. I'm here to support and engage with you.

Happy Dockering!

Bilal's Blog