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: 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 " HNG Project 0 Welcome to DevOps Stage 0 - Mbarimam Matthew Audu/Matthew Audu " | 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. 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!

Jan 29, 2025 - 01:13
 0
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 " 
 
 
HNG Project 0 
 
 

Welcome to DevOps Stage 0 - Mbarimam Matthew Audu/Matthew Audu

" | 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

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!