Book A Meeting
About Me
Subscribe
MoontowerMeta Public Notion/
🤖
Resources to get more out of AI/
🛠️
Setting up Git + Vercel + Terragon
🛠️

Setting up Git + Vercel + Terragon

Complete Setup Guide
GitHub + Terragon + Vercel for Non-Technical Users
Everything you need to deploy a web app without coding

📋 What You'll Learn

Part 1: Set up GitHub (where your code lives)
Part 2: Set up Terragon (AI that writes your code)
Part 3: Set up Vercel (hosts your website)
Part 4: Connect everything together

🎯 The Big Picture

You'll set up three systems that work together automatically:
  1. GitHub (Code Storage)
      2. Think of this as a cloud folder for your project files. Every time your code changes, GitHub saves a version you can go back to.
  1. Terragon (AI Programmer)
      2. You describe what you want in plain English, and Terragon's AI writes the code for you, then saves it to GitHub automatically.
  1. Vercel (Web Host)
      2. This watches your GitHub folder. Every time Terragon adds new code, Vercel automatically builds your website and puts it online.
💡 THE MAGIC: Once set up, you just tell Terragon what you want → AI writes the code → Vercel deploys it → Your site is live in 60 seconds. No terminal. No coding. No manual deployments.

✅ What You Need Before Starting

  • Email address - For creating accounts
  • Web browser - Chrome, Firefox, Safari, or Edge
  • 30 minutes - One-time setup
  • No coding experience needed!
⏱️ TIME ESTIMATE: Part 1 (GitHub): 5 minutes • Part 2 (Terragon): 5 minutes • Part 3 (Vercel): 10 minutes • Part 4 (Connections): 10 minutes

PART 1: Setting Up GitHub

GitHub is where all your project files live. Think of it as Google Drive for code.

Step 1: Create GitHub Account

  1. Go to github.com
  1. Click "Sign up" in the top-right corner
  1. Enter your email address → Click "Continue"
  1. Create a password → Click "Continue"
  1. Choose a username → Click "Continue"
  1. Complete the verification puzzle
  1. Check your email for verification code → Enter it
  1. Skip any personalization questions (or fill them out if you want)
✅ CHECKPOINT: You should now see the GitHub dashboard. You're logged in!

Step 2: Create Your First Repository

A "repository" (or "repo") is just a project folder.
  1. Look for the + icon in the top-right → Click it
  1. Select "New repository"
  1. Fill in the form:
Repository name:
Type a name (e.g., my-voting-app or my-first-website)
Description:
Optional - you can leave this blank
Public or Private:
Choose Private (your code stays private to you)
Initialize this repository with:
✓ Check the box for "Add a README file"
  1. Click the green "Create repository" button at the bottom
✅ CHECKPOINT: You should see your new repository with a README.md file. At the top of the page, you'll see the URL: github.com/yourusername/my-voting-app. Copy this URL - you'll need it later!

PART 2: Setting Up Terragon

Terragon is the AI that writes code for you. You describe what you want, and it does the programming.

Step 3: Create Terragon Account

  1. Go to terragon.ai
  1. Click "Sign Up" or "Get Started"
  1. RECOMMENDED: Click "Sign up with GitHub"
      2. Why? This automatically connects Terragon to GitHub, saving you steps later.
  1. You'll be redirected to GitHub → Click "Authorize Terragon"
  1. Complete any welcome screens
💡 ALTERNATIVE: If you prefer not to use "Sign up with GitHub", you can sign up with email/password. You'll connect GitHub manually in the next step.

Step 4: Connect Terragon to Your GitHub Repository

If you signed up with GitHub, this may already be done! Check if you see your repository listed.

Finding the Connection Settings

In Terragon, look for one of these menu options (different Terragon versions have different layouts):
  • "Environments" (left sidebar)
  • "Projects" (left sidebar)
  • "Settings" → "Integrations"
  • "Configure" (gear icon)

