Personal Website Guide 2: Cooking up websites on DigitalOcean Droplet
A basic guide for setting up server blocks on Nginx for websites and subdomains.
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.