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.

Subscribe to The Playground

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe