Skip to content

Editing Blog Posts

This page teaches you how to write and edit blog posts in Finance App. You do not need to know how to code. Each blog post is a Markdown file.

By the end of this page, you will know:

  • Where blog files are located
  • What each line does
  • How to change the title, description, image, date, tags, and categories
  • How the blog list is generated

Where Blog Files Are

Section titled “Where Blog Files Are”

All blog posts live in this folder:

src/pages/blog/

Each .md file in this folder becomes one blog post. For example:

File Route
src/pages/blog/why-astro-js-is-fast.md /blog/why-astro-js-is-fast/
src/pages/blog/astro-js-seo-meta-sitemap-rss.md /blog/astro-js-seo-meta-sitemap-rss/

You can add, remove, or edit any .md file in this folder to change your blog lineup.

The Blog List

Section titled “The Blog List”

The blog list page is at:

/blog/

It is generated automatically from all .md files in src/pages/blog/. You do not need to edit the list manually — just add or remove files.

Pagination is handled by:

src/pages/blog/[...page].astro

You do not need to edit this file unless you want to change how pagination works.

A Full Blog Post Example

Section titled “A Full Blog Post Example”

Here is an example blog post, src/pages/blog/astro-js-seo-meta-sitemap-rss.md:

---
layout: ../../design/blog/blogpost.astro
title: "SEO for Astro JS — meta tags, sitemap, and RSS made simple"
description: "How Finance App handles SEO out of the box: meta tags, Open Graph, Twitter Cards, sitemap, and RSS. Built for Astro JS projects that need to rank."
image: "https://images.unsplash.com/photo-1432888622747-4eb9a8efeb07?w=800&auto=format&fit=crop&q=60"
pubDate: 2026-10-07
tags: ["astro", "astro js", "seo", "sitemap", "rss"]
categories: ["technical"]
---


## SEO is not optional


If your site does not rank, no one finds it.

What Each Line Does

Section titled “What Each Line Does”

Frontmatter

Section titled “Frontmatter”

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

Field What It Does
layout Which layout file to use. Do not change this.
title The post title. Shown on the post page and in the blog list.
description A short summary. Shown in the list and in search results.
image The post image. Shown in the list and on the post page.
pubDate The publish date. Used for sorting in the blog list.
tags A list of tags. Used for tag pages.
categories A list of categories. Used for category pages.

Article Content

Section titled “Article Content”

Everything below the second --- is the article content. It appears on the post 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

Section titled “How to Edit — Step by Step”

Change the Post Title

Section titled “Change the Post Title”
  1. Open any file in src/pages/blog/
  2. Find the line starting with title:
  3. Replace the text inside the quotes
  4. Save the file

Example:

title: "Your Post Title"

Important: Keep the double quotes " on both sides.

Change the Post Description

Section titled “Change the Post Description”
  1. Find the line starting with description:
  2. Replace the text inside the quotes
  3. Save

Example:

description: "A short one-sentence summary of your post."

The description is used in the blog list and in search results. Keep it short — around 150 to 160 characters.

Change the Post Image

Section titled “Change the Post Image”
  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-post.avif"

Using an external image:

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

Change the Publish Date

Section titled “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. Save

Example:

pubDate: 2026-01-15

The date is used to sort posts in the list — the newest post appears first.

Change the Tags

Section titled “Change the Tags”

Tags are used to group posts. Each tag becomes its own page at /tags/[tag]/.

  1. Find the line starting with tags:
  2. Replace the list with your own tags
  3. Use lowercase and double quotes

Example:

tags: ["astro", "seo", "performance"]

You can add as many tags as you want.

Change the Categories

Section titled “Change the Categories”

Categories are similar to tags, but usually broader. Each category becomes its own page at /categories/[category]/.

  1. Find the line starting with categories:
  2. Replace the list with your own categories

Example:

categories: ["technical"]

You can add more than one category, but one is usually enough.

Change the Article Content

Section titled “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:

## Why This Matters


Search engines need clean HTML and correct meta tags.


## What Finance App Does


Meta tags, sitemap, and RSS are included by default.


## Conclusion


You do not need extra plugins.

How to Add a New Post

Section titled “How to Add a New Post”
  1. Open the src/pages/blog/ folder
  2. Create a new .md file
  3. Give it a short, clear filename using lowercase and dashes:
my-new-post.md
  1. Add the frontmatter at the top of the file
  2. Write the post content
  3. Save the file

The new post will appear in the blog list automatically.

How to Remove a Post

Section titled “How to Remove a Post”
  1. Open the src/pages/blog/ folder
  2. Find the .md file you want to remove
  3. Delete the file

The post will disappear from the list automatically.

Rules for Frontmatter

Section titled “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: "Post", not title:"Post".
  • Use double quotes for title, description, and image.
  • Use square brackets for tags and categories. They are arrays.
  • Use lowercase and dashes for filenames, like my-post.md. Do not use spaces.

Save and Preview

Section titled “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
  1. Open http://localhost:4321/blog/ in your browser

Common Mistakes

Section titled “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/blog/blogpost.astro
Filename has spaces Route looks broken Use dashes instead, like my-post.md
Missing space after the colon Field is not read correctly Write title: "Post", not title:"Post"
Tags without square brackets Build error Write tags: ["astro", "seo"]
Wrong image path Broken image Check the file exists in public/img/

Relationship with Other Files

Section titled “Relationship with Other Files”

Each blog post uses its own file, but shares layout and configuration with the rest of the site.

File What It Controls
src/pages/blog/*.md Each blog post’s content
src/design/blog/blogpost.astro The blog post layout
src/design/blog/bloglist.astro The blog list layout
src/pages/blog/[...page].astro Pagination for the blog list
src/pages/categories/[category].astro Category pages
src/pages/tags/[tag].astro Tag pages
src/data/config.json The navbar and footer shown on blog pages

Next Step

Section titled “Next Step”

After editing the blog posts, you can continue to edit the contact page or SEO settings.