Update Services Page — Astro Template Guide

documentation

Publih On: 2023-12-02

Learn how to add and update service pages on the Blacks Astro JS template.

Full documentation: Services guide →

---

Where Service Pages Live

All service pages are in the folder:

src/pages/services

Each Markdown file in this folder becomes one service page.

Important: Do not delete the [...page].astro file. This file handles pagination and is required for the services page to work.

---

Create a New Service Page

To add a new service:

1. Create a new .md file inside src/pages/services/
2. Name it with a short slug — for example: portfolio-design.md
3. Open it in your code editor
4. Add the frontmatter (see below)
5. Write your content in Markdown
6. Save the file

The filename becomes the URL. For example:

• src/pages/services/portfolio-design.md → /services/portfolio-design/

---

Frontmatter Format

---
layout: ../../design/services/servicespost.astro
title: insert title in here...
pubDate: 2023-12-05
intro: insert intro your services here....
description: insert description here...
image: insert url image here...
tags: ["insert tag here", "tag1", "tag2"]
---

write content in here....

---

What Each Field Does

Field	Purpose
layout	Service post layout template. Don’t change this.
title	Service title — appears on the service listing and detail page
pubDate	Publication date — format: YYYY-MM-DD
intro	Short intro line shown at the top of the service page
description	Short description — used for SEO and social previews
image	Cover image for the service page
tags	Array of tags. Creates work archive pages automatically.

---

Tips for Service Pages

1. Filename = URL. Keep filenames short, lowercase, and hyphenated.
2. Use the intro field. It appears above your content and gives context.
3. Use consistent image sizes. Around 1200×800 works well.
4. Write benefit-driven descriptions. Not just what you do — but why it matters.
5. Keep tags specific. Categories are handled separately.

---

Quick Method

For a faster workflow:

1. Copy an existing service from src/pages/services/
2. Rename it to match your new service
3. Update the frontmatter and content
4. Save

No configuration required. The services listing updates automatically.

---

Need Help?

If you need custom work or a headless CMS integrated, our team can help.

Headless CMS Integration →