First Setup

This page teaches you the first setup step after installing Finance App. You only need to change one line in one file: astro.config.mjs.

By the end of this page, you will know:

• Where the file is located
• What the file does
• Which line to change
• Why it matters
• How to check that it worked

Where the File Is

Open your project folder. Then open this file at the top level:

astro.config.mjs

It sits next to package.json in the root of your project.

What the File Does

astro.config.mjs tells Astro how to build your website. It contains:

• The address of your website (site)
• Which tools Astro should use (integrations)

You do not need to understand everything in this file. You only need to change one line.

The Full File

Here is what astro.config.mjs looks like in Finance App:

import { defineConfig } from 'astro/config';
import preact from "@astrojs/preact";
import sitemap from "@astrojs/sitemap";

export default defineConfig({
  site: 'https://financeapp.pages.dev',
  integrations: [
    preact(),
    sitemap(),
  ],
});

The One Line You Need to Change

Look at this line:

site: 'https://financeapp.pages.dev',

This is the address of your website. Right now, it points to the demo site. You must change it to your own domain.

How to Change It — Step by Step

Step 1 — Open the file

1. Open your project folder in your code editor
2. Find astro.config.mjs in the root
3. Open it

Step 2 — Find the line

Look for the line that starts with site:.

Step 3 — Replace the URL

Delete the current URL and type your own. Keep the single quotes ' on both sides, and keep the comma at the end.

Before:

site: 'https://financeapp.pages.dev',

After:

site: 'https://yourdomain.com',

Replace yourdomain.com with your actual domain.

Step 4 — Save the file

Press Ctrl + S on Windows or Linux, or Cmd + S on macOS.

Step 5 — Restart the dev server

If the dev server is already running, stop it with Ctrl + C in the terminal. Then start it again:

npm run dev

Open http://localhost:4321 in your browser to confirm the site still works.

Why It Matters

The site field is used in three places:

• Sitemap — a file that lists all your pages for search engines. It is generated automatically by @astrojs/sitemap.
• Canonical URLs — a tag on each page that tells search engines the preferred address of that page.
• Open Graph tags — the preview that appears when someone shares your link on social media.

If site is wrong, your sitemap and preview images will point to the wrong domain. Search engines may not index your site correctly.

What You Do Not Need to Change

The other parts of the file are already set up. Leave them alone:

Line	What It Does	Should You Change It?
import preact from "@astrojs/preact"	Loads Preact for interactive parts	No
import sitemap from "@astrojs/sitemap"	Loads the sitemap generator	No
preact()	Turns on Preact	No
sitemap()	Turns on the sitemap	No

Rules for the URL

Follow these rules when typing your domain:

• Start with https:// (recommended) or http://
• Do not add a slash / at the end
• Do not add extra spaces
• Use lowercase letters

Good examples:

site: 'https://yourdomain.com',
site: 'https://www.yourdomain.com',
site: 'https://docs.yourdomain.com',

Bad examples:

site: 'https://yourdomain.com/',   // trailing slash
site: 'yourdomain.com',            // missing https://
site: 'https:// yourdomain.com',   // extra space

After Editing

1. Save the file
2. Restart the dev server with npm run dev
3. Open http://localhost:4321 in your browser
4. The site should look exactly the same as before — that is correct. The change only affects build output, not the local preview

Common Mistakes

Mistake	What Happens	Fix
Trailing slash at the end	Build may warn about URLs	Remove the slash
Missing https://	Build error	Add https:// at the start
Typo in the domain	Sitemap points to the wrong site	Double-check the spelling
Deleted the comma at the end	Build error	Add the comma back
Changed other lines	Build may fail	Undo your changes and only edit site

Next Step

After setting the site URL, continue to the next section to edit your site settings in src/data/config.json.