Editing the Homepage Article

This page teaches you how to edit the homepage article content of Finance App. You do not need to know how to code. You only need to edit one file: src/pages/index.md.

By the end of this page, you will know:

• Where the file is located
• What each line in the file does
• How to change the title, description, and article text

Where the File Is

Open your project folder. Then open this path:

src/pages/index.md

This file is the homepage of your website. It uses a layout from src/design/Home.astro.

The Difference Between home.json and index.md

Both files affect the homepage, but they control different parts:

File	Controls
src/data/home.json	Layout, images, charts, sections, buttons
src/pages/index.md	Homepage title, description, and the opening paragraph text

Think of home.json as the structure and design, and index.md as the main article content at the top of the homepage.

The Full File

Here is the complete src/pages/index.md file that comes with the theme:

---
layout: ../design/Home.astro
title: Finance App — Astro JS Multipurpose Theme
description: Finance App is a multipurpose Astro JS theme for startups, fintech, SaaS, and AI products. Landing page, product showcase, blog, and contact form in one project.
pubDate: "2026-10-07"
---

Finance App is a multipurpose Astro JS theme for startups, fintech, SaaS, and AI products. It combines a landing page, product showcase, blog, and contact form in one project — so you do not need to assemble separate pieces for each part of your site.

Content is managed through JSON and Markdown, so you can update the site without touching component code. SEO features like meta tags, Open Graph, sitemap, and RSS are included by default.

Deploy to Netlify, Vercel, Cloudflare Pages, or any static host in minutes.

What Each Line Does

Frontmatter

The block between the two --- lines at the top is called frontmatter. It tells Astro how to build this page.

Field	What It Does
layout	Which layout file to use. Do not change this.
title	The homepage title. Shown in the browser tab and search results.
description	A short summary of the page. Shown in search results and social media previews.
pubDate	The publish date. Used for sorting and metadata.

Article Content

Everything below the second --- is the article content. It appears on the homepage under the hero section.

You can write plain text, or use Markdown formatting like headings, bold, links, and lists.

How to Edit — Step by Step

Change the Page Title

1. Open src/pages/index.md
2. Find the line starting with title:
3. Replace the text after the colon with your own title
4. Save the file

Example:

title: Your Own Homepage Title

Important: Do not remove the title: part. Only change the text after it. Do not add quotes unless the title contains special characters.

Change the Page Description

1. Find the line starting with description:
2. Replace the text after the colon
3. Save

Example:

description: A short summary of your website.

The description is used for search engines and social media previews, so keep it short — around 150 to 160 characters.

Change the Publish Date

1. Find the line starting with pubDate:
2. Replace the date with today’s date, in the format "YYYY-MM-DD"
3. Keep the double quotes

Example:

pubDate: "2026-01-15"

Change the Article Content

1. Find the text below the second --- line
2. Replace it with your own text
3. Save the file

You can write multiple paragraphs, add headings with ##, or use any standard Markdown syntax.

Example:

Welcome to our website. We build tools for modern product teams.

## What We Do

We help startups launch fast, clean, and search-friendly websites.

## Get Started

Browse our product pages to see what we offer.

Rules for Frontmatter

• Keep the two --- lines. They mark the start and end of the frontmatter.
• Do not delete the layout line. It tells Astro which layout to use.
• Keep the spacing after the colon. Write title: Your Title, not title:Your Title.
• Use quotes only when needed. Dates and text with special characters (like : or —) should be wrapped in double quotes.

Where the Layout Comes From

The layout: ../design/Home.astro line tells Astro to use the file src/design/Home.astro as the page wrapper. This file contains the header, footer, and other shared elements.

You do not need to edit Home.astro unless you want to change the page structure itself.

Save and Preview

1. Save the file
2. If the dev server is running, the browser will reload automatically
3. If not, run:

npm run dev

4. Open http://localhost:4321 in your browser

Common Mistakes

Mistake	What Happens	Fix
Removed one of the --- lines	Build error	Add the missing --- line
Changed the layout path	Build error, page cannot find layout	Restore the original value ../design/Home.astro
Missing space after the colon	Field is not read correctly	Write title: Your Title, not title:Your Title
Used a wrong date format	Sorting may not work	Use "YYYY-MM-DD" with double quotes
Deleted the title field	Page has no title	Add title: back and give it a value

Relationship with Other Files

When you edit this file, the homepage still uses these other files:

File	What It Still Controls
src/data/config.json	Navbar, footer, social links
src/data/home.json	Hero, chart, marquee, sections, buttons

So if you change something here and do not see it on the homepage, check whether you are editing the right file.

Next Step

After editing the homepage article, you can continue to edit pages, blog posts, or products.