Hosting a static website on your own server can seem like a daunting task, but with Nginx and Ubuntu, the process is straightforward and efficient. Nginx is known for its high performance, resource efficiency, and ability to handle a large number of concurrent connections, making it a popular choice for web hosting.
In this guide, we’ll show you how to host a static website using Nginx on an Ubuntu server. Whether you’re deploying a personal blog, portfolio, or simple static site, this step-by-step guide will help you get up and running quickly.
What is Nginx?
Before we jump into the process, let’s quickly review what Nginx is and why it’s perfect for hosting static websites.
Nginx (pronounced “engine-x”) is an open-source web server that can also function as a reverse proxy, load balancer, and HTTP cache. It’s fast and efficient at serving static content such as HTML, CSS, JavaScript, and images, making it ideal for hosting static websites. With low memory consumption and the ability to handle thousands of connections, Nginx is often the go-to choice for developers and businesses alike.
Step-by-Step Guide to Hosting a Static Website with Nginx on Ubuntu
Step 1: Update the Package List and Install Nginx
Before installing Nginx, it’s important to update your server’s package list. This ensures that you’ll be installing the most recent versions of available packages.
Open your terminal and run the following commands:
sudo apt update
sudo apt install nginxThis will install Nginx on your Ubuntu server. Once the installation is complete, you can check the status of Nginx to ensure it’s running:
sudo systemctl status nginxYou should see something like active (running) in the output, indicating that Nginx is up and running.
Step 2: Create a Directory for Your Website
Now that Nginx is installed, you’ll need to create a directory to store your static website files. The standard location for web content on Ubuntu is /var/www/.
sudo mkdir -p /var/www/mywebsiteReplace mywebsite with the name of your website. This will create a directory where you can place your HTML, CSS, JavaScript, and other static files.
Next, you need to set the appropriate permissions for the directory so that Nginx can serve the files:
sudo chown -R $USER:$USER /var/www/mywebsiteStep 3: Add Your Static Website Files
Now that the directory is created, you can add your static website files. For example, let’s create a simple index.html file for testing purposes.
nano /var/www/mywebsite/index.htmlInside this file, add the following basic HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Static Website</title>
</head>
<body>
<h1>Welcome to My Static Website!</h1>
<p>This is a simple static website hosted on Ubuntu using Nginx.</p>
</body>
</html>Save and close the file. You can upload any additional files (e.g., CSS, JavaScript) into the same directory.
Step 4: Configure Nginx to Serve Your Website
Now that your static website is ready, the next step is to configure Nginx to serve it. Nginx uses server blocks (similar to virtual hosts in Apache) to define which sites to serve.
- Create a new server block configuration file in the
/etc/nginx/sites-available/directory:
sudo nano /etc/nginx/sites-available/mywebsite- Add the following configuration:
server {
listen 80;
server_name mywebsite.com www.mywebsite.com;
root /var/www/mywebsite;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}- listen 80: Configures Nginx to listen for HTTP requests on port 80.
- server_name: Specifies your domain name (
mywebsite.com), which you’ll replace with your actual domain. - root: Defines the directory where your website files are located.
- index: Specifies the default file to serve when a directory is accessed (in this case,
index.html).
- Enable the server block by creating a symbolic link to the
sites-enableddirectory:
sudo ln -s /etc/nginx/sites-available/mywebsite /etc/nginx/sites-enabled/- Test the Nginx configuration to ensure there are no syntax errors:
sudo nginx -t- Reload Nginx to apply the changes:
sudo systemctl reload nginxStep 5: Update Your DNS Settings (Optional)
If you want to access your website via a domain name (e.g., mywebsite.com), you’ll need to update your DNS settings. Log in to your domain registrar’s control panel and point your domain to the IP address of your server.
If you’re hosting locally or just testing, you can skip this step and access the website via your server’s IP address.
Step 6: Secure Your Website with SSL (Optional)
If your website will be publicly accessible, it’s a good idea to secure it using HTTPS. You can easily do this using Let’s Encrypt, a free SSL certificate provider.
To install Certbot (Let’s Encrypt’s tool for SSL), run the following commands:
sudo apt install certbot python3-certbot-nginxNext, request an SSL certificate for your domain:
sudo certbot --nginx -d mywebsite.com -d www.mywebsite.comCertbot will automatically configure Nginx to use HTTPS and will obtain the SSL certificate for you. Finally, you can set up automatic renewal for the certificate by running:
sudo certbot renew --dry-runHosting a static website using Nginx on Ubuntu is a simple, cost-effective way to get your site online. Nginx’s speed and resource efficiency make it an ideal choice for serving static content. With just a few steps, you can set up a static website, configure Nginx, and even secure it with SSL.
Once you have your static website running, you can further enhance it with CSS, JavaScript, or add more advanced server configurations.