Deployment Preparation

This page explains what you need to prepare before deploying Finance App. It is not a full guide — each platform has its own documentation. The goal here is to help you decide where to deploy and what accounts to create.

By the end of this page, you will know:

• What to check before deploying
• Which accounts to create
• Which platforms you can use

Before You Deploy

Make sure these are done first:

• The site runs locally with npm run dev
• The site field in astro.config.mjs is set to your real domain
• The navbar, footer, and homepage content are updated
• Your images are in public/img/
• The contact form is connected to your own Formspree account
• The site builds without errors:

npm run build

If the build succeeds, a dist/ folder will appear. That folder contains the final static site.

What You Will Need

For most platforms, you will need:

Item	Why
A GitHub account	To store your code and connect it to the host
A Git client	To push your code. Git comes with most systems.
A domain name	Optional, but recommended for a custom URL

Step 1 — Create a GitHub Account and Push Your Code

GitHub is where your project code lives online. Most hosting platforms connect to GitHub to deploy your site automatically.

1. Create an account at:

https://github.com/

2. Create a new repository
3. Push your project folder to that repository
4. Make sure the repository is set to public or private depending on your hosting plan

Detailed Git and GitHub instructions are available in GitHub’s own documentation.

Step 2 — Choose a Hosting Platform

You can deploy Finance App to any static host. Below are common options. Each one has its own setup guide on its website.

Cloudflare Pages

• Free tier available
• Global CDN included
• Good for sites that need speed worldwide
• Setup guide: https://developers.cloudflare.com/pages/

Vercel

• Free tier available
• Very simple GitHub integration
• Good for quick deployments
• Setup guide: https://vercel.com/docs

Netlify

• Free tier available
• Simple drag-and-drop or GitHub-based deploy
• Good for static sites
• Setup guide: https://docs.netlify.com/

Firebase Hosting

• Free tier available
• Part of Google Cloud
• Good if you already use other Google services
• Setup guide: https://firebase.google.com/docs/hosting

AWS (Production)

• Paid, but scalable
• Requires more setup than other options
• Good for enterprise or high-traffic sites
• Common services: S3 + CloudFront
• Setup guide: https://docs.aws.amazon.com/

cPanel, VPS, or Plesk

• Works if you already have a traditional hosting account
• Upload the dist/ folder to your public directory
• No build step on the server — build locally, then upload
• Setup guide: check your hosting provider’s documentation

Which One Should You Pick?

Situation	Recommended
First time deploying	Vercel or Netlify
Need global speed	Cloudflare Pages
Already using Google Cloud	Firebase Hosting
Enterprise or high traffic	AWS
Shared hosting or VPS	cPanel, VPS, or Plesk

General Deployment Steps

The exact steps vary by platform, but the general flow is the same:

1. Push your project to GitHub
2. Connect the repository to the hosting platform
3. Set the build command to:

npm run build

4. Set the output directory to:

dist

5. Click deploy
6. Wait for the build to finish
7. Open the URL provided by the platform

For platforms like cPanel, VPS, or Plesk, you do not connect GitHub. Instead, you build locally and upload the dist/ folder manually.

After Deployment

Once your site is live:

• Set up your custom domain in the hosting dashboard
• Update the site field in astro.config.mjs to match your domain
• Rebuild and redeploy
• Test the contact form
• Test the sitemap by opening /sitemap-index.xml

Common Mistakes

Mistake	What Happens	Fix
site field is still the default	Sitemap points to the wrong domain	Update site in astro.config.mjs
Did not set the build command	Platform runs the wrong command	Use npm run build
Did not set the output directory	Platform cannot find the site files	Use dist
Uploaded the whole project to cPanel	Wrong files served	Upload only the contents of dist/
Formspree still uses the default URL	Messages go to the theme author	Replace formspree_id in src/pages/contact/index.md

Next Step

Pick a platform above and follow its official documentation to complete the deployment.