Blog

Blog

The Blacks template ships with a complete blog system. Every blog post is a Markdown file, and every post automatically appears on the blog index page — with tags, categories, and pagination handled for you.

This guide shows you how to write your first post, where to save it, and how to organize it.

---

Where Blog Posts Live

All blog posts live inside:

src/pages/blog/

Each Markdown file in this folder becomes a blog post at /blog/your-post-name/.

For example:

• src/pages/blog/my-first-post.md → /blog/my-first-post/

---

Create a New Blog Post

To create a new post:

1. Copy an existing Markdown file from src/pages/blog/
2. Rename it to match the URL you want
3. Open it in your code editor
4. Update the frontmatter and content
5. Save it

No configuration required. The blog index updates automatically.

---

Frontmatter Format

Every blog post starts with a block of frontmatter — the section between the --- markers at the top of the file.

Frontmatter format:

---
layout: ../../design/blog/blogpost.astro
title: "Title for your blog article"
description: "Description article blog"
image: Image url in here...
pubDate: Input publish date
tags: ["your tag in here", "tag1", "tag2"]
categories: ["categories in here"]
---

Write your article content in here...

What each field does:

Field	Purpose
layout	Path to the blog post layout. Don’t change this.
title	The post title. Shown on the post page and in listings.
description	A short summary. Used for SEO and social previews.
image	The cover image for the post. Can be a URL or a local path.
pubDate	The publication date. Format: YYYY-MM-DD.
tags	An array of tags. Used for tag archive pages.
categories	An array of categories. Used for category archive pages.

---

Full Implementation Example

Here is a complete blog post ready to use:

---
layout: ../../design/blog/blogpost.astro
title: "About Blacks - Astro Template"
description: "Why use astro blacks themes template for develope your project"
image: https://astro.build/assets/press/logomark-dark.svg
pubDate: 2023-12-04
tags: ["astro", "blogging", "template", "themes"]
categories: ["themes"]
---

This project specifically focuses on your multi-purpose projects. with complete features that you can use.

You can use this astro js template themes for

+ Photography ART
+ Portfolio
+ Company Profile
+ Personal
+ Art Worker
+ Others

### Folder Structure /src:

+ content - services - This area for your promotion widget on post page.
+ data - for setup your website - work with .json files
+ design - template for your page
+ pages - for article content page, services, gallery and blog - work with markdown .md or .mdx files.
+ styles - for global css configuration
+ widget - for widget your website

#### Data

+ `config.json` - for configuration your website project - just update or change content with your needed.
+ `home.json` - for update your home page area - just update or change content with your needed.

Output:

---

How Posts Appear in the Blog List

Once you’ve created your blog post, it automatically appears on the blog index page at /blog/.

Each post shows its cover image, title, description, and publication date.

Output:

---

Tags and Categories

Both tags and categories generate archive pages automatically:

Field	Archive URL	Example
tags: ["astro"]	/tags/astro/	All posts tagged “astro”
categories: ["themes"]	/categories/themes/	All posts in category “themes”

Rules for tags and categories:

• Use lowercase
• Keep them short
• Be consistent — if you use photography in one post, don’t use photo in another
• You can have multiple tags, but usually one or two categories

---

Tips for Writing Blog Posts

1. Filename = URL. Keep filenames short, lowercase, and hyphenated.
2. Use real dates. The pubDate field determines sort order — newest first.
3. Write a strong description. It’s what Google shows in search results.
4. Use a consistent image size. Around 1200×600 works well for cover images.
5. Keep tags specific, categories broad. Tags like astro, gallery, tutorial. Categories like themes, guides.

---

Common Mistakes

Mistake	Result	Fix
Missing layout	Post renders without styling	Add layout: ../../design/blog/blogpost.astro
Wrong path to layout	Build error	Check ../../design/blog/blogpost.astro
Missing pubDate	Post may not sort correctly	Add pubDate: YYYY-MM-DD
Inconsistent tag spelling	Duplicate tag archives	Use the same spelling everywhere
Filename with spaces	URL breaks	Use hyphens instead

---

Next Step

Your blog is now ready to publish. Continue to:

👉 Widget — learn how to manage promotional widgets on blog posts