Editing the About Page

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

By the end of this page, you will know:

• Where the file is located
• What each line does
• How to change the title, description, image, date, and content

Where the File Is

Open your project folder. Then open this path:

src/pages/about/index.md

This file is the About page of your website. It becomes the route /about/.

What the About Page Is For

The About page is where you tell visitors who you are, what you do, and why your product or company exists. It is often the second page people visit after the homepage.

The Full File

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

---
layout: ../../design/page/About.astro
title: "About Finance App — Astro JS Multipurpose Theme"
description: "Finance App is an Astro JS multipurpose theme for startups, fintech, SaaS, and AI products. Landing page, product showcase, blog, and contact form in one project."
image: "https://images.unsplash.com/photo-1641790176913-5b573e7ebacd"
pubDate: "2024-02-04"
---

Finance App is an Astro JS multipurpose theme built for startups, fintech, SaaS, and AI products. It gives you a landing page, a product showcase, a blog, and a contact form — all in one project.

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 page title. Shown in the browser tab and search results.
description	A short summary of the page. Shown in search results and social media previews.
image	The image shown at the top of the About page.
pubDate	The publish date. Used for metadata and sorting.

Article Content

Everything below the second --- is the article content. It appears on the About page under the header image.

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/about/index.md
2. Find the line starting with title:
3. Replace the text inside the quotes with your own title
4. Save the file

Example:

title: "About Our Company"

Important: Keep the double quotes " on both sides, especially if the title contains a dash, colon, or special character.

Change the Page Description

1. Find the line starting with description:
2. Replace the text inside the quotes
3. Save

Example:

description: "A short summary of who we are."

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

Change the Header Image

The image appears at the top of the About page.

1. Put your image in public/img/
2. Find the line starting with image:
3. Replace the URL with your image path
4. Save

Using a local image:

image: "/img/your-image.avif"

Using an external image:

image: "https://example.com/your-image.jpg"

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:

We are a small team building tools for modern product companies.

## Our Story

We started in 2024 with one goal: help startups launch faster.

## What We Do

We build themes, templates, and design systems for Astro JS.

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: "About Us", not title:"About Us".
• Use double quotes for title, description, and image when the value contains special characters or spaces.

Where the Layout Comes From

The layout: ../../design/page/About.astro line tells Astro to use the file src/design/page/About.astro as the page wrapper. This file contains the header, footer, and other shared elements for all About-style pages.

You do not need to edit About.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/about/ 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 ../../design/page/About.astro
Missing space after the colon	Field is not read correctly	Write title: "About Us", not title:"About Us"
Wrong image path	Broken image	Check the file exists in public/img/
Removed the quotes around the title	Build error if the title has special characters	Wrap the title in double quotes
Deleted the title field	Page has no title	Add title: back and give it a value

Relationship with Other Files

The About page uses its own file and its own layout. It does not use home.json or config.json for its content, but it still inherits the navbar and footer from config.json.

File	What It Controls
src/pages/about/index.md	The About page content (this file)
src/design/page/About.astro	The About page layout
src/data/config.json	The navbar and footer shown on this page

Next Step

After editing the About page, you can continue to edit other pages such as Contact, Blog, or Products.