Hosting a Static Website with Nginx

Mini Blog sys admin
, ,
1

YouTube reference

Get 200$ in Digital Ocean and Get 100$ in Vultr

Hosting a Static Website with Nginx :globe_with_meridians:

Are you looking to host a simple static website using Nginx? You’ve come to the right place! In this guide, we’ll walk you through the steps to host a static website using Nginx, complete with all the necessary commands and configurations. We’ll use a sample static website named “demo” available at this GitHub repository.

Prerequisites

Before we dive into the hosting process, make sure you have the following:

  • A server or virtual machine running a Linux-based operating system.
  • Nginx installed on your server. You can install it using your system’s package manager, e.g., apt or yum.

Get 200$ in Digital Ocean

Step 1: Clone the Sample Website

Start by cloning the sample “demo” website from the GitHub repository. Use the following command:

git clone https://github.com/ServerGuyFluxx/Static_web_sample.git demo

This will create a directory named “demo” containing your website’s files.

Step 2: Configure Nginx

Next, you need to configure Nginx to serve your static website. Create a new Nginx server block configuration for your site. You can use the default configuration file or create a new one:

sudo nano /etc/nginx/sites-available/demo

Now, paste the following configuration into the file:

server {
    listen 80;
    server_name your_domain_or_IP; # Replace with your domain or IP address

    root /path/to/demo; # Replace with the actual path to your "demo" folder

    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Be sure to replace your_domain_or_IP with your actual domain name or server IP address, and /path/to/demo with the actual path to your “demo” website directory.

Save and exit the text editor.

Step 3: Enable the Site

Now that your Nginx configuration is set up, create a symbolic link to enable the site:

sudo ln -s /etc/nginx/sites-available/demo /etc/nginx/sites-enabled/

Step 4: Test the Configuration

Before you apply the changes, it’s a good idea to test your Nginx configuration for any syntax errors:

sudo nginx -t

If there are no errors, you can proceed to reload Nginx to apply the changes:

sudo systemctl reload nginx

Step 5: Access Your Website

Your static website should now be accessible via your domain or IP address. Open your web browser and enter the URL to view your website:

http://your_domain_or_IP

You’ve successfully hosted your static website with Nginx! :tada:

Wrapping Up

Hosting a static website with Nginx is a straightforward process, and by following the steps outlined above, you can easily share your web content with the world. Whether it’s a personal blog, a portfolio site, or a small project, Nginx is a reliable choice for serving static web pages efficiently.

Feel free to customize your Nginx configuration further to meet your specific requirements. You can add SSL for secure connections, set up domain names, and more. Enjoy sharing your content with the world! :rocket: