Deploying a Static Website with Docker

Dec 06, 2024

Creating a static website and deploying it with Docker is a great way to grasp the basics of containerization and how it simplifies application deployment. In this tutorial, you will build a simple HTML/CSS website, package it into a Docker container, and run it on a local server using Docker. By doing so, you'll learn how to create a Dockerfile, build Docker images, and manage containers. This guide will take you from setting up a basic project structure to running a live containerized website, demonstrating the capabilities of Docker for modern software deployment. Whether you're a beginner or looking to solidify your foundational Docker skills, this hands-on project provides the necessary building blocks to understand container-based workflows.

Setting Up the Project

The first step in deploying a static website with Docker is setting up the project directory and creating the HTML and CSS files that will form the content of your website. This step-by-step approach will guide you in laying the groundwork before packaging your website as a Docker container.

Create Project Directory

To get started, open your terminal or command prompt and create a directory to house the project files. You can name the directory anything you like; for this example, we'll call it docker-static-site:

mkdir docker-static-site
cd docker-static-site

This command sequence will create a new folder named docker-static-site and navigate into it. This directory will hold all the necessary files for your static website project.

Create Basic HTML and CSS Files

Next, we'll create the content files that make up our static website. First, create an index.html file inside the project directory. This file will serve as the main entry point for your website:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Static Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to My Static Website!</h1>
    <p>This is a simple HTML page deployed with Docker.</p>
</body>
</html>

This basic HTML structure includes a header, a paragraph, and a link to a CSS stylesheet called style.css, which you’ll create next. Now, create a style.css file in the same directory to style your website. Use the following CSS code:

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f0f0f0;
    text-align: center;
}

h1 {
    color: #333;
}

p {
    color: #555;
}

This CSS code adds some basic styling to the page, such as setting a background color, adding text alignment, and applying colors to the header and paragraph text. Feel free to modify the styles to suit your preferences.

Organize the Project Directory

Ensure your project directory has the following structure once you’ve created the files:

docker-static-site/
├── index.html
└── style.css

This simple structure contains two files: an index.html file for the webpage content and a style.css file for styling.

By completing this initial setup, you now have a basic static website that can be viewed in a web browser by simply opening the index.html file. However, the goal is to package this website using Docker, so we’ll continue by creating a Dockerfile to containerize the project.

Pods & Pixels

Discussion about this post