Connecting Your Repository

  1. Click "New Environment" or "Add Repository" or similar
  1. You should see a list of your GitHub repositories → Select yours
  1. Choose the branch: main (this is the default)
  1. Click "Create" or "Connect"
❓ DON'T SEE YOUR REPO? Go to github.com/settings/installations → Find Terragon → Click Configure → Grant access to your repository

Step 5: Test Terragon with a Simple Task

Let's make sure everything works!
  1. In Terragon, click "New Task"
  1. In the text box, type:
      2. Update the README.md file to say 'Hello from Terragon! This is my first automated commit.'
  1. Click "Execute" or "Run"
  1. Wait 10-30 seconds

Verify It Worked

  1. Go back to your GitHub repository page
  1. Refresh the page
  1. You should see your updated README with the new message!
🎉 SUCCESS! If you see the updated README, Terragon is working! It wrote the change and committed it to GitHub automatically.

PART 3: Setting Up Vercel

Vercel is your web host. It watches GitHub and automatically deploys your website whenever code changes.

Step 6: Create Vercel Account

  1. Go to vercel.com
  1. Click "Sign Up"
  1. IMPORTANT: Click "Continue with GitHub"
      2. Why? Vercel needs to see your GitHub repositories to deploy them.
  1. GitHub will ask for permission → Click "Authorize Vercel"
  1. Vercel may ask you to join a team or create a team → Just click "Continue"
✅ CHECKPOINT: You should now see the Vercel dashboard. It may show a welcome screen or ask you to import a project.

Step 7: Import Your GitHub Repository to Vercel

This tells Vercel which project to host.
  1. On the Vercel dashboard, click "Add New..." or "New Project"
  1. You'll see a list of your GitHub repositories
  1. Find your repository (my-voting-app or whatever you named it)
  1. Click "Import" next to it
❓ DON'T SEE YOUR REPO? Click "Adjust GitHub App Permissions" → Select "All repositories" or choose your specific repository → Save

Step 8: Configure Your Project (First Time Only)

After clicking Import, Vercel shows you a configuration screen. Here's what to do:
Project Name:
Leave as-is (it auto-fills with your repo name)
Framework Preset:
Vercel will try to auto-detect this. Common options:
  • If building a voting app with Terragon → Select "Vite"
  • If just a simple website → Select "Other"
  • Not sure? Leave it as auto-detected
Build and Output Settings:
Leave everything collapsed (don't expand unless you know what you're doing)
Environment Variables:
Skip this for now - we'll add these after the first deployment
Once you've reviewed the settings, click the big "Deploy" button

Step 9: Wait for First Deployment

Vercel will now:
  1. Download your code from GitHub
  1. Try to build it (may fail if there's no code yet - that's okay!)
  1. Give you a live URL
This takes 30-90 seconds.
✅ CHECKPOINT: You'll see either "Deployment Successful" or "Build Failed". Either way is fine! The important thing is Vercel is now watching your GitHub repository. Copy your URL (looks like your-project.vercel.app)

PART 4: Connecting Everything Together

Now let's make sure the automation works end-to-end!

Step 10: The Complete Flow Test

Let's watch the magic happen:

A. Make a Change with Terragon

  1. Go to Terragon → Create a New Task
  1. Type this:
      2. Create an index.html file with 'Hello World' and a purple background
  1. Click Execute

B. Watch GitHub Update

  1. Open your GitHub repository page
  1. Refresh after 30 seconds
  1. You should see a new index.html file

C. Watch Vercel Deploy

  1. Go to your Vercel dashboard
  1. Click on your project
  1. You should see a new deployment building (yellow spinning icon)
  1. Wait 30-60 seconds for it to turn green ("Ready")

D. Visit Your Live Website

  1. Copy your Vercel URL (your-project.vercel.app)
  1. Paste it in a new browser tab
  1. You should see "Hello World" with a purple background!
🎉 IT'S ALIVE! You just experienced the full workflow: Terragon wrote code → GitHub saved it → Vercel deployed it → Your website updated automatically!

Adding Environment Variables (When Needed)

