Serve a HTML Resume Site via a Docker Container

Cerulean CloudCerulean Cloud
3 min read

In this blog, we'll walk you through the steps to serve a simple HTML website using Apache2 in a Docker container. This guide assumes you have an Ubuntu environment with Docker installed.

Assumptions

  • Ubuntu Environment: Ensure you're using an Ubuntu-based system.

  • Docker Installed: Verify Docker is installed and running using the command docker --version.

Create the HTML File

Create a directory to store your HTML file and your Dockerfile.

Dockerfile will contain instructions on how to build the image.

mkdir my-resume-site
cd my-resume-site
vi index.html

Create the index.html file inside this directory with the following content:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Resume</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        h1 {
            text-align: center;
        }
        .section {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Email: john.doe@example.com | Phone: (123) 456-7890</p>
    <hr>
    <div class="section">
        <h2>Professional Summary</h2>
        <p>Motivated and detail-oriented professional with experience in web development, system administration, and cloud technologies. Passionate about delivering impactful solutions and learning new technologies.</p>
    </div>
    <div class="section">
        <h2>Experience</h2>
        <h3>Software Engineer, ABC Corp</h3>
        <p>Jan 2020 - Present</p>
        <ul>
            <li>Developed and maintained scalable web applications using modern frameworks.</li>
            <li>Implemented CI/CD pipelines to automate deployments.</li>
        </ul>
    </div>
    <div class="section">
        <h2>Education</h2>
        <h3>Bachelor of Science in Computer Science</h3>
        <p>XYZ University, 2019</p>
    </div>
</body>
</html>

Create a Dockerfile

To serve the HTML site, create a Dockerfile to set up the Apache2 web server.

vi Dockerfile

Add the following content to the file and save it.

# Use the official Apache2 image as the base
FROM httpd:2.4

# Copy the HTML file into the container
COPY ./index.html /usr/local/apache2/htdocs/

Build the Docker Image

Build the Docker image using the Dockerfile.

docker build -t my-resume-site .

This command tags the image as my-resume-site .

The . in the command - points to the current directory. Docker will automatically know to look for a file named Dockerfile

Run the Docker Container

Run the container and map it to port 80 on your host machine.

docker run -d -p 80:80 --name resume-site my-resume-site
  • -d: Runs the container in detached mode.

  • -p 80:80: Maps port 80 of the host to port 80 of the container.

  • --name resume-site: Names the container resume-site.

Access the Site

Open your browser and navigate to http://localhost:80. You should see your resume displayed.

Verify the Container is Running

Check if the container is running:

docker ps

The output should list the resume-site container.

Cleanup - Stop and Remove the Container

To stop the container:

docker stop resume-site

To remove the container:

docker rm resume-site

Conclusion

You've successfully served a simple HTML resume site using Apache2 in a Docker container!

0
Subscribe to my newsletter

Read articles from Cerulean Cloud directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Cerulean Cloud
Cerulean Cloud