DEV Community

Cover image for 🌐 A Complete Guide: How to Assign a Domain to Your Website and Host It on a Server
Dulaj Thiwanka
Dulaj Thiwanka

Posted on

🌐 A Complete Guide: How to Assign a Domain to Your Website and Host It on a Server

If you've built a website and are wondering β€œHow do I make this live with a custom domain like mywebsite.com?” β€” this guide is for you.

In this tutorial, you’ll learn everything from buying a domain name to pointing it to your server and hosting your website. Whether you're deploying a simple static site or a full-stack app, I’ll walk you through both beginner-friendly and advanced approaches.


πŸ›’ Step 1: Buy a Domain Name

To get started, you need to purchase a domain name β€” your digital address on the internet.

βœ… Where to buy:

πŸ’‘ Tips:

  • Choose a .com, .net, or a country-specific TLD like .lk for Sri Lanka.
  • Keep it short, brandable, and easy to remember.

Once purchased, you’ll gain access to DNS settings β€” this is where you’ll connect the domain to your server or hosting provider.


πŸ§‘β€πŸ’» Step 2: Choose Your Hosting Platform

There are many hosting platforms available depending on your tech stack and needs.

πŸ›  Static Site (HTML, CSS, JS):

βš™οΈ Dynamic / Full-Stack App (Node.js, Python, etc.):

For this guide, I’ll show two deployment paths:

  1. With Vercel
  2. With a custom VPS using Nginx

πŸ”— Step 3: Connect Domain to Hosting Provider

βœ… Option A: Assign a Domain on Vercel or Netlify (Easy)

On Vercel:

  1. Go to your Vercel dashboard > Select your project.
  2. Click on Settings > Domains.
  3. Add your domain (e.g., yourdomain.com).
  4. Vercel will give you DNS records to add.

On Domain Registrar:

  1. Go to your domain registrar (e.g., Namecheap).
  2. Find DNS settings for your domain.
  3. Add a CNAME record or A record provided by Vercel.
  4. Save changes and wait for DNS to propagate (up to 24 hrs, usually quicker).

Once propagation is done, your domain will start pointing to your Vercel app!


βœ… Option B: Point Domain to a Custom VPS (Advanced)

Let’s say you have a server (VPS) on DigitalOcean or AWS.

  1. Get your public IP address (e.g., 142.93.123.12)
  2. Go to your Domain DNS settings
  3. Add an A Record:
  • Host: @
  • Type: A
  • Points to: Your server's IP
  • TTL: Automatic or 30 mins

For subdomains like www or app.domain.com, add a separate A or CNAME record.


πŸ“¦ Step 4: Deploy Your Website to the Server

Static Site (VPS example):

Upload your files to /var/www/html or a custom directory.

scp -r ./your-website-files user@your-server-ip:/var/www/yourdomain.com
Enter fullscreen mode Exit fullscreen mode

Node.js App Example:

  1. Clone your app to your VPS:
git clone https://github.com/your/repo.git
cd repo
npm install
Enter fullscreen mode Exit fullscreen mode
  1. Run using PM2:
npm install -g pm2
pm2 start server.js
Enter fullscreen mode Exit fullscreen mode

πŸ” Step 5: Setup Nginx as a Reverse Proxy (Optional but Recommended)

If you're using Node.js or another backend, set up Nginx to route traffic to your app.

Sample Nginx config:

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

    location / {
        proxy_pass http://localhost:3000; # your backend port
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
Enter fullscreen mode Exit fullscreen mode
  1. Save this to /etc/nginx/sites-available/yourdomain
  2. Create a symlink:
ln -s /etc/nginx/sites-available/yourdomain /etc/nginx/sites-enabled/
Enter fullscreen mode Exit fullscreen mode
  1. Test and restart Nginx:
sudo nginx -t
sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

πŸ”’ Step 6: Secure Your Site with HTTPS (Free SSL)

Use Let’s Encrypt via Certbot.

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

Certbot will guide you to:

  • Select your domain
  • Automatically configure SSL
  • Enable HTTPS access

Your website will now be accessible securely at https://yourdomain.com.


πŸ“Œ Optional: Set Up Domain Email (e.g., info@yourdomain.com)

Use providers like:

  • Zoho Mail (Free tier available)
  • Google Workspace
  • ProtonMail (Custom domain support)

You'll need to update MX Records in your domain DNS to enable email.


βœ… Final Checklist

Step Status
Domain Purchased βœ…
Hosting Platform Chosen βœ…
Domain Connected (DNS) βœ…
App Deployed βœ…
Nginx Configured (optional) βœ…
SSL/HTTPS Enabled βœ…

🧠 Final Thoughts

Assigning a domain and hosting your site may seem daunting at first, but it's actually a straightforward process once you understand the flow:

  1. Domain β†’ DNS setup
  2. App β†’ Hosting or VPS
  3. Reverse Proxy & SSL β†’ Production-ready

Once you’ve done it a couple of times, it becomes second nature.

Let me know if you'd like a separate article on CI/CD, Dockerizing apps, or domain email integration next!


πŸ’¬ Let’s Connect!

Did you just launch your site? Drop your link in the comments!

Or follow me for more:

  • DevOps
  • JavaScript
  • React & Node
  • Freelancing & Career tips

Top comments (0)