Setting Up a Staging Website with Vercel (and Why You Should) - Day 21
So here's the thing - I hit a wall with my travel directory project this week. Not a technical wall, but a collaboration one. My partner Grace has been wanting to help add listings to the platform, but everything was stuck on my local development server. Basically, she couldn't touch anything without being physically next to my laptop in our Bali co-working space.
Quick summary
I walked through setting up a staging server using Vercel, Cloudflare, and my domain from Name.com. The whole process took about 30 minutes (way faster than expected), and now Grace can actually contribute to the project. Plus, I learned some tricks about preventing Google from indexing your staging site - which honestly saved me from a potential SEO nightmare.
Why I finally decided to set this up
Living here in Bali, I've learned that collaboration shouldn't depend on being in the same room. Grace has been patiently waiting to start adding venue listings to our Bali Handbook project, but I kept putting off the staging setup because, well, it felt like extra work.
You know what changed my mind? Realizing that my local-only approach was actually slowing us down. Every time she had an idea or found a cool spot to add, she'd have to tell me about it, then I'd have to input it myself. That's not scaling, and it's definitely not fun for either of us.
The challenge I was facing
Here's what I needed to figure out:
Connect my domain (balihandbook.com) through Cloudflare for protection and speed
Set up the project in Vercel with all the right environment variables
Make sure Google couldn't crawl and index an unfinished site
Create a workflow where Grace could see changes in real-time
I honestly thought this would take hours. Spoiler alert: it didn't.
My usual setup process (and why I stick to it)
I've got a pretty standard workflow that I use for all my projects:
Route domains through Cloudflare (free plan works fine for most projects)
Connect Cloudflare to Vercel
Set up environment variables properly
Connect the domain to Vercel
Configure staging settings
The reason I always use Cloudflare isn't just for the speed boost - it's the protection layer. When you're building something new, you want that extra security buffer.
What I tried first (and the small hiccup)
So I started by navigating to Cloudflare and adding balihandbook.com. The domain scan picked up the current records, and I got the two nameserver records I needed to copy over to Name.com.
Here's where I hit the first small issue - changing nameservers always makes me nervous. You're basically telling the internet "hey, this domain lives somewhere else now." But Name.com makes it pretty straightforward. I just deleted the existing nameservers and added Cloudflare's two records.
The funny thing? Cloudflare says this process takes up to 24 hours, but it was done in about 5 minutes. I literally got the confirmation email while I was setting up the Vercel project.
Setting up the Vercel project (easier than expected)
Once Cloudflare was sorted, I jumped into Vercel. If you're not using Git for your projects yet, seriously consider it. I keep seeing people on X posting about losing entire applications - Git is basically your checkpoint system.
The import process was smooth:
Connected my GitHub repo (I called it "b-travel-directory" but it's actually Bali Handbook now)
Selected the project framework (Next.js in my case)
Added environment variables
The environment variables part (this is important)
Here's something that tripped me up initially - you need to copy all your local environment variables to Vercel. These are stored in your .env file and include things like database connections, API keys, and other sensitive data.
Vercel has this neat feature where you can supposedly paste your entire .env file and it populates everything automatically. That didn't work for me, so I had to add each variable manually. Not a huge deal, just took an extra few minutes.
Pro tip: Make sure you're using the right package manager. For this project, only pnpm worked properly, so I had to specify that in the build settings.
The domain connection magic
Once the Vercel deployment was running (took about 1 minute to build), I connected the domain. This is where having Cloudflare already set up pays off - Vercel automatically detected the connection and configured the DNS records.
I always prefer short URLs, so I set balihandbook.com as the primary domain and added a redirect from www.balihandbook.com. Personal preference, but I think clean URLs look more professional.
The "oh wait, Google can't see this yet" moment
Here's where I had a mini panic attack. The staging site was live and potentially crawlable by Google, but it's nowhere near ready for public consumption. I definitely don't want Google indexing an incomplete site - that's an SEO nightmare waiting to happen.
I used Cursor AI to quickly add no-index tags and a robots.txt file that blocks all crawling. The AI generated the code to add to the head of each page:
<meta name="robots" content="noindex, nofollow">Plus a robots.txt file that disallows everything:
User-agent: *
Disallow: /I committed these changes to Git, and Vercel automatically rebuilt and deployed the updated version. Within a few minutes, the staging site was live but completely hidden from search engines.
Testing everything (and the relief when it worked)
The moment of truth - visiting balihandbook.com for the first time. Everything loaded perfectly. The images worked, the navigation functioned, and when I checked with a browser extension, it confirmed the no-index tags were in place.
I honestly expected at least one thing to break. Maybe it's because I've been doing this for a while, but having a smooth deployment still feels like a small miracle.
What this means for the project moving forward
Now Grace can access the staging site and start adding listings without needing to be next to my laptop. She can see changes in real-time, and we can collaborate properly.
More importantly, I can push updates to the staging environment and test everything before it goes live. This is especially crucial for SEO optimization - I want to get all the meta descriptions, structured data, and content polished before Google ever sees the site.
The stuff I'm still working on
The staging setup is done, but there's still a bunch of work ahead:
Finalizing the restaurant and accommodation pages
Adding proper SEO optimization for each listing
Setting up the email system and Instagram integration
Creating privacy policy and terms of service pages
Optimizing images for faster loading
Once all that's complete, I'll remove the no-index tags and let Google start crawling. But not before everything is perfect.
Lessons I'm taking from this
Setting up staging doesn't have to be complicated or time-consuming
Cloudflare's "24-hour" nameserver changes often happen in minutes
Always, always block search engines from crawling unfinished sites
Having a proper deployment workflow makes collaboration so much easier
Git + Vercel + Cloudflare is a solid, reliable stack for most projects
What I'm working on next
Tomorrow I'm diving into the SEO optimization for individual listings. I want to make sure each restaurant and accommodation page is properly structured for search engines before we go live.
I'm also planning to explore some cold outreach strategies for getting venues to partner with us. But first, the technical foundation needs to be rock solid.
Final thoughts
You know what's funny? I kept putting off this staging setup because I thought it would be this massive technical hurdle. Turns out, it was one of the smoother parts of this entire project.
If you're building something and collaborating with others, don't wait as long as I did to set up proper staging. It's not just about the technical benefits - it's about making the whole process more enjoyable for everyone involved.
Living here in Bali has taught me that the best projects happen when people can contribute their strengths without technical barriers getting in the way. Now Grace can focus on what she does best (finding amazing places), while I handle the code.
Following along with my 60-day challenge to build a travel directory? I'm documenting everything - the wins, the failures, and the random discoveries along the way. What staging challenges have you run into with your projects?