Skip to content

Overview

This guide covers the complete pipeline for taking a Lovable.dev project and deploying it to a custom Atlantis ITS subdomain --- for free, without upgrading to Lovable Pro. Lovable Pro charges for custom domain connections, but the same result is achieved in minutes via GitHub → Vercel → Cloudflare.

This pipeline was validated live during the Atlantis Travels deployment on March 15, 2026:

✅ https://travel.atlantisits.co --- LIVE --- deployed using this exact pipeline in under 10 minutes

The Pipeline

Lovable.dev (build the site with AI)
↓ auto-sync (free)
GitHub repo (Golboni org)
↓ import (free)
Vercel (deploy + host)
↓ CNAME record
Cloudflare DNS (DNS Only --- Grey Cloud)
↓
yoursubdomain.atlantisits.co ← LIVE ✅

💡 Once set up, this pipeline is fully automatic. Every time you make changes in Lovable → auto-pushes to GitHub → Vercel auto-deploys → subdomain updates live. Zero manual steps for future updates. No Lovable credits needed for hosting --- credits only used for AI edits in Lovable.

When to Use This Guide

  • Deploying any Lovable.dev project to an Atlantis ITS subdomain

  • Creating splash pages, landing pages, or client sites with a custom URL

  • Avoiding Lovable Pro upgrade for custom domain connection

  • Any new subdomain under atlantisits.co pointing to a Vercel-hosted site

💡 This same pipeline works for ANY static site hosted on GitHub --- not just Lovable projects. React apps, Next.js, plain HTML --- if it\'s in GitHub, Vercel can deploy it to a custom subdomain.

Pre-Flight Checklist

Item Status

Lovable project built and live Confirm before starting at lovable.app URL

GitHub connected to Lovable Required --- see Step 1 (Settings → GitHub)

Vercel account active ✅ Already set up (golboni\'s projects)

Cloudflare managing ✅ Already set up atlantisits.co DNS

Target subdomain decided e.g. travel.atlantisits.co

Step 1 --- Connect Lovable to GitHub

If your Lovable project is not yet connected to GitHub, do this first. If already connected (auto-sync active), skip to Step 2.

1.1 Connect via Lovable Settings

  1. Log in to your Lovable account at https://lovable.dev

  2. Open your project

  3. Go to Settings → GitHub → Connect project

  4. Click Connect with GitHub → you are redirected to GitHub.com

📸 --- Lovable Settings panel showing GitHub connection option

1.2 Authorize Lovable on GitHub

  1. GitHub shows the authorization screen --- Lovable wants access to your repositories

  2. Choose access level:

Option Recommendation

All repositories Easiest --- Lovable can see all repos. Fine for personal use.

Only select repositories Safer --- Lovable only touches repos you explicitly allow. Recommended for Atlantis.

  1. Click Authorize Lovable (green button)

  2. GitHub redirects back to Lovable --- connection complete

📸 {width="6.4383989501312335in" height="4.594390857392826in"}--- GitHub authorization screen for Lovable --- showing repository access selection

1.3 Verify Auto-Sync is Active

In Lovable --- any changes you make now automatically push to GitHub. Verify by checking:

  • Settings → GitHub → should show Connected and repo name

  • Or type in Lovable chat: \'sync to GitHub\' --- it will confirm

⚠️ If you revoke Lovable\'s GitHub access later: GitHub → Settings → Applications → Authorized OAuth Apps → Find Lovable → Revoke. Re-connect via Lovable Settings if needed.

Step 2 --- Grant Vercel Access to the GitHub Repo

Vercel can only deploy repos it has permission to access. After connecting a new Lovable project to GitHub, you need to add it to Vercel\'s allowed repo list.

  1. Go to: https://github.com/settings/installations

  2. Find Vercel in the list → click Configure

  3. Under Repository access → click Select repositories dropdown

  4. Search for your Lovable repo name → select it

  5. Click Save

📸 SCREENSHOT PLACEHOLDER --- GitHub installations page showing Vercel app with Repository access settings --- atlantis-travels selected

💡 You only need to do this once per repo. After granting access, Vercel can deploy that repo forever without repeating this step. Current approved repos: Golboni/atlantis-travels, Golboni/popoff-app, Golboni/atlantis-ai.

Step 3 --- Import Repo to Vercel & Deploy

  1. Go to: https://vercel.com/new

  2. Click Import Git Repository

  3. Select Golboni org from the dropdown

  4. Search for your repo name → click Import

📸 SCREENSHOT PLACEHOLDER --- Vercel Import Git Repository screen --- Golboni org selected, searching for repo

3.1 Configure the Project

Setting Value

Vercel Team golboni\'s projects (Hobby)

Project Name your-repo-name (auto-filled --- keep as is)

Framework Preset Vite (auto-detected for Lovable projects)

Root Directory ./ (leave as default)

Environment Variables None needed for static Lovable sites

💡 Vercel auto-detects Vite for Lovable-built projects. Do not change the framework preset --- it will be correct automatically.

  1. Click Deploy --- Vercel builds and deploys in 30-60 seconds

📸 {width="5.9695833333333335in" height="6.063346456692913in"}--- Vercel New Project configuration screen showing Vite preset, root directory ./, Deploy button

3.2 Deployment Success Screen

After deploy completes, Vercel shows a Congratulations screen with a preview of your site. You will see:

  • Next Steps section with Add Domain option

  • Your site live at [projectname].vercel.app

📸 {width="6.24045384951881in" height="7.271848206474191in"}--- Vercel Congratulations screen showing Atlantis Travels site preview with Add Domain option

Click Add Domain to proceed directly to Step 4. Or navigate to: Project → Settings → Domains.

3.3 Fix SPA Routing --- Add vercel.json (REQUIRED for Lovable sites)

Lovable builds React Single Page Applications (SPAs). When deployed to Vercel, internal page routes like /travel-insurance or /about return 404 errors even though they work fine on the lovable.app URL. This is because Vercel tries to find a physical file at that path instead of letting React Router handle navigation.

⚠️ Do this BEFORE testing your custom subdomain. If you skip this step, all internal page links on your site will return 404: NOT_FOUND on Vercel even though the homepage loads fine. Confirmed issue on Atlantis Travels --- March 15, 2026.

Fix: add a vercel.json file to the root of the GitHub repo. This tells Vercel to route all requests through index.html and let React Router handle them.

  1. Go to: https://github.com/Golboni/[your-repo-name]

  2. Click Add file → Create new file

  3. Name the file: vercel.json

  4. Paste this exact content:

+-----------------------------------------------------------------------+ | { | | | | \"rewrites\": [ | | | | { \"source\": \"/(.*)\", \"destination\": \"/\" } | | | | ] | | | | } | +=======================================================================+

  1. Scroll down → Commit changes → Commit directly to main → Commit changes

  2. Vercel auto-deploys in 60 seconds

  3. Test: visit travel.atlantisits.co/travel-insurance → should load correctly ✅

📸 SCREENSHOT PLACEHOLDER --- GitHub --- creating vercel.json file in atlantis-travels repo root with SPA rewrite rule

Option B --- Via Lovable AI (uses 1 credit):

In Lovable chat type: \'Add a vercel.json file to the project root with SPA routing rewrites for Vercel deployment\' --- Lovable creates the file and auto-pushes to GitHub.

✅ After adding vercel.json --- all internal routes work correctly on the custom subdomain. travel.atlantisits.co/travel-insurance, /about, /services etc. all load as expected.

Step 4 --- Add Custom Subdomain in Vercel

  1. In Vercel project → Settings → Domains → click Add Existing

  2. Type your target subdomain:

+-----------------------------------------------------------------------+ | # Example for Atlantis Travels: | | | | travel.atlantisits.co | | | | # Pattern for all Atlantis subdomains: | | | | [name].atlantisits.co | +=======================================================================+

  1. Leave checked: Redirect [subdomain] to www.[subdomain] --- leave as default

  2. Environment: Production

  3. Click Save

📸 SCREENSHOT PLACEHOLDER --- Vercel Add Domain dialog --- travel.atlantisits.co entered, Production selected

Vercel shows Invalid Configuration --- this is expected. The DNS record hasn\'t been created yet. Click Learn more to see the required DNS record.

📸 SCREENSHOT PLACEHOLDER --- Vercel Domains page showing travel.atlantisits.co with Invalid Configuration and DNS Records tab open

4.1 Note the Required DNS Record

Vercel shows the exact DNS record needed. Copy these values --- you will use them in Step 5:

Field Value (Atlantis Travels example)

Type CNAME

Name travel

Value dc9eb373bac741da.vercel-dns-017.com

Proxy Disabled (DNS Only)

⚠️ Vercel now uses project-specific CNAME values (dc9eb373bac741da.vercel-dns-017.com format) instead of the old generic cname.vercel-dns.com. Always copy the exact value shown for your specific project --- do not use the generic one.

Step 5 --- Add DNS Record in Cloudflare

  1. Go to: https://dash.cloudflare.com → atlantisits.co → DNS

  2. Click + Add record

Field Value

Type CNAME

Name travel (just the subdomain prefix --- not the full domain)

Target dc9eb373bac741da.vercel-dns-017.com (your project\'s CNAME from Step 4)

Proxy status DNS Only (Grey Cloud) ← CRITICAL

TTL Auto

  1. Click Save

📸 SCREENSHOT PLACEHOLDER --- Cloudflare DNS management for atlantisits.co --- CNAME record for travel being added with DNS Only grey cloud

⚠️ CRITICAL: Proxy status MUST be DNS Only (Grey Cloud) --- NOT Proxied (Orange Cloud). Vercel handles HTTPS automatically. If you enable Cloudflare proxy, it conflicts with Vercel\'s SSL certificate and breaks the site.

Step 6 --- Verify & Go Live

  1. Go back to Vercel → your project → Settings → Domains

  2. Click Refresh next to your subdomain

  3. Wait 1-2 minutes for DNS propagation

  4. Status changes from Invalid Configuration → Valid Configuration (blue checkmark)

  5. Open your browser and visit your new subdomain:

+-----------------------------------------------------------------------+ | # Test your live subdomain | | | | https://travel.atlantisits.co | | | | # Should load your Lovable site with HTTPS ✅ | +=======================================================================+

📸 SCREENSHOT PLACEHOLDER --- Vercel Domains page showing travel.atlantisits.co with Valid Configuration blue checkmark

📸 SCREENSHOT PLACEHOLDER --- Browser showing https://travel.atlantisits.co live with Atlantis Travels site and HTTPS padlock

✅ travel.atlantisits.co is LIVE --- deployed March 15, 2026. Atlantis Travels is now accessible at a professional custom URL with automatic HTTPS.

Ongoing Workflow --- Making Updates

Once the pipeline is set up, future updates to your Lovable site are fully automatic:

+-----------------------------------------------------------------------+ | 1. Make changes in Lovable AI chat | | | | (costs Lovable credits) | | | | ↓ | | | | 2. Lovable auto-pushes to GitHub | | | | (automatic --- no action needed) | | | | ↓ | | | | 3. Vercel detects push → auto-deploys | | | | (30-60 seconds --- no action needed) | | | | ↓ | | | | 4. travel.atlantisits.co updates live | | | | (zero credits for hosting/deployment) | +=======================================================================+

💡 Lovable gives 5 free credits per day that expire if unused. Plan your AI edits in batches --- make multiple changes in one session rather than one small change per day. Credits are only consumed for AI generation, not for deployment or hosting.

Repeating for New Lovable Sites

Every new Lovable project follows the same pipeline. For future Atlantis subdomains:

Future subdomain Use case

roofing.atlantisits.co Roofing contractor landing page

plumbing.atlantisits.co Plumbing contractor landing page

electrical.atlantisits.co Electrical contractor landing page

lawn.atlantisits.co Lawn care contractor landing page

multimedia.atlantisits.ai Maranda\'s multimedia division

demo.atlantisits.co Live demo environment for SaaS pitches

Each one follows Steps 1-6 of this guide. Total time per site: 10-15 minutes after the first time.

Troubleshooting

Issue Fix

Internal pages return 404 SPA routing issue --- add vercel.json with (/about, /services, rewrites to repo root (Step 3.3). Confirmed /travel-insurance etc) on Atlantis Travels March 15, 2026.

Vercel shows Invalid Wait 2 minutes → click Refresh. DNS takes Configuration after adding time to propagate. DNS

Site loads but shows wrong Vercel may have cached old deployment. Go content to Deployments → Redeploy.

HTTPS not working / SSL Check Cloudflare proxy is DNS Only (Grey error Cloud) --- not Orange Cloud.

Lovable changes not Check GitHub repo has the latest commit → appearing on live site check Vercel Deployments tab for build status.

Vercel can\'t find repo Go to github.com/settings/installations → during import Vercel → add repo to allowed list (Step 2).

404 after deploy (homepage Check Vite framework was auto-detected only) correctly. Go to Settings → General → Framework Preset → confirm Vite.

DNS Only option not visible Click the orange cloud icon to toggle it to in Cloudflare grey cloud (DNS Only).

Lovable Pro prompt for Ignore --- use this guide instead. Lovable custom domain Pro not needed for custom domains via Vercel.

Quick Reference

Item Value

Lovable URL https://lovable.dev

Vercel dashboard https://vercel.com/golbonis-projects

Vercel new project https://vercel.com/new

GitHub installations https://github.com/settings/installations

Cloudflare DNS https://dash.cloudflare.com → atlantisits.co → DNS

GitHub org https://github.com/Golboni

Vercel team golboni\'s projects (Hobby)

Cloudflare proxy for DNS Only (Grey Cloud) --- ALWAYS Vercel

Framework for Lovable Vite (auto-detected) projects

Root directory ./ (default)

vercel.json location Root of GitHub repo --- required for all Lovable/React SPA sites

DNS propagation time 1-2 minutes (Cloudflare is fast)

Atlantis Travels repo Golboni/atlantis-travels

Atlantis Travels live https://travel.atlantisits.co URL

Lovable credits 5/day free --- for AI edits only, not hosting