Using Docker and Nginx to host a custom webpage locally

Published in

Towards AWS

3 min readOct 28, 2023

In the world of web development, creating and hosting a custom webpage is a fundamental task that often serves as the first step towards building web applications. In this blog post, we’ll explore how I hosted a custom webpage on my localhost using Docker and Nginx. Here, we’ll dive into the technical details of the Dockerfile and HTML configuration that allowed me to accomplish this.

Dockerfile: The Blueprint for Containerization

Docker is a powerful tool for containerization, allowing developers to package applications and their dependencies into a portable container. To host a custom webpage on my localhost, I created a Dockerfile.
Let’s break down the key components:

#Dockerfile
# Use Alpine Linux as a base image
FROM alpine

LABEL maintainer="xxxx@gmail.com"

# Update and install Nginx
RUN apk update && apk upgrade && apk add --no-cache nginx

Here, I started with the Alpine Linux base image, a lightweight choice, and installed Nginx, the popular web server.

RUN rm /etc/nginx/http.d/default.conf
RUN rm /etc/nginx/nginx.conf

I removed default Nginx configurations to start fresh.

# Create a directory for the HTML file
RUN mkdir -p /usr/share/nginx/html

I created a directory for the HTML file that will be served by Nginx.

# Create a custom HTML page
COPY index.html /usr/share/nginx/html/index.html

I copied my custom HTML file, index.html, into the Nginx web root directory.

RUN chmod 644 /usr/share/nginx/html/index.html
RUN chown nginx:nginx /usr/share/nginx/html/index.html

I set the file permissions to ensure it can be served by Nginx.

# More Nginx configuration
RUN mkdir -p /etc/nginx/conf.d
COPY nginx.conf /etc/nginx/nginx.conf
COPY myserver.conf /etc/nginx/conf.d/myserver.conf

I included my Nginx configuration files, specifically nginx.conf and myserver.conf.

# Expose port 80 for HTTP traffic
EXPOSE 80

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

I exposed port 80 and started Nginx with the “daemon off” option, ensuring that Nginx runs in the foreground.

index.html: The Heart of the Web Page

The HTML file, index.html, is the core of the webpage I wanted to host. It contains the structure and content of my custom webpage:

<!DOCTYPE html>
<html>
<head>
    <title>My Custom Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is created by dimple hosted on her local machine via nginx container</p>
    <img src="./newdayimage.png" alt="My newdayimage">
</body>
</html>

Here, I used standard HTML tags to define the structure of the page. The <img> tag was used to include an image, with the src attribute specifying the image file's path.

Configuration file: myserver.conf

server {
    listen 80;
    server_name localhost;
    location / {
        root /usr/share/nginx/html;
    }
}

Configuration file: nginx.conf

events {
    #worker_connections 1024; # Define your worker_connections here
}

http {
    error_log /var/log/nginx/error.log;
    include /etc/nginx/conf.d/myserver.conf;
}

Let us now run below commands to build the image

command: docker build -t mycustomimage .

Let us now run below commands to run the container

command: docker run -d -p 80:80 — name mycustom-nginx-container mycustomimage

Are you ready? Let’s lastly verify whether the custom webpage is being hosted by localhost.

Conclusion

With the Dockerfile and HTML configuration in place, I was able to create and host a custom webpage on my localhost using Docker and Nginx. This demonstrates the power and flexibility of containerization for web development. Whether you’re building a personal blog or a complex web application, Docker can streamline the process and make it easier to share and deploy your creations.

********************************* project completion ************************

Check out for daily updates on Cloud, DevOps, Docker, K8, Jenkins and other resources: https://www.linkedin.com/in/dp3cloud/
github: https://github.com/codewarriors12

ราตรีสวัสดิ์
Rātrī s̄wạs̄di̒
Happy Learning Cloud nerds 🤓💭 🐳🐍✅💯👍🏼