Skip to content

Deploy to Netlify

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

By the end of this page, you will have:

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

What Is Netlify?

Section titled “What Is Netlify?”

Netlify is a hosting platform for static websites. It connects directly to your GitHub repository. Every time you push new code to GitHub, Netlify 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. Netlify has a free tier that is enough for most projects.

Step 1 — Create a Netlify Account

Section titled “Step 1 — Create a Netlify Account”
  1. Open your browser and go to:
https://app.netlify.com/signup
  1. Choose GitHub as your sign-up method. This is the easiest option because it links your GitHub account automatically.
  2. If asked, authorize Netlify to access your GitHub account.
  3. Your Netlify account is now created.

Step 2 — Add a New Site

Section titled “Step 2 — Add a New Site”
  1. After signing up, you will see the Netlify dashboard
  2. Click Add new site → Import an existing project
  3. Choose Deploy with GitHub
  4. Authorize Netlify if prompted
  5. You will see a list of your GitHub repositories
  6. Find your Finance App repository and click it

Step 3 — Configure the Build

Section titled “Step 3 — Configure the Build”

Fill in the form with these values:

Field What to Enter
Branch to deploy main
Base directory Leave empty
Build command npm run build
Publish directory dist

Leave Functions directory empty.

If asked for environment variables, skip this step. Finance App does not require any.

Step 4 — Deploy

Section titled “Step 4 — Deploy”
  1. Click Deploy site
  2. Netlify 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 URL like:
https://random-name-12345.netlify.app
  1. Click the URL to open your live site

Your website is now live on the internet.

Step 5 — Rename the Site (Optional)

Section titled “Step 5 — Rename the Site (Optional)”

By default, Netlify gives your site a random name. You can change it:

  1. In the Netlify dashboard, open your site
  2. Click Site configuration
  3. Click Change site name
  4. Enter your own name, like finance-app-yourname
  5. Click Save

Your site URL becomes:

https://your-chosen-name.netlify.app

Step 6 — Automatic Updates

Section titled “Step 6 — Automatic Updates”

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

  1. Netlify 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 .netlify.app address. If you want to use your own domain, like yourdomain.com:

  1. In Netlify, open your site
  2. Click Domain management
  3. Click Add a domain
  4. Enter your domain name
  5. Follow the on-screen instructions to update your DNS records
  6. 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 publish directory Site shows 404 or blank page Use dist
Wrong build command Build fails Use npm run build
Did not push to GitHub Netlify cannot find the code Push your project first
Node.js version too old Build fails with an error In Netlify site settings, set Node.js version to 18 or higher
Base directory set incorrectly Build fails Leave base directory empty

Troubleshooting

Section titled “Troubleshooting”
Problem Solution
Build fails with “command not found” Make sure package.json has a build script. Check Netlify’s build log for the exact error.
Build succeeds but site is blank Check that the publish directory is dist
Changes do not appear after push Check the Netlify dashboard. If the build failed, open the log and fix the error.
Cannot find the repo in Netlify In GitHub, go to Settings → Applications → Netlify, and grant access to the repository
Build times out Your project may be too large for the free tier. Try building locally first with npm run build
Redirect loop on custom domain Check your DNS settings. Make sure the domain points to Netlify correctly.

Next Step

Section titled “Next Step”

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