Hosting a static website with Nginx on Ubuntu

In our previous post “What is Nginx and how to install Nginx on Ubuntu 20.04 ?”, we mentioned how you can setup the Nginx server. In this post, we will detail, how you can host your first website with Nginx.

Note: To execute this steps, you will need root access or “Sudo” permissions.

Make sure that nginx is properly setup and running using,

$ sudo systemctl status nginx

Nginx by default runs on /var/www/html directory which you can verify from “/etc/nginx/sites-available/default” file,

server {
        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;
}

and when you type “http://localhost” on your browser, you can see either of the index.html webpage opened in your browser.

Now, we can create a new directory inside /var/www/html/helloworld-nginx/ and create a simple helloworld.html as,


Subscribe with Valid Email Id to receive updates in Inbox. ( Secured by Google FeedBurner )

   


$ sudo mkdir /var/www/html/helloworld-nginx/
$ sudo vim /var/www/html/helloworld-nginx/helloworld.html
<html>
  <head>
  </head>
  <body>
  <h1>Hello, World of nginx...</h1>
  </body>
</html>

Settings up Virtual Host

Above, we just copied/written our web code, now we need to inform / configure nginx, so it can start serving the web pages from our code on the browser. For this we need to write the virtual host configuration files as, ( The default /etc/nginx/sites-available/default file also have a example for your reference )

$ sudo vim /etc/nginx/sites-enabled/helloworld
erver {
       listen 8080;
       listen [::]:8080;

       server_name helloworld.com;

       root /var/www/html/helloworld-nginx;
       index index.html;

       location / {
               try_files $uri $uri/ =404;
       }
}
  • listen The port where your nginx server will be listening for this website
  • root is a directory where we have placed our website’s .html file. 
  • index is used to specify file available when visiting root directory of site. 
  • server_name can be any as per your domain name. This will work only on live servers where you have properly configured DNS settings to point the domain name to your hosting server where you are running nginx.

Restart the nginx server as,

$ sudo service nginx restart

Now, you should see that your static website with simple index.html is getting served in browser by visiting http://localhost:8081/ and you would see the html page with following text,

Hello, World of nginx…

lynxbee_ezoic

Leave a Comment

Android Android Build system Android Commands Android Java Applications Application Libraries Application Stack / User Interface Bash / Shell Scripts Bluetooth driver Cloud Technologies Commands and Packages Compilation Content Management System Core Kernel C Programs Development & Build Development, Debugging and Performance Tools Development Environment Setup Django & REST Api Errors & Failures Git Hardware Platforms HTML JAVA Programs Linux, OS Concepts and Networking Linux Device Drivers Linux Host, Ubuntu, SysAdmin Linux Kernel Linux Networking Middleware Libraries, HAL Multimedia Audio, Video, Images NDK / Middleware / HAL OS Concepts PHP Programming Languages Scripting and Automation Search Engine Optimisation ( SEO ) Social Media Source Code Management ( SCM ) System Administration, Security Testing and Debugging Uncategorized Web design and development Website Hosting Wordpress Yocto / Bitbake / Openembedded