Sept. 8, 2024

Hosting Html Website On Ubuntu Online Server With Nginx

By Admin Timpat
  • 5k
  • 5k
  • 5k

How to configure Nginx to run websites without backends on digital Ocean Ubuntu server.

The following steps will walk you through the process of hosting your HTML website on digital ocean ubuntu server.

Step 1:  Open the terminal and Login to your server as seen below:

Replace the numbers below with your IP address

# Replace the numbers with your server IP address 
nsa@nsa:~$ ssh root@12.345.678.910

Step 2: Create a folder to contain your website files eg. 

#Create a folder for your website
sudo mkdir /var/www/html/Newfolder

Step 3 (Optional): Check the newly created directory to see the owner run: ls -al /var/www/html/Newfolder

# you should see something like this after running the command
server@server:~# ls -al /var/www/html/ecosystem/
total 8
drwxr-xr-x 2 root root 4096 Apr 23 20:40 .
drwxr-xr-x 7 root root 4096 Apr 23 20:40 ..
server@server:~# 

This shows that the owner of this folder is root which is not very secure leaving it as root. Follow step 4 to change the root user if you really want to change it. It's completely optional.

Step 4: (Optional) Change ownership from root to another name:

#Create system goup if you don't have it yet
sudo groupadd --system groupUser

# The command to change the folder ownership
 sudo chown -R newUser:groupUser /var/www/html/Newfolder

Step 5: Grant full permission for the owner of  the New folder to be able to read and execute:

Run the following command to grant the permissions

# Execute to grant permissions to the NewFolder
sudo chmod -R 755 /var/www/html/Newfolder

Step 6: Nginx Configurations:

copy the nginx default file found here /etc/nginx/sites-available and rename it (newnginx) or whatever name of your choice or download sample file and use for the purpose.

Step 7: Edit the "newnginx" file:

Run the following command to edit the nginx file. As soon as the below command is executed, press the i key on your keyboard to enable editing. After Editing press the ESC key then :wq to save and exit.

vim /etc/nginx/sites-available/newnginx

When you are done with the above step, Create a symbolic link of the nginx file and put into the sites-enabled directory as follows:

# Execute this command to create the symbolic link  
sudo ln -s /etc/nginx/sites-available/newnginx /etc/nginx/sites-enabled/newnginx

Step 8: Restarting Nginx:

Run the following command to restart Nginx

# Restarting nginx

 sudo service nginx restart

 This is how the nginx file looks like

##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# http://wiki.nginx.org/Pitfalls
# http://wiki.nginx.org/QuickStart
# http://wiki.nginx.org/Configuration
#
# Generally, you will want to move this file somewhere, and start with a clean
# file but keep this around for reference. Or just disable in sites-enabled.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
##

# Default server configuration
#
server {
	listen 80 ;
	listen [::]:80 ;

	# SSL configuration
	#
	# listen 443 ssl default_server;
	# listen [::]:443 ssl default_server;
	#
	# Note: You should disable gzip for SSL traffic.
	# See: https://bugs.debian.org/773332
	#
	# Read up on ssl_ciphers to ensure a secure configuration.
	# See: https://bugs.debian.org/765782
	#
	# Self signed certs generated by the ssl-cert package
	# Don't use them in a production server!
	#
	# include snippets/snakeoil.conf;

	root /var/www/html/Newfolder;

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

	server_name example.com www.example.com;

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ =404;
	}

	# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
	#
	#location ~ \.php$ {
	#	include snippets/fastcgi-php.conf;
	#
	#	# With php7.0-cgi alone:
	#	fastcgi_pass 127.0.0.1:9000;
	#	# With php7.0-fpm:
	#	fastcgi_pass unix:/run/php/php7.0-fpm.sock;
	#}

	# deny access to .htaccess files, if Apache's document root
	# concurs with nginx's one
	#
	#location ~ /\.ht {
	#	deny all;
	#}
}


# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#	listen 80;
#	listen [::]:80;
#
#	server_name example.com;
#
#	root /var/www/example.com;
#	index index.html;
#
#	location / {
#		try_files $uri $uri/ =404;
#	}
#}

 You have only two things to modify inside the nginx file that is:

root /var/www/html/Newfolder;
           and 
server_name example.com www.example.com;

 The first line (root /var/www/html/Newfolder;) is the directory where your website is found and 

The third line (server_name example.com www.example.com;) is where you have to pass your domain name.  Just replace the example with your domain name.

Step 9: Copying your website files into /var/www/html/Newfolder.

You can install and use FileZilla to copy your website into the server or whatever means you prefer.

step 10: Visit your domain name on the browser and your website should be working perfectly.

DONE!!

 

Prev Post
Next Post

Related Post

Leave a Comment

Comments

BACK TO TOP