Back to main page

Part 1: Build & Publish Your First Teaching App

0 of 13 complete
lesson

Importing into Vercel and deploying

Your code is safe in GitHub. Now, let's turn it into a live website.

We are going to use Vercel to host your app. Vercel is free, incredibly fast, and connects directly to GitHub.

GitHub
Import
Vercel
Deploy
Live Web

Signing up for Vercel (first time only)

  1. Go to vercel.com/signup and choose Continue with GitHub. Signing up this way means Vercel can already see your repositories — there is no separate password to create.
  2. GitHub shows a page headed Vercel by Vercel wants access to your GitHub account, listing what Vercel is allowed to do. This is GitHub's page, not Vercel's. Click the green Authorize button at the bottom.
  3. Vercel then asks what the account is for. Choose the option for a web app — that is what you built.
  4. If you are asked to name your account or workspace, your own name is a fine answer. If you are offered a plan, stay on the free Hobby tier. No credit card is needed.

These onboarding questions only shape what Vercel shows you around the edges. None of the answers change how your app is built or deployed, and you can change them later.

Deploying your app

  1. From your Vercel dashboard, click the "Add New..." button and select "Project".
  2. Under "Import Git Repository" you will see a list of your GitHub repositories. Find the one you just created from AI Studio — there is a search box if the list is long.
  3. Click the "Import" button next to it.
  4. Leave all the default settings as they are, and click "Deploy".

The Magic Moment

Vercel will take a few seconds to build your app. When it's done, you will see a preview of your live site and a real URL (like your-app-name.vercel.app).

You can share this link with your students immediately. It works on their phones, tablets, and laptops.

If something does not look right

Most first deployments work. If yours does not — the build fails, the page is blank, or the app works in AI Studio but part of it does nothing once it is live — that is a normal, fixable situation, and there is a page for it.

The most common cause by far: apps that use AI features need a key of your own once they leave AI Studio. Everything else here works without one. Troubleshooting and FAQ walks through each symptom.
Previous