DEV Community

Cover image for How to Connect a Namecheap Domain to a DigitalOcean Droplet with Nginx
Tahsin Abrar
Tahsin Abrar

Posted on

How to Connect a Namecheap Domain to a DigitalOcean Droplet with Nginx

#nginx #dohackathon #dns #webdev

Buying a domain is exciting. Creating a server is exciting too.

But the moment you try to connect both of them, things can feel confusing.

You bought your domain from Namecheap. You created a VPS on DigitalOcean. Now you expect your website to open when someone visits your domain.

But unlike shared hosting or cPanel hosting, DigitalOcean does not automatically connect everything for you.

diagram

You need to set up two important things:

  1. DNS : so your domain points to your server
  2. Nginx : so your server knows how to serve your website

In this guide, we will walk through the full setup in a simple and beginner-friendly way.

By the end, your domain will point to your DigitalOcean Droplet, Nginx will serve your website, and HTTPS will be enabled.

The Big Picture

Before touching any settings, let’s understand the flow.

Namecheap Domain
        ↓
DNS points to DigitalOcean IP
        ↓
DigitalOcean Droplet
        ↓
Nginx Web Server
        ↓
Your Website
Enter fullscreen mode Exit fullscreen mode

Your domain is like a human-friendly address.

Your DigitalOcean Droplet is the actual server.

DNS connects the domain to the server.

Nginx receives the request and serves your website files or forwards traffic to your app.

Step 1: Create a DigitalOcean Droplet

First, create a Droplet on DigitalOcean.

For a beginner project or test website, this setup is usually enough:

Ubuntu 22.04 LTS
Basic Droplet
1 GB RAM
Enter fullscreen mode Exit fullscreen mode

After the Droplet is created, DigitalOcean will give you a public IP address.

It will look something like this:

159.89.xxx.xxx
Enter fullscreen mode Exit fullscreen mode

Keep this IP address safe. You will need it in the next step.

This IP is where your domain will point.

Step 2: Point Your Namecheap Domain to DigitalOcean

Now go to your Namecheap account.

Open:

Domain List
→ Manage
→ Advanced DNS
Enter fullscreen mode Exit fullscreen mode

There are two common ways to connect your domain.

Option A: Use A Records

This is the easiest method for beginners.

Add these DNS records:

Type Host Value
A Record @ Your DigitalOcean IP
A Record www Your DigitalOcean IP

Example:

Type Host Value
A Record @ 159.89.xxx.xxx
A Record www 159.89.xxx.xxx

You can keep TTL as the default value.

Here is what this does:

example.com       → DigitalOcean server
www.example.com   → DigitalOcean server
Enter fullscreen mode Exit fullscreen mode

So both the root domain and the www version will go to the same Droplet.

For most simple projects, this is the best starting point.

Option B: Use DigitalOcean Nameservers

Another option is to manage DNS from DigitalOcean instead of Namecheap.

In DigitalOcean, go to:

Networking
→ Domains
→ Add Domain
Enter fullscreen mode Exit fullscreen mode

Add your domain there.

DigitalOcean will give you nameservers like:

ns1.digitalocean.com
ns2.digitalocean.com
ns3.digitalocean.com
Enter fullscreen mode Exit fullscreen mode

Then go back to Namecheap:

Domain
→ Manage
→ Nameservers
→ Custom DNS
Enter fullscreen mode Exit fullscreen mode

Add those three DigitalOcean nameservers and save.

This method is useful when you want to manage all DNS records from DigitalOcean, especially if you have multiple subdomains or services.

Which DNS Method Should You Choose?

For beginners, use A Records.

It is simple, clear, and easy to debug.

Use DigitalOcean nameservers when your setup becomes larger, for example:

api.example.com
app.example.com
blog.example.com
admin.example.com
Enter fullscreen mode Exit fullscreen mode

For now, we will continue with the beginner-friendly A Record method.

Step 3: Wait for DNS Propagation

DNS changes are not always instant.

Sometimes they work in a few minutes. Sometimes they take longer.

Usually, it can take:

5 minutes to 1 hour
Enter fullscreen mode Exit fullscreen mode

In some cases, it may take up to:

24 hours
Enter fullscreen mode Exit fullscreen mode

You can use tools like DNS Checker to see whether your domain is pointing to the correct server IP.

A common beginner mistake is changing DNS and immediately thinking something is broken. Sometimes nothing is broken. DNS just needs a little time.

Step 4: Connect to Your Server with SSH

Now connect to your DigitalOcean Droplet.

On Mac or Linux, open your terminal.

On Windows, you can use PowerShell or PuTTY.

Run:

ssh root@YOUR_SERVER_IP
Enter fullscreen mode Exit fullscreen mode

Example:

ssh root@159.89.xxx.xxx
Enter fullscreen mode Exit fullscreen mode

The first time you connect, your terminal may ask for confirmation. Type:

yes
Enter fullscreen mode Exit fullscreen mode

Then enter your password or use your SSH key, depending on how you created the Droplet.

Step 5: Install Nginx

Once you are inside the server, update the package list:

sudo apt update
Enter fullscreen mode Exit fullscreen mode

Then install Nginx:

sudo apt install nginx -y
Enter fullscreen mode Exit fullscreen mode

Check if Nginx is running:

sudo systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

If everything is working, you should see that Nginx is active.

At this point, if you open your server IP in the browser, you may see the default Nginx welcome page.

