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!

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay