Integrating Vercel Frontend with Hostinger Blog Using Cloudflare DNS: A Comprehensive Guide

Building a custom website that combines the flexibility of a WordPress blog and a fully customized frontend is a great way to showcase both creativity and technical skills. In this post, I’ll explain how I use Vercel for my main website, Hostinger for my blog (powered by WordPress), and Cloudflare as a central point to manage all my DNS records. If you’re aiming for similar functionality, I’ll walk you through why this setup works well and how you can replicate it for your projects.

Why Use Hostinger for the Blog and Vercel for the Frontend?

The reason I use Hostinger as my blog host is the ease and power of WordPress. WordPress is a robust platform for creating and managing blog posts with plenty of built-in tools and themes that can save time. I wanted to make the blogging process as straightforward as possible.

For the main website, I use Vercel because it allows me to fully customize the frontend, giving me the freedom to design a unique user experience. Vercel is optimized for fast, modern web applications and provides excellent deployment tools for custom frontend projects. I use Vercel to display my frontend design skills, ensuring that my site looks exactly how I want it.

I also use the WordPress API to pull in blog posts dynamically into the Vercel frontend, combining the power of WordPress content management with a customized UI that I designed myself.

Why Use Cloudflare for DNS Management?

In this setup, Cloudflare serves as the central point for controlling all DNS records and domain manipulations. Instead of managing DNS records separately in multiple places (Hostinger, Vercel, or a domain registrar like GoDaddy), Cloudflare allows me to centralize all these controls. This centralization makes it easier to manage changes, configure security features, and adjust performance settings for my entire domain from one platform.

With Cloudflare as my DNS provider, I can handle all domain traffic—whether it’s going to Vercel for my main site or Hostinger for my blog—via a single, user-friendly dashboard.

How You Can Replicate This Setup

If you’d like to build a similar system where your main site is a custom frontend hosted on Vercel and your blog is hosted on Hostinger using WordPress, here’s what you’ll need:

Step-by-Step Process

Get Your Domain
- Start with a root domain from any domain registrar, such as GoDaddy, Namecheap, or any other provider. For this example, we’ll call it yourdomain.com.
Create a Cloudflare Account
- Sign up for Cloudflare and add your domain (yourdomain.com) to Cloudflare.
- Update the nameservers on your domain registrar to point to Cloudflare‘s nameservers. This means Cloudflare will now manage all DNS records for your domain.
Set Up DNS Records on Cloudflare
- Add an A record for your root domain (@) and point it to Vercel’s IP address. This will allow your main domain (yourdomain.com) to show your custom Vercel frontend.
- Add a CNAME record for www to cname.vercel-dns.com. This will also ensure the www version of your domain points to Vercel.
- Create an A record for your subdomain (blog.yourdomain.com) and point it to the IP address provided by Hostinger. This will direct all traffic for the blog subdomain to Hostinger, where your WordPress blog is hosted.
Set Up Hosting
- Hostinger Setup: Create a WordPress installation on Hostinger. You’ll use blog.yourdomain.com as the address for this installation.
- Vercel Setup: Deploy your custom frontend to Vercel and connect it to yourdomain.com.
Configure Cloudflare Proxy
- For the root domain (yourdomain.com) and www, enable Cloudflare’s proxy (the orange cloud icon) to benefit from performance enhancements and security.
- For the blog subdomain (blog.yourdomain.com), disable the proxy (set it to DNS only). This ensures that the connection from Cloudflare to Hostinger remains stable and direct.
Use the WordPress API (Optional)
- If you want to display your blog posts on your custom frontend, you can use the WordPress REST API to fetch and display the content. This setup allows you to seamlessly integrate new blog posts into your custom-designed frontend.

Summary of DNS Records to Set Up on Cloudflare

A Record for Main Domain:
- Name: @ (yourdomain.com)
- Content: Vercel IP Address (e.g., 76.76.21.21)
- Proxy Status: Proxied
CNAME Record for www:
- Name: www
- Content: cname.vercel-dns.com
- Proxy Status: Proxied
A Record for Blog Subdomain:
- Name: blog
- Content: Hostinger IP Address (e.g., 89.116.53.107)
- Proxy Status: DNS Only

Visual Representation

To help make things clearer, I’ve created a flow chart illustrating how all these elements work together:

Domain Registrar (GoDaddy, etc.): Holds the domain, but the nameservers are updated to Cloudflare.
Cloudflare: Central DNS management tool that directs traffic based on subdomains.
- Root Domain (yourdomain.com): Directed to Vercel (Frontend).
- Subdomain (blog.yourdomain.com): Directed to Hostinger (WordPress blog).
Vercel: Hosts the main custom frontend.
Hostinger: Hosts the blog subdomain using WordPress.

This setup allows you to have the best of both worlds: a powerful blogging platform with WordPress and a fully customizable frontend that showcases your skills as a designer or developer.

Conclusion

Using Cloudflare to manage your DNS records offers simplicity, flexibility, and security. By pointing your root domain to Vercel and your subdomain to Hostinger, you create a setup that allows you to have a custom frontend for your main site while retaining the ease of WordPress for blogging. This setup is perfect for anyone who wants to showcase both technical skills and create content effectively.

Feel free to follow this guide if you want to replicate a similar setup, and don’t hesitate to reach out if you have any questions or need more help!

If this post has inspired you to take control of your DNS setup, I’d love to hear your thoughts or answer any questions you may have in the comments below. Good luck with your project, and happy building!