Skip to main content
Learn how to create, write, and publish blog posts in the RobTop Games Web project.

​
Prerequisites

Before creating a blog post, make sure you understand:

​
Creating a New Post

1

Create the file

Create a new .md file in src/content/blog/ with a URL-friendly name:
touch src/content/blog/my-awesome-post.md
The filename will become the URL slug: /blog/my-awesome-post
Use hyphens to separate words in the filename. Avoid spaces, special characters, or uppercase letters.
2

Add frontmatter

Add the required frontmatter fields at the top of the file:
---
title: "Your Post Title"
createdAt: "2025-08-12T04:17:35.590Z"
image: "https://example.com/cover-image.jpg"
description: "A brief description of your post for SEO and previews"
author: "Your Name"
publish: true
tags: ["Category", "Topic"]
authorImage: "https://example.com/your-avatar.jpg"
---
The createdAt field must be in ISO 8601 format. Generate it using new Date().toISOString() in JavaScript or use an online tool.
3

Write your content

Write your blog post content using standard Markdown below the frontmatter:
# Your Main Heading

Your introduction paragraph goes here.

## Section Heading

- Bullet point 1
- Bullet point 2

### Subsection

More content...
You can use:
  • Headings (#, ##, ###)
  • Lists (ordered and unordered)
  • Links ([text](url))
  • Images (![alt](url))
  • Code blocks with syntax highlighting
  • Blockquotes
  • Bold and italic text
4

Preview your post

Start the development server to preview your post:
npm run dev
Navigate to http://localhost:4321/blog/your-post-slug to see your post.
The dev server automatically rebuilds when you save changes to your markdown file.
5

Publish the post

To publish your post:
  1. Ensure publish: true is set in the frontmatter
  2. Commit the file to your repository
  3. Deploy your site
git add src/content/blog/my-awesome-post.md
git commit -m "Add new blog post: My Awesome Post"
git push
Posts with publish: false won’t be filtered out automatically. You need to implement filtering in your query if you want to hide unpublished posts.

​
Real Example

Here’s a complete example from the project - guide-to-geometry-dash.md: 
---
title: "Beginner's Guide to Geometry Dash"
createdAt: "2025-08-12T04:17:35.590Z"
image: "https://gepig.com/game_cover_bg_1190w/2680.jpg"
description: "Learn the basic concepts of the game, tricks and tips to improve your skills and overcome the first levels."
author: "Ivanciooo"
publish: true
tags: ["Guide", "Beginners", "Tutorials"]
authorImage: "https://www.robtopgames.com/Images/icon_200.png"
---

# Complete Beginner's Guide to Geometry Dash

Just started with Geometry Dash? This guide will help you understand the basic concepts and quickly improve your skills in the game.

## Basic Concepts

### 1. Controls
- Click/Space/Touch to jump
- Hold for longer jumps
- Timing is crucial

### 2. Game Modes
- Cube: The basic mode
- Ship: Height control
- Ball: Gravity change
- UFO: Similar to ship but with jumps
- Wave: Diagonal movement

## Tips for Beginners

### 1. Practice Mode
- Use practice mode to learn levels
- Place checkpoints at difficult parts
- Practice specific sections
This post appears at /blog/guide-to-geometry-dash with:
  • Author card showing “Ivanciooo” with avatar
  • Three tags: Guide, Beginners, Tutorials
  • Cover image from the image field
  • Publication date displayed as “August 12, 2025”

​
Frontmatter Field Reference

​
title

Type: string (required) The post title displayed in:
  • The page <title> tag
  • The main heading on the post page
  • Post cards on the blog listing page
title: "Beginner's Guide to Geometry Dash"

​
createdAt

Type: string (required, datetime) ISO 8601 datetime when the post was created. Used for:
  • Sorting posts by date
  • Displaying publication date
  • Calculating “X days ago” text
createdAt: "2025-08-12T04:17:35.590Z"

​
updatedAt

Type: string (optional, datetime) ISO 8601 datetime when the post was last updated. 
updatedAt: "2025-08-15T10:30:00.000Z"

​
image

Type: string (required) URL to the cover image. Displayed:
  • As a large hero image on the post page
  • As a thumbnail in post cards
  • In social media previews (Open Graph)
image: "https://example.com/cover.jpg"

​
description

Type: string (required) Brief description of the post. Used for:
  • SEO meta descriptions
  • Social media previews
  • Post card previews
description: "Learn the basic concepts of the game, tricks and tips to improve your skills."

​
author

Type: string (required) Author’s name, displayed in the author card on the post page. 
author: "Ivanciooo"

​
publish

Type: boolean (required) Whether the post should be published. Set to false for drafts. 
publish: true
You need to manually filter by publish: true in your queries if you want to hide unpublished posts.

​
tags

Type: string[] (optional) Array of tags/categories for the post. Displayed as badges on the post page. 
tags: ["Guide", "Beginners", "Tutorials"]

​
authorImage

Type: string (required) URL to the author’s avatar image, displayed in the author card. 
authorImage: "https://www.robtopgames.com/Images/icon_200.png"

​
Markdown Styling

The PostLayout component provides custom styling for markdown content:
  • Headings - Bold, white text with proper sizing
  • Paragraphs - 1.1rem font size with 1.75 line height
  • Lists - Proper spacing and indentation
  • Links - Primary color (#0281C6) with hover effects
  • Images - Rounded corners, responsive sizing
  • Blockquotes - Left border in primary color
  • Code - Dark background with syntax highlighting
All styling is defined in src/pages/blog/[slug].astro:178-293.

​
Best Practices

Use descriptive filenames: The filename becomes the URL, so make it clear and SEO-friendly.
Write good descriptions: The description field is used for SEO and social sharing, so make it compelling.
Choose quality images: The cover image is prominently displayed. Use high-quality, relevant images.
Add meaningful tags: Tags help users find related content. Use consistent tag names across posts.
Test before publishing: Always preview your post in development before setting publish: true.

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us