Environment variables are secret settings your app needs (like database passwords). You'll add these when building real apps.

When Do You Need These?

You'll need to add environment variables when:
  • Connecting to a database (like Supabase)
  • Using third-party services (APIs)
  • Your app shows errors about missing VITE_ or NEXT_PUBLIC_ variables

How to Add Them in Vercel

  1. In Vercel dashboard → Click your project
  1. Click "Settings" at the top
  1. In left sidebar → Click "Environment Variables"
  1. For each variable you need:
Key: Type the variable name (e.g., VITE_SUPABASE_URL)
Value: Paste the secret value
Environment: Check all three boxes (Production, Preview, Development)
  1. Click "Save"
  1. IMPORTANT: After adding variables, you must redeploy. Go to Deployments → Click the three dots (...) → "Redeploy"

Understanding Your Automated Workflow

The Complete Automation Chain

Here's what happens every time you create a Terragon task:
  1. You Create a Task
      2. In Terragon: "Add a login form to my app"
  1. AI Writes the Code
      2. Terragon's AI generates React components, CSS, configuration files - whatever is needed
  1. Terragon Commits to GitHub
      2. Changes are automatically saved to your repository with a commit message
  1. GitHub Triggers Vercel
      2. GitHub sends a webhook to Vercel: "New code is ready!"
  1. Vercel Builds Your App
      2. Vercel installs dependencies, compiles code, optimizes assets
  1. Your Site is Live
      2. Updated website is deployed worldwide in 30-60 seconds
⚡ TOTAL TIME: From task creation to live website: Usually under 2 minutes!

🔧 Troubleshooting Common Issues

GitHub Issues

Can't Find My Repository

  • Make sure you're logged into the right GitHub account
  • Check that you actually created the repository (go to github.com/yourusername)

Terragon Issues

Terragon Task Isn't Creating Commits

  • Check that you connected the right repository in Terragon settings
  • Go to com/settings/installations → Verify Terragon has access
  • Look at the task error message for specific details

Repository Not Showing in Terragon

  • Click "Configure" or "Reconnect GitHub"
  • Grant access to your specific repository

Vercel Issues

Build Failed

This is normal if you haven't added real code yet! Solutions:
  • Create a simple index.html file with Terragon
  • OR wait until Terragon creates your real app code
  • OR click the build error in Vercel to see specific issues

Website Shows Old Version

  • Wait 60 seconds and hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
  • Check Vercel dashboard - is the latest deployment "Ready"?

Environment Variables Not Working

  • Make sure you clicked "Save" after adding them
  • CRITICAL: You MUST redeploy after adding environment variables
  • Verify you used the correct variable names (exact match, including VITE_ prefix)

🎯 What's Next?

You're Ready to Build!

Now that everything is connected, you can:
  1. Build Your Actual App
      2. Create detailed Terragon tasks describing what you want (e.g., "Create a voting app with Supabase database")
  1. Add a Custom Domain (Optional)
      2. In Vercel → Settings → Domains → Add your domain (e.g., myapp.com)
  1. Monitor Your Deployments
      2. Check Vercel dashboard after each Terragon task to see deployment status
  1. Iterate and Improve
      2. Create new Terragon tasks to add features, fix bugs, or change design

💡 Tips for Success

Writing Good Terragon Tasks

  • Be specific: "Create a voting app with React and Supabase" beats "make an app"
  • Include technical details: Mention frameworks, libraries, colors, layouts
  • Reference existing files: "Update App.tsx to add a login button"
  • Provide examples: "Style it like Airbnb with rounded corners and soft shadows"

Staying Organized

  • One project per repository: Keep different apps in separate repos
  • Review commits: Occasionally check GitHub to see what Terragon changed
  • Watch deployments: Keep Vercel dashboard open to catch errors early

Safety & Best Practices

  • Never share your Vercel URL publicly if it contains sensitive data
  • Keep database credentials in environment variables - never in code
  • Test changes before announcing: Visit your site after deployments to verify