Personal Website Guide 2: Cooking up websites on DigitalOcean Droplet

A basic guide for setting up server blocks on Nginx for websites and subdomains.

Personal Website Guide 2: Cooking up websites on DigitalOcean Droplet

Read this for setting up a new DigitalOcean Droplet for a fresh Ubuntu and Nginx installation.

This post is written as a personal reference. Detailed guides are linked across this article.

Ingredients for a new website

Before going any further, make sure your domain is setup properly on DigitalOcean. Follow this guide to setup your domain name.

Feel free to keep all projects within a subdirectory under /var/www.

However, I like to keep all my projects on a droplet within my user's home directory and create a symlink to the var/www folder.

This is because some projects (like Python Flask) make it easier to keep projects under home/username and do not need folders within /var/www.

Plus, I don't need to keep creating new permissions for folders under /var/www.

Create a new folder under your home/username directory like:

mkdir yourdomain.com

and symlink it to:

sudo ln -s /home/username/yourdomain.com /var/www/mydomain.com

Make sure to replace the placeholder username and mydomain.com.

In case all your project files are within /var/www provide proper permissions to the new folder (change owner and change mode):

sudo chown -R $USER:$USER /var/www/yourdomainfolder
sudo chmod -R 755 /var/wwww/yourdomainfolder

Vi or nano a simple index.html within the new folder for testing.

Create an nginx server block file to serve this folder:
sudo nano /etc/nginx/sites-available/yourdomain.com

server {
        listen 80;
        listen [::]:80;

        root /var/www/yourdomainfolder; #Remember, this is the symlink or your actual project content :) Keeps thing simple
        index index.html index.htm index.nginx-debian.html;

        server_name yourdomain.com wwww.yourdomain.com;

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

Create a symlink of this file within sites-enabled:
sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/

Confirm everything is working:
sudo nginx -t

Finally, restart nginx for changes to take place:
sudo systemctl restart nginx

Follow the steps above for sub-domains. For example, if you have set up a new subdomain A record like projects.yourdomain.com, then create a new serverblock file under sites-available and symbolic link it to sides-enabled.

Make sure serverblock's 'root' parameter points to the right directory.

Nginx configuration tips

/etc/nginx: The Nginx configuration directory. All of the Nginx configuration files reside here.

/etc/nginx/nginx.conf: The main Nginx configuration file. This can be modified to make changes to the Nginx global configuration.
/etc/nginx/sites-available/: The directory where per-site server blocks can be stored. Nginx will not use the configuration files found in this directory unless they are linked to the sites-enabled directory. Typically, all server block configuration is done in this directory, and then enabled by linking to the other directory.

/etc/nginx/sites-enabled/: The directory where enabled per-site server blocks are stored. Typically, these are created by linking to configuration files found in the sites-availabledirectory.

/etc/nginx/snippets: This directory contains configuration fragments that can be included elsewhere in the Nginx configuration. Potentially repeatable configuration segments are good candidates for refactoring into snippets.

Server Logs
/var/log/nginx/access.log: Every request to your web server is recorded in this log file unless Nginx is configured to do otherwise.

/var/log/nginx/error.log: Any Nginx errors will be recorded in this log.

Copy project files from local machine

The following section shows how to transfer a folder efficiently.

Use scp to copy projects from my local machine. SSH needs to be in working order for this to work.

First, compress and collect files by creating a tarball like so:

tar -czvf rentafriend.tar.gz ./friend
-c compress, -z to zip the file, ,-v verbosely list all files, -f is the filename, followed by the folder I am going to compress.

Transfer file to droplet server by going to the directory with the newly created .tar.gz file on your local machine and

scp myfile.tar.gz <username>@X.X.X.X:/var/www/ OR
scp myfile.tar.gz <username>@X.X.X.X:/home/username

Finally, on my remote machine I will uncompress the folder. This will automatically create the foldername with uncompressed content.

tar -xvzf file.tar.gz

In case you have a GitHub, navigate to desired location and clone:

git clone git@github.com:username/my-application-foo-bar.git
and use the /dist or /public directory to serve the content. You can symlink the /public or /dist folder to /var/www to keep things simple ;)

The above symlink idea is inspired from robin wieruch.