DEV Community

Cover image for Static Website Deployment with Nginx (HNG 12)
Matt Audu
Matt Audu

Posted on

Static Website Deployment with Nginx (HNG 12)

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:

  1. A server or virtual machine (Ubuntu).
  2. A static website (HTML, CSS, JS files) ready for deployment.
  3. SSH access to your server.
  4. Basic familiarity with the command line.
  5. 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
Enter fullscreen mode Exit fullscreen mode

Step 3: Make your nginx_script.sh executable

chmod +x script.sh
Enter fullscreen mode Exit fullscreen mode

Step 4: Run the script

./nginx_script.sh
Enter fullscreen mode Exit fullscreen mode

Image description

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;

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.

This isn’t just about getting your site live; it’s about learning skills that’ll help you grow as a developer or tech professional. The more you tinker with Nginx and scripting, the more you’ll discover ways to make your workflows smoother and more efficient. So go ahead, put your site out there, and keep building on what you’ve learned. You’ve got this!

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay