Step-by-Step Tutorial: How To Host Your Website with LEMP Stack

by

In this guide, we’ll explore the power of the LEMP stack (Linux, Nginx, MySQL, PHP) and how it can help you to Host Your Website with LEMP Stack.

In today’s fast-paced digital world, the speed at which your website loads can make a significant impact on user experience and search engine rankings. Host Your Website with LEMP Stack is crucial to achieving optimal performance.

Step 1: Setup LEMP Stack

Before we dive into Installing LEMP Stack on Ubuntu, let’s ensure you have everything you need: Follow the LEMP Stack Installation Tutorial to install LEMP Stack.

You can read about LEMP stack from HERE.

To Host Your Website with LEMP Stack we need Nginx, Incorporating the Nginx web server allows us to establish server blocks, akin to Apache’s virtual hosts, enabling us to compartmentalize configuration specifics and accommodate multiple domains on a single server. Throughout this tutorial, we’ll employ mywebsite.developernoob.com as an illustrative domain name.

Ubuntu 22.04 comes pre-configured with one enabled server block in Nginx, set to deliver content from the /var/www/html directory. While suitable for a single site, managing multiple sites under this directory can be complex.

To streamline this, we’ll establish a structured directory /var/www dedicated to the mywebsite.developernoob.com website. This leaves /var/www/html it intact as the default directory for client requests that don’t match any other sites.

Here are the steps to create the root web directory for mywebsite.developernoob.com:

sudo mkdir /var/www/mywebsite.developernoob.com

Afterward, grant ownership of the directory using the $USER environment variable, which will correspond to your current system user.

sudo chown -R $USER:$USER /var/www/mywebsite.developernoob.com

Following that, initiate a new configuration file within Nginx’s sites-available directory using your preferred command-line editor. In this instance, we’ll employ nano:

Step 2: Host Your Website with LEMP Stack

sudo nano /etc/nginx/sites-available/mywebsite.developernoob.com

This action will generate a new empty file. Proceed by inserting the following basic configuration:

#Host Your Website with LEMP Stack - nginx Configuration
server {
    listen 80;
    server_name mywebsite.developernoob.com www.mywebsite.developernoob.com;
    root /var/www/mywebsite.developernoob.com;

    index index.html index.htm index.php;

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

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
     }

    location ~ /\.ht {
        deny all;
    }

}

Here’s an explanation of each directive and location block:

  • listen: Specifies the port Nginx will listen on. In this case, it’s set to 80, which is the default port for HTTP.
  • root: Defines the document root, indicating where the files served by this website are stored.
  • index: Determines the priority order for index files. It’s common to prioritize index.html files over index.php files for setting up a maintenance landing page in PHP applications. You can adjust these settings based on your application’s requirements.
  • server_name: Specifies the domain names and/or IP addresses that this server block should respond to. This directive should point to your server’s domain name or public IP address.
  • location /: The first location block includes a try_files directive, which checks for the existence of files or directories matching a URL request. If Nginx cannot find the appropriate resource, it will return a 404 error.
  • location ~ .php$: This location block handles the actual PHP processing. It points Nginx to the fastcgi-php.conf configuration file and the php8.1-fpm.sock file, specifying the socket associated with php8.1-fpm.
  • location ~ /.ht: The last location block deals with .htaccess files, which Nginx does not process. By adding the deny all directive, any .htaccess files that find their way into the document root will not be served to visitors.

Once you’ve finished editing, save and close the file. If you’re using nano, you can do this by pressing CTRL+X, then Y, and finally ENTER to confirm.

To activate your configuration, create a symbolic link to the configuration file from Nginx’s sites-enabled directory using the following command:

sudo ln -s /etc/nginx/sites-available/mywebsite.developernoob.com /etc/nginx/sites-enabled/

To unlink the default configuration file from the /etc/nginx/sites-enabled/ directory, you can use the following command:

sudo unlink /etc/nginx/sites-enabled/default

Note: If you ever need to revert back to the default configuration, you can recreate the symbolic link with the following command:

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

This will instruct Nginx to utilize the configuration the next time it is reloaded. To check for any syntax errors in your configuration, you can use the following command:

sudo nginx -t

If any errors are reported, please revisit your configuration file to review its contents before proceeding.

Once you’re confident that the configuration is correct, you can reload Nginx to apply the changes:

sudo systemctl reload nginx

This will implement the updated configuration without requiring a full server restart.

Your new website is now live, but the web root /var/www/mywebsite.developernoob.com is currently empty. To test that your new server block functions as intended, create a index.html file in that location with the following command:

sudo nano /var/www/mywebsite.developernoob.com/index.html

Then, add some content to the file. For example:

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to DeveloperNoob</title>
</head>
<body>
    <div>
        <h1>WelCome To DeveloperNoob</h1>
        <p>Congratulations! Your new server block is up and running.</p>
    </div>
</body>
</html>

Save the file and close the editor.

Now, you can visit your website in a web browser using your domain name or IP address, and you should see the content you added to the index.html file.

The next step is to access our site using our domain. To do this, we simply need to configure a DNS record in our domain’s DNS settings.

To accomplish this, log in to your domain account, navigate to DNS settings, and create two A records pointing to your server’s IP.

DNS Setting

Please allow some time for DNS propagation, as it may take a while for the changes to take effect. After a couple of minutes, you will able to visit your website using your domain name.

Leave a Comment