That means your web server is working.

Step 6: Configure the Firewall

Ubuntu servers often use ufw for firewall management.

Allow Nginx traffic:

sudo ufw allow 'Nginx Full'
Enter fullscreen mode Exit fullscreen mode

Also allow SSH so you do not lock yourself out:

sudo ufw allow OpenSSH
Enter fullscreen mode Exit fullscreen mode

Then enable the firewall:

sudo ufw enable
Enter fullscreen mode Exit fullscreen mode

You can check the firewall status with:

sudo ufw status
Enter fullscreen mode Exit fullscreen mode

You should see that HTTP, HTTPS, and SSH traffic are allowed.

Step 7: Create a Website Folder

Now create a folder for your website.

sudo mkdir -p /var/www/myproject
Enter fullscreen mode Exit fullscreen mode

Create a test HTML file:

sudo nano /var/www/myproject/index.html
Enter fullscreen mode Exit fullscreen mode

Paste this:

<h1>Hello from DigitalOcean</h1>
Enter fullscreen mode Exit fullscreen mode

Save the file:

CTRL + X
Y
Enter
Enter fullscreen mode Exit fullscreen mode

This simple file will help us confirm that the domain and Nginx setup are working.

Step 8: Create an Nginx Server Block

An Nginx server block tells Nginx how to handle traffic for a specific domain.

Create a new config file:

sudo nano /etc/nginx/sites-available/myproject
Enter fullscreen mode Exit fullscreen mode

Paste this configuration:

server {
    listen 80;
    server_name example.com www.example.com;

    root /var/www/myproject;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}
Enter fullscreen mode Exit fullscreen mode

Replace this:

example.com www.example.com
Enter fullscreen mode Exit fullscreen mode

With your real domain.

For example:

server_name mycoolsite.com www.mycoolsite.com;
Enter fullscreen mode Exit fullscreen mode

This config says:

“When someone visits this domain, serve files from /var/www/myproject.”

Step 9: Enable the Site

Nginx keeps available site configs in:

/etc/nginx/sites-available/
Enter fullscreen mode Exit fullscreen mode

But it only uses configs that are linked in:

/etc/nginx/sites-enabled/
Enter fullscreen mode Exit fullscreen mode

So we need to enable the site:

sudo ln -s /etc/nginx/sites-available/myproject /etc/nginx/sites-enabled/
Enter fullscreen mode Exit fullscreen mode

Step 10: Test and Reload Nginx

Before restarting Nginx, always test the config:

sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

If everything is fine, you should see something like:

syntax is ok
test is successful
Enter fullscreen mode Exit fullscreen mode

Now reload Nginx:

sudo systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

Open your domain in the browser:

http://yourdomain.com
Enter fullscreen mode Exit fullscreen mode

You should see:

Hello from DigitalOcean
Enter fullscreen mode Exit fullscreen mode

Great. Your domain is now connected to your Droplet.

Step 11: Add HTTPS with Certbot

A production website should use HTTPS.

For that, we can use Certbot with Let’s Encrypt.

Install Certbot:

sudo apt install certbot python3-certbot-nginx -y
Enter fullscreen mode Exit fullscreen mode

Then run:

sudo certbot --nginx
Enter fullscreen mode Exit fullscreen mode

Certbot will ask you to choose the domain.

Select your domain and allow redirect to HTTPS.

After that, your site should work with:

https://yourdomain.com
Enter fullscreen mode Exit fullscreen mode

Certbot also sets up automatic renewal, so your SSL certificate can renew before it expires.

Final Architecture

Your setup now looks like this:

Namecheap
   ↓
DNS A Record
   ↓
DigitalOcean Droplet IP
   ↓
Nginx
   ↓
Website Files
Enter fullscreen mode Exit fullscreen mode

This is a common real-world setup used by many developers.

Why This Feels Different from cPanel Hosting

If you are coming from cPanel hosting, DigitalOcean may feel harder at first.

That is normal.

With cPanel hosting, the hosting company usually handles many things for you:

DNS
Apache or Nginx
SSL
PHP
File manager
Email tools
Enter fullscreen mode Exit fullscreen mode

You often just change nameservers and upload your files.

But with a DigitalOcean VPS, you manage the server yourself.

That means you are responsible for:

Nginx
Firewall
SSL
App runtime
Deployment
Security
Logs
Enter fullscreen mode Exit fullscreen mode

The benefit is flexibility.

You can run Node.js, Laravel, Docker, PostgreSQL, Redis, background workers, multiple apps, and more.

The tradeoff is that you need to understand the server setup.

A Real-Life Example

Imagine you built a small portfolio website.

You bought:

myportfolio.com
Enter fullscreen mode Exit fullscreen mode

from Namecheap.

Then you created a DigitalOcean Droplet with this IP:

159.89.100.50
Enter fullscreen mode Exit fullscreen mode

In Namecheap, you add:

Type Host Value
A Record @ 159.89.100.50
A Record www 159.89.100.50

Then on your server, your Nginx config looks like this:

server {
    listen 80;
    server_name myportfolio.com www.myportfolio.com;

    root /var/www/myportfolio;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}
Enter fullscreen mode Exit fullscreen mode

After reloading Nginx and setting up SSL, visitors can open:

https://myportfolio.com
Enter fullscreen mode Exit fullscreen mode

And see your website.

That is the full journey from domain to live website.

Top comments (0)