How to Create and Publish Posts

Introduction

This guide will walk you through the process of creating and publishing blog posts on this Astro-powered website. All posts are written in Markdown format and stored in the src/content/posts/ directory.

Creating a New Post

Step 1: Create a Markdown File

Navigate to the posts directory and create a new file:

cd src/content/posts
touch my-new-post.md

The filename will become the URL slug. For example:

• my-new-post.md → /posts/my-new-post
• hello-world.md → /posts/hello-world

Step 2: Add Frontmatter

Every post must start with frontmatter (metadata) enclosed in triple dashes:

***
title: "Your Post Title"
date: 2024-10-05
description: "A brief description of your post"
tags: ["tag1", "tag2", "tag3"]
draft: false
***

Frontmatter Fields Explained

Required Fields

Field	Type	Description	Example
title	string	Post title displayed in heading	"My Amazing Post"
date	date	Publication date (YYYY-MM-DD)	2024-10-05

Optional Fields

Field	Type	Description	Default
description	string	Short summary for SEO and previews	null
tags	array	List of tags for categorization	[]
draft	boolean	Hide post from production	false

Writing Content

After the frontmatter, write your content using Markdown syntax:

***
title: "My First Post"
date: 2024-10-05
description: "Learning to write blog posts"
tags: ["blogging", "tutorial"]
draft: false
***

## Introduction

Welcome to my first blog post!

### Section 1

Here's some content with **bold text** and *italic text*.

- List item 1
- List item 2
- List item 3

### Section 2

You can add code blocks:

\`\`\`javascript
console.log('Hello, World!');
\`\`\`

And images:

Markdown Features

Text Formatting

• Bold: **bold text** or __bold text__
• Italic: *italic text* or _italic text_
• Strikethrough: ~~strikethrough~~
• Inline code: `code`

Links

• External: [Link text](https://example.com)
• Internal: [About page](/about)

Images

Code Blocks

Use triple backticks with language specification:

\`\`\`javascript
function hello() {
  console.log('Hello!');
}
\`\`\`

Supported languages include: javascript, typescript, python, bash, css, html, json, and many more!

Tables

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |
| Data 4   | Data 5   | Data 6   |

Publishing Your Post

Development Preview

1. Start the dev server:

npm run dev

2. Navigate to http://localhost:4321/posts/your-post-slug

3. Check that everything looks correct

Deploy to Production

1. Commit your changes:

git add src/content/posts/my-new-post.md
git commit -m "feat: add new blog post"
git push origin main

2. If using Vercel/Netlify, deployment happens automatically

3. Your post will be live in a few minutes!

Best Practices

Title Guidelines

• Keep titles under 60 characters for SEO
• Be descriptive and specific
• Use title case or sentence case consistently
• Avoid clickbait

Description Tips

• Write 120-160 characters for optimal SEO
• Include main keywords naturally
• Make it compelling but accurate
• Think of it as a preview snippet

Tag Management

• Use 3-5 tags per post
• Keep tags consistent across posts
• Use lowercase for tag names
• Choose relevant, searchable tags

Troubleshooting

Post Not Showing Up?

1. Check draft: false in frontmatter
2. Verify date is not in the future
3. Ensure file is in src/content/posts/ directory
4. Rebuild the site: npm run build

Formatting Issues?

1. Validate frontmatter YAML syntax
2. Check Markdown syntax errors
3. Test locally before deploying
4. View browser console for errors

Next Steps

Now that you know how to create posts, check out these guides:

• Admonitions Guide - Learn to use callout boxes
• Google Verification - Set up Google Search Console
• Installation Guide - Full setup documentation

Happy blogging! 🚀