Static Website Deployment with Nginx (HNG 12)

Matt Audu — Tue, 28 Jan 2025 23:47:35 +0000

Hello guys! This project marks the beginning of my journey at HNG 12 and I'll love to share my experience. In this article, I will walk you through deploying a static website using Nginx. You’ll learn how to set up Nginx, configure it for optimal performance, and easily deploy your static site. By the end, you’ll have a fully functional, blazing-fast website ready to impress your visitors. Let’s dive in!

Prerequisites

Before we begin, make sure you have the following:

A server or virtual machine (Ubuntu).
A static website (HTML, CSS, JS files) ready for deployment.
SSH access to your server.
Basic familiarity with the command line.
Allow access to Port 22 and 80

Step 1: SSH into your server

Step 2: Create a shell script e.g nginx_script.sh

Copy the script below to install nginx and deploy your static website

#!/bin/bash
sudo apt update
sudo apt install -y nginx
sudo systemctl enable nginx
sudo systemctl start nginx
sudo systemctl status nginx
echo "<!DOCTYPE html> 
<html> 
<head> 
<title>HNG Project 0</title> 
</head> 
<body> 
<h1>Welcome to DevOps Stage 0 - Mbarimam Matthew Audu/Matthew Audu</h1> 
</body> 
</html>" | sudo tee /var/www/html/index.html 
sudo systemctl restart nginx
sudo systemctl status nginx

Step 3: Make your nginx_script.sh executable

chmod +x script.sh

Step 4: Run the script

./nginx_script.sh

Running and working with shell scripts, especially in deploying a static website with Nginx, is a valuable hands-on learning experience. Shell scripts eliminate the tensity of running manual commands and save you half the time.

HNG 12 internship will be a valuable learning experience for me in my professional development as a DevOps/Cloud Engineer. Truly I can't wait to dive deeper and work on more exciting projects like this and hopefully, I can get to the final stage and be part of the pool of exceptional talents below;

DevOps Engineers - https://hng.tech/hire/devops-engineers
Cloud Engineers - https://hng.tech/hire/cloud-engineers
Site Reliability Engineers - https://hng.tech/hire/site-reliability-engineers
Platform Engineers - https://hng.tech/hire/platform-engineers
Infrastructure Engineers - https://hng.tech/hire/infrastructure-engineers
Kubernetes Specialists - https://hng.tech/hire/kubernetes-specialists
AWS Solutions Architects - https://hng.tech/hire/aws-solutions-architects
Azure DevOps Engineers - https://hng.tech/hire/azure-devops-engineers
Google Cloud Engineers - https://hng.tech/hire/google-cloud-engineers
CI/CD Pipeline Engineers - https://hng.tech/hire/ci-cd-pipeline-engineers
Monitoring/Observability Engineers - https://hng.tech/hire/monitoring-observability-engineers
Automation Engineers - https://hng.tech/hire/automation-engineers
Docker Specialists - https://hng.tech/hire/docker-specialists
Linux Developers - https://hng.tech/hire/linux-developers
PostgreSQL Developers - https://hng.tech/hire/postgresql-developers

And there you have it deploying a static website with Nginx is simpler than it sounds! By following this guide, you’ve set up a fast, secure, and scalable way to serve your static files. Whether it’s a personal blog, a portfolio, or a documentation site, Nginx has got your back.