Learn to combine Hostinger's affordable domain registration with Vercel's serverless platform for a professional custom domain, static site hosting, and dynamic serverless functions, all for under $10 a year. This step by step guide covers DNS setup, deployment, and cost optimization for developers.
You want a professional custom domain for your portfolio or SaaS landing page, but you also want the performance and scalability of Vercel's serverless platform without the $20/month managed host cost. The solution is a Hostinger Vercel integration: use Hostinger for cheap domain registration (around $2/month) and let Vercel handle everything else from static hosting to serverless functions. This guide walks you through the exact steps to set this up, with real code, real commands, and honest trade-offs.
What You'll Build
A live website deployed on Vercel, served from your own custom domain (like yourname.com) purchased through Hostinger. Your site will include a static frontend and at least one serverless function (for example, a contact form handler). Total recurring cost: under $10 per year for the domain. The Vercel free tier gives you 100 GB bandwidth and 100 serverless function invocations per day, more than enough for a developer portfolio or small project.
Prerequisites
- A Hostinger account with an active domain (either newly purchased or transferred in).
- A Vercel account (free tier is sufficient).
- A Git repository (GitHub, GitLab, or Bitbucket) containing your project code.
- Basic comfort with the command line and DNS settings. If you can edit a CNAME record, you're good.
Step 1: Prepare Your Domain on Hostinger for Vercel
Your domain needs to point to Vercel. You have two options: switch nameservers to Vercel's (recommended for apex domains like yourdomain.com) or keep Hostinger nameservers and add a CNAME record (good for subdomains like www.yourdomain.com). For this guide we'll use the nameserver approach, which gives Vercel full control and simplifies SSL certificate management.
Change Nameservers in Hostinger
- Log into your Hostinger account and open hPanel.
- Go to Domains > Manage and select your domain.
- Navigate to DNS / Nameservers.
- Select Change nameservers and set them to:
ns1.vercel-dns.com ns2.vercel-dns.com - Click Save. Propagation typically takes 5 to 30 minutes, but it can take up to an hour.
If you prefer not to change nameservers (for example, you have other DNS records on Hostinger), you can instead keep Hostinger's nameservers and add a CNAME record for a subdomain (like www) pointing to cname.vercel-dns.com. I recommend the nameserver approach for a cleaner setup, especially if you plan to use Vercel's automatic HTTPS certificates.
Step 2: Deploy Your Site to Vercel
With the domain pointing to Vercel, we can now deploy the site. Vercel supports most frameworks (Next.js, Gatsby, Hugo, plain HTML) and auto detects the build settings. If you are deploying a static site without a framework, you can simply push your index.html file to a GitHub repository.
Import Your Git Repository
- In your Vercel dashboard, click Add New Project.
- Connect your GitHub (or GitLab/Bitbucket) account and select the repository containing your project.
- Vercel will automatically detect the framework (if any) and set the build command. For a plain static site, it uses no build step.
- Click Deploy.
Within a minute you'll see a success screen with a vercel.app URL (e.g., your-project.vercel.app). Verify everything works before adding the custom domain.
Add Your Custom Domain
- In your project dashboard on Vercel, go to Settings > Domains.
- Type your domain (e.g.,
yourdomain.com) and click Add. - Vercel will verify that the DNS is pointing to them and issue an SSL certificate automatically. This can take a few minutes.
- Once verified, your site will be live on your custom domain.
If you used the nameserver approach, you should also add a www subdomain here. Vercel will handle the redirect to your apex domain.
Step 3: Add Serverless Functions
This is where the Hostinger Vercel integration really shines. You get dynamic functionality (form handling, API calls, database queries) without running a full server. Vercel Functions are just files in a /api folder at the root of your project. They support Node.js, Python, Go, and Ruby.
Let's build a simple contact form handler in Node.js. Create a file at /api/contact.js with this content:
export default function handler(request, response) {
const allowedMethods = ['POST', 'GET']
if (!allowedMethods.includes(request.method)) {
return response.status(405).json({ error: 'Method not allowed' })
}
if (request.method === 'GET') {
return response.status(200).json({ message: 'Send a POST with your name and email.' })
}
const { name, email, message } = request.body
if (!name || !email || !message) {
return response.status(400).json({ error: 'Name, email, and message are required.' })
}
// In production, store in a database or send an email.
// For now, just log and confirm.
console.log('New contact form submission:', { name, email, message })
response.status(200).json({ success: true, message: 'Thanks for reaching out!' })
}
Commit and push to your Git repository. Vercel will automatically redeploy. Now you can call this function from your frontend with a fetch request:
const response = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Alice', email: 'alice@example.com', message: 'Great site!' })
})
const data = await response.json()
console.log(data)
Because the function lives in the same project, the URL is relative. No CORS headaches. You can also use environment variables to store API keys (like a SendGrid API key for email delivery). Set them in Vercel's dashboard under Settings > Environment Variables.
Step 4: Cost Breakdown and Scaling
The entire setup costs you almost nothing. Here is the real math as of 2026:
- Hostinger domain registration: Approximately $2 per month for the first year, then around $10 per year for renewal. That is your only recurring cost.
- Vercel free tier: 100 GB bandwidth per month, 6000 build minutes, and 100 serverless function invocations per day. For a personal portfolio or small SaaS landing page, you will never exceed these limits.
If you grow and need more, Vercel Pro costs $20 per month and gives you 1 TB bandwidth, 1000 function invocations per day, and team features. Still a bargain compared to traditional VPS or managed hosting. And because Vercel runs on a global CDN, your site loads fast everywhere without any manual scaling.
One important note: you do not need any Hostinger hosting plan beyond domain registration. Their shared hosting is not required when using Vercel. Just renew your domain at Hostinger and let Vercel do the heavy lifting.
Monitor your usage in the Vercel dashboard under Usage. You can set spending limits and alerts to avoid surprises if you ever go Pro.
Common Pitfalls
- DNS propagation delays. After changing nameservers, it can take up to an hour. Be patient. Do not try to verify the domain on Vercel during this time.
- Forgetting to add the www subdomain. If you only add your apex domain, visitors typing www.yourdomain.com will see an error. Add both and let Vercel redirect.
- Not using environment variables. Hard coding secrets in your serverless functions is insecure. Always use Vercel's environment variable storage for API keys and database URLs.
- Neglecting the build settings for static sites. If you are using a framework like Next.js, leave the auto detected settings. For plain HTML, no build command is needed.
Next Steps
Now that your site is live on your own domain with serverless backend, you can extend it in many directions. Add a database (Vercel offers integration with Neon, PlanetScale, and Supabase). Set up automated CI/CD with GitHub Actions. Or build a full serverless API for your side project.
If you are looking to automate more of your workflow, check out our guide on automating customer support with an AI agent or learn how to build your first Claude skill to enhance your serverless functions with AI.
For those who want to go deeper into automating personal brand or data insights, our tutorials on brand autopilot and Claude AI business analytics show how to connect these tools with Vercel serverless functions for powerful outcomes.
Summary
Pairing Hostinger's cheap domains with Vercel's serverless platform gives you a professional, scalable web presence for literally a few dollars a year. You get the best of both worlds: a custom domain from a trusted registrar and a modern, global hosting platform with functions. No monthly hosting fees, no server management, no compromises. Follow the steps above, and you'll have a production ready site in under an hour.
Cover photo by Google DeepMind on Pexels.
Frequently Asked Questions
Do I need a Hostinger hosting plan to use Vercel? +
No. You only need to register your domain through Hostinger. Their shared hosting plans are optional and unnecessary when using Vercel. The domain registration is the only expense.
What if I already have a domain on Hostinger with existing DNS records? +
You have two options. Either switch nameservers to Vercel (which will override all DNS records) or keep Hostinger nameservers and add a CNAME record for your subdomain pointing to cname.vercel-dns.com. The nameserver approach is simpler if you are moving the entire site to Vercel.
Can I use Vercel serverless functions with a static site builder like Hugo or Eleventy? +
Yes. The /api directory works regardless of your static site generator. Vercel treats it as a separate serverless function deployment. Just make sure you define the build output directory correctly in your Vercel project settings.
Lucas Oliveira