How do I serve index.html with Nginx

Nginx was first released in October 2004. Nginx is a freely available open-source web server that can be utilized for reverse proxy, caching, video streaming, email proxy, and load balancing. The developers aimed to design a web server that provides maximum performance and stability. It was originally envisioned as software to solve the C10k problem.

For the busiest websites on the internet, Nginx optimizes content and application delivery, increases security, and facilitates availability and scalability. It is also an ideal web server for serving your static website files or files generated by static site generators. In this post, we will set up a server and show you how to serve the index.html file with Nginx. Let’s start!

How to install Nginx in CentOS

If you do not have Nginx, then first install it on your system by following the given procedure:

In the first step, open up your CentOS terminal by pressing “CTRL ALT T” and then write out the below-given command:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/1-24.jpg" data-lazy- height="477" src="data:image/svg xml,” width=”741″>

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/2-24.jpg" data-lazy- height="470" src="data:image/svg xml,” width=”736″>

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/3-24.jpg" data-lazy- height="472" src="data:image/svg xml,” width=”738″>

The error-free output declares that Nginx is successfully installed on your system.

How to enable Nginx in CentOS

Now, utilize the below-given command for enabling Nginx on the CentOS system:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/4-22.jpg" data-lazy- height="313" src="data:image/svg xml,” width=”737″>

After that, start the Nginx service:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/5-20.jpg" data-lazy- height="308" src="data:image/svg xml,” width=”737″>

How to set firewall rules for Nginx in CentOS

The next thing we are going to do is set the firewall settings to permit the external connections for the Nginx, running on port 80 by default. The firewall-cmd is the command that is utilized for managing permanent and runtime firewalld configuration.

For permanently enabling the HTTP connections on port 80, write out the below-given command in your CentOS terminal:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/6-18.jpg" data-lazy- height="310" src="data:image/svg xml,” width=”739″>

To verify if the HTTP firewall service was correctly added to the system, execute this command:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/7-13.jpg" data-lazy- height="471" src="data:image/svg xml,” width=”766″>

Now, reload the firewall service:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/8-7.jpg" data-lazy- height="280" src="data:image/svg xml,” width=”740″>

All done!

How to serve index.html file with Nginx

To follow the procedure of serving HTML files, we will create a “www” directory using the “mkdir” command. The “mkdir” command is utilized in Linux-based systems such as CentOS for creating one or more directories.

Execute the below-given command in your terminal for creating a “www” in the current working directory:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/9-7.jpg" data-lazy- height="247" src="data:image/svg xml,” width=”793″>

Next, we create a sample “index.html” file within our “www” directory:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/10-6.jpg" data-lazy- height="279" src="data:image/svg xml,” width=”795″>

Add anything in the “index.html,” according to your requirement. However, we will add the following test content in our “index.html” file:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/11-3.jpg" data-lazy- height="477" src="data:image/svg xml,” width=”736″>

Now, press “CTRL O” to save the content we have added in the “index.html” file present in the “www” directory:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/12-2.jpg" data-lazy- height="471" src="data:image/svg xml,” width=”735″>

After that, we will change the permissions of the “www” directory using the “chmod” command. The “chmod” which stands for “change mode“, is a command that Linux users utilize for changing the file permissions.

Here in the below-given command, we will attempt to assign, read, write, and execute permissions to everyone who is going to use the “www” directory:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/13-1.jpg" data-lazy- height="311" src="data:image/svg xml,” width=”792″>

Now, open up the Nginx configuration file “/etc/nginx/nginx.conf” in the nano editor:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/14-1.jpg" data-lazy- height="309" src="data:image/svg xml,” width=”792″>

The “/etc/nginx/nginx.conf” file has different blocks such as http, server, and location for the Nginx configuration. Look for the following line in the file:

The above line declares that the configuration file present in the “site-available” is considered as a part of Nginx configuration:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/15-1.jpg" data-lazy- height="527" src="data:image/svg xml,” width=”790″>

Now, add the following server block in the Nginx configuration file:

This server block specifies that for all connections, Nginx will listen at port “80”, our server name is “test.sharqa.com”, index file to serve with Nginx is “index.html” file, and all files related to the server are present in the “/home/linuxhint/www” directory:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/16-1.jpg" data-lazy- height="527" src="data:image/svg xml,” width=”797″>

Press “CTRL O” to save the changes we have made into the opened file:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/17-1.jpg" data-lazy- height="532" src="data:image/svg xml,” width=”797″>

Execute the “nginx” command with the “-t” option to test the configuration file and its syntax:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/18-1.jpg" data-lazy- height="310" src="data:image/svg xml,” width=”795″>

Now, restart the Nginx service on your system:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/19-1.jpg" data-lazy- height="377" src="data:image/svg xml,” width=”789″>

After restarting the Nginx service, visit your domain which you have added in the ”server_name”. As a result of this, your index.html web page will be served:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/20-1.jpg" data-lazy- height="602" src="data:image/svg xml,” width=”802″>

Conclusion

Nginx was designed to provide excellent performance as a web server, especially when there are many simultaneous connections or static content to handle. That’s why it is highly optimized for serving static files. You have seen the Nginx installation method and how I serve the index.html with Nginx on my system in this post.