Hosting your frontend application on Vercel or Netlify is quite simple; you just need to provide access to your repository and the build command. Recently, I moved my personal portfolio from Next.js to Astro because my portfolio has more static content. My previous Next.js site was deployed on both Vercel and Netlify, so it was easy to deploy by just changing the build command. However, since I recently bought a Virtual Private Server (VPS) from Digital Ocean (Droplet), I decided to host my portfolio there and serve it through Cloudflare.
In this article, we'll explore how I achieved this using my VPS, Caddy server, and Cloudflare, and how you can do it too by following the steps. But first, let's briefly understand what the are.
Cloudflare:
You might already know about Cloudflare, a well-known company that offers services to enhance website performance and security. I'm using Cloudflare's reverse proxy service, which is nearly free. You might wonder, what is a reverse proxy? Simply put, a reverse proxy is a server that sits between my VPS and the user. It acts as a protective layer between my website and the public, helping to hide my server's IP address and prevent certain types of malware and cyberattacks.
Caddy server:
Caddy server is a free and open-source web server written in Golang. You might have heard of Apache or Nginx web servers, right? Caddy is similar to those, but it is secure by default. Caddy automatically gets and renews TLS certificates, making secure HTTPS connections easy.
P.S. I should mention that I already have my domain and a Cloudflare account. I also purchased a VPS from DigitalOcean with a Debian setup. This article won't cover these setups.
Adding VPS IP to Cloudflare
First, go to your
First, let's set up our SSL/TLS encryption. On the Cloudflare dashboard, click on the domain name you added (for example, dushmanta.dev in my case). This will open the domain overview page and settings, which should look like this:
From the SSL/TLS overview page, go to the configuration settings. It should look something like this:
The reason to choose "Full (Strict)" is to ensure the request connection is encrypted from end to end. This means when someone visits your domain, the request goes to Cloudflare, and then Cloudflare serves the content by connecting to your VPS. The flow looks like this:
User → Cloudflare: HTTPS
Cloudflare → Your VPS: HTTPS with a validated certificate
VPS → Cloudflare
Cloudflare → User (HTTPS)
Get Your Droplet (VPS) Ipv4
Now, let's get the IP of the VPS from the
Add “A” records to Cloudflare DNS
On the domain settings page, go to the DNS section.
Before adding our VPS server's IP, we need to delete all the "A", "AAAA", and "CNAME" records (only for the root domain) if they exist. After removing them, we need to add "A" and "CNAME" DNS records pointing to the VPS IP address.
"A" record: Name → @, VPS IPv4 address, Proxy status → on
"CNAME" record: Name → WWW, Target → Original domain name, Proxy status → on
When adding a new DNS record, set the type to "A". In the Name section, add @, which represents your website (in my case, it’s dushmanta.dev), and ensure the proxy status is turned on. Then save it. It should look like this.
, it will redirect to the main website. Set your website as the target and ensure the proxy status is turned on. It should look like this.
. There are two releases: a stable release and a testing release. It is recommended to use the stable release to avoid any issues. My server is Debian, so I will install the apt package.
sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https curl
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy
Set Proper Permission
Next, give Caddy the correct permissions for the folder where the build files are located using the following command:
sudo chown -R caddy:caddy /var/www/your-site
# sudo chown -R caddy:caddy /var/www/portfolio
Setting Up Caddy Service Configuration
Now, let's verify or create the systemd Caddy service configuration. This setup ensures that the systemd service file automatically manages Caddy's lifecycle, which includes automatic starts, restarts, and proper resource management on the server.
Open the service file with the following command (this command will create the file if it doesn't exist):
sudo nano /etc/systemd/system/caddy.service
The service file should look something like this:
[Unit]
Description=Caddy web server
Documentation=https://caddyserver.com/docs/
After=network.target network-online.target
Requires=network-online.target
[Service]
Type=notify
ExecStart=/usr/bin/caddy run --config /etc/caddy/Caddyfile
TimeoutStopSec=5s
LimitNOFILE=1048576
[Install]
WantedBy=multi-user.target
If it's empty, update the file with the contents provided above and be sure to save it.
Notes:
This configuration makes sure Caddy starts automatically with your system.
It waits for network connectivity before starting.
The service is set up to handle high loads with
LimitNOFILE.
After saving the configuration, make sure to follow the next steps:
Reload systemd daemon:
sudo systemctl daemon-reload
Start Caddy service:
sudo systemctl start caddy
Check status:
sudo systemctl status caddy
Enable auto-start:
sudo systemctl enable caddy
Configure the Caddyfile
After setting the correct permissions and configuring the systemd Caddy service file, let's set up the Caddyfile. This is where we configure our domain settings and file serving options. To learn more about the Caddyfile, check out the official documentation.
To edit the Caddyfile, run the following command:
sudo nano /etc/caddy/Caddyfile
Basic Configuration Structure:
Domain names (both root and www)
TLS configuration for Cloudflare SSL
Root directory path (your build folder)
File server directive (helps serve web pages from the directory mentioned above)
Here's how the Caddyfile should look:
example.com, www.example.com {
# TLS configuration for Cloudflare
tls {
protocols tls1.2 tls1.3
}
root * /var/www/site-name # the build folder
file_server # File server directive
}
Example Implementation:
For my website, the Caddyfile looks like this:
dushmanta.dev, www.dushmanta.dev {
tls {
protocols tls1.2 tls1.3
}
root * /var/www/portfolio
file_server
}
Save the configuration file and then restart the Caddy service with the following command:
sudo systemctl restart caddy
And voilà! You've set up your Caddy server on your VPS, and it's ready to be served through Cloudflare.
Testing Your Configuration
Now, test if it works by using curl for both DNS records.
curl -v https://example.com
curl -v https://www.example.com
# Example
# curl -v https://dushmanta.dev
# curl -v https://www.dushmanta.dev
If you find any errors, make sure to configure your Caddy service and Caddyfile correctly, and check that your DNS settings are correct in your Cloudflare dashboard.
I hope this article helps if you're trying to host your website on your personal VPS with Caddy server and Cloudflare. Please let me know if you find any mistakes or have suggestions for improvement. Thank you, and happy coding! :)
SOCIAL SHARE CARD GENERATOR