Skip to content

Deploy to Vercel

This page teaches you how to deploy Finance App to Vercel using your GitHub account. You do not need any deployment experience.

By the end of this page, you will have:

  • A Vercel account
  • Your Finance App project connected to Vercel
  • A live website accessible from a public URL

What Is Vercel?

Section titled “What Is Vercel?”

Vercel is a hosting platform for modern websites. It connects directly to your GitHub repository. Every time you push new code to GitHub, Vercel rebuilds and republishes your site automatically.

This means you never have to upload files manually. Change a file, push to GitHub, and your site updates.

Before You Start

Section titled “Before You Start”

Make sure you have:

  • A GitHub account with your Finance App project already pushed (see the previous page)
  • A browser
  • About 10 minutes

You do not need a credit card. Vercel has a free tier that is enough for most projects.

Step 1 — Create a Vercel Account

Section titled “Step 1 — Create a Vercel Account”
  1. Open your browser and go to:
https://vercel.com/signup
  1. Choose Continue with GitHub. This is the easiest option because it links your GitHub account automatically.
  2. If asked, authorize Vercel to access your GitHub account.
  3. Your Vercel account is now created.

Step 2 — Import Your Project

Section titled “Step 2 — Import Your Project”
  1. After signing up, you will see the Vercel dashboard.
  2. Click Add New… and select Project.
  3. You will see a list of your GitHub repositories.
  4. Find your Finance App repository and click Import.

Step 3 — Configure the Build

Section titled “Step 3 — Configure the Build”

Vercel will automatically detect that your project uses Astro. The default settings are usually correct.

Check these values:

Field What to Enter
Framework Preset Astro (detected automatically)
Root Directory . (default)
Build Command npm run build
Output Directory dist
Install Command npm install

If the values match the table above, you do not need to change anything. Just click Deploy .

Step 4 — Deploy

Section titled “Step 4 — Deploy”
  1. Click Deploy
  2. Vercel will start building your site
  3. Wait for the build to finish. This usually takes 1 to 3 minutes.
  4. When the build succeeds, you will see a congratulations page with a URL like:
https://your-project-name.vercel.app
  1. Click the URL to open your live site

Your website is now live on the internet.

Step 5 — Automatic Updates

Section titled “Step 5 — Automatic Updates”

After this setup, Vercel watches your GitHub repository. Every time you push new code:

  1. Vercel detects the change
  2. It rebuilds the site automatically
  3. It republishes the updated version

You do not need to do anything else. Just push your changes to GitHub.

How to Update Content Later

Section titled “How to Update Content Later”

When you want to change text, images, or posts:

  1. Edit the JSON or Markdown files in your project folder
  2. Open a terminal in the project folder
  3. Run:
git add .
git commit -m "Update content"
git push
  1. Wait 1 to 3 minutes
  2. Refresh your live site to see the changes

Optional — Add a Custom Domain

Section titled “Optional — Add a Custom Domain”

By default, your site uses a .vercel.app address. If you want to use your own domain, like yourdomain.com:

  1. In Vercel, open your project
  2. Click Settings → Domains
  3. Enter your domain name
  4. Follow the on-screen instructions to update your DNS records
  5. Wait for the DNS to propagate. This can take a few minutes to a few hours.

After adding a custom domain, update the site field in astro.config.mjs to match, then push the change.

Common Mistakes

Section titled “Common Mistakes”
Mistake What Happens Fix
Wrong output directory Site shows 404 or blank page Use dist
Wrong build command Build fails Use npm run build
Did not push to GitHub Vercel cannot find the code Push your project first
Node.js version too old Build fails with an error In Vercel project settings, set Node.js version to 18 or higher
Framework not detected Build uses wrong settings Manually set Framework Preset to Astro

Troubleshooting

Section titled “Troubleshooting”
Problem Solution
Build fails with “command not found” Make sure package.json has a build script. Check Vercel’s build log for the exact error.
Build succeeds but site is blank Check that the output directory is dist
Site shows 404 on every page Confirm the framework preset is set to Astro
Changes do not appear after push Check the Vercel dashboard. If the build failed, open the log and fix the error.
Cannot find the repo in Vercel In GitHub, go to Settings → Applications → Vercel, and grant access to the repository
Build times out Your project may be too large for the free tier. Check Vercel’s build limits, or try building locally first with npm run build

Next Step

Section titled “Next Step”

After deploying to Vercel, you can deploy the same project to other platforms, or move on to configuring your custom domain.