Deploying Wagtail site on Digital Ocean

I have been rebuilding my PHP-based site using Django-based CMS Wagtail. The Wagtail part ended up being the easy part. Deployment, however, was another animal on its own.

Deployment on Existing Hosting

My old site was on A2 Hosting's shared hosting environment. Their price was good, with reliable service and support. In fact, when I encountered issues trying to host a Django project - and their doc clearly stated that Django is not actually supported - they still tried to help me.
And it did worked! I hosted the Django site successfully... I just can't get Wagtail to load static files correctly.
The issue, as I eventually realized, is that I need to make some changes to some of the configurations - and those are configurations NOT accessible through shared hosting. This is clearly not a fitting use of shared hosting. So, after some research, I decided to say farewell to A2 Hosting.

Deployment on Digital Ocean: Setting Up... And The Problem

Digital Ocean provides various documentations to make the whole process easier. I mainly followed two:

How To Set Up Django with Postgres, Nginx, and Gunicorn on Ubuntu 18.04

How To Secure Nginx with Let's Encrypt on Ubuntu 20.04

To be sure that the basic setup was done correctly, I started with a clean, untouched Django project. Unfortunately, the site itself doesn't load. In addition, when I try to obtain a SSL certificate, I keep getting this little error:

To fix these errors, please make sure that your domain name was entered correctly and the DNS A/AAAA record(s) for that domain contain(s) the right IP address

I know I already setup the domain, and it was correctly. I even redo it again just in case I missed a step or two. To my frustration, I have to wait 72 hour both time to make sure it wasn't a simple propagation issue. It was not.

Deployment on Digital Ocean: The Missing Notes

I did eventually resolved all the issues I encountered. Here are the solutions I found, and I hope they will help those new to hosting Django on Digital Ocean who are encountering similar issues:

The docs talked about opening firewall via ufw command, but you have to open it in the Digital Ocean dashboard too! Go to Networking -> Firewall. Make sure inbound rules for HTTP/HTTPS actually exist.

The site is now loading... but getting error messages! When I reading the gunicorn journal logs (use command sudo journalctl -u gunicorn -r), I learned that my environment variables are not being found in the wsgi.py file. Eventually, I find a post about the issue in StackOverflow here: https://stackoverflow.com/questions/38178836/django-settings-secret-key-environment-variable-502-nginx . Basically, for Nginx, I can set up my env variable for settings-related files inside gunicorn.service file instead.

The Django site was loading, but the stylesheet wasn't updating when I made changes. To jumpstart the changes, I did: python manage.py collectstatic --noinput --clear and sudo systemctl restart gunicorn

When I tested the contact form, no email was sent. I needed to use ufw and update /etc/nginx/sites-available/website.com for tcp port of outgoing email (587/tcp).