How to Write Blog Posts on This Website

Introduction

This guide will walk you through the process of creating and publishing blog posts on this website. We use Markdown (.md) and MDX (.mdx) files for writing posts, which makes it easy to create well-formatted content with rich features.

File Structure

Blog posts are stored in the src/content/post/ directory. Each post is a separate file with either a .md or .mdx extension. The filename becomes part of the URL for your post.

Front Matter

Every blog post starts with front matter - a YAML section at the top of the file that contains metadata about your post. Here’s what it looks like:

---
publishDate: 2024-01-25T00:00:00Z
title: Your Blog Post Title
excerpt: A brief description of your post that appears in previews
image: https://url-to-your-header-image.jpg
tags:
  - tag1
  - tag2
---

Required Fields

• publishDate: The publication date in ISO format
• title: The title of your blog post
• excerpt: A short description (shown in previews)
• image: Header image URL
• tags: Array of relevant tags

Writing Content

After the front matter, you can write your post content using Markdown syntax.

Basic Markdown Syntax

# H1 Heading

## H2 Heading

### H3 Heading

**Bold text**
_Italic text_

- Bullet point
- Another point

1. Numbered list
2. Second item

[Link text](URL)

![Image alt text](image-url)

Code Blocks

For code snippets, use triple backticks with the language specified:

```javascript function hello() { console.log(“Hello, World!”); } ```

Using MDX Features

If you’re using an .mdx file, you can import and use React components:

import MyComponent from '~/components/MyComponent';

<MyComponent prop="value" />;

Adding Images

1. Place your images in src/assets/images/
2. Reference them in your post:

   ![Alt text](~/assets/images/your-image.jpg)

Best Practices

1. Use Descriptive Filenames: Use kebab-case for filenames (e.g., my-blog-post.md)
2. Optimize Images: Compress images before uploading
3. Structure Content: Use headings to organize your content logically
4. Add Tags: Include relevant tags to help with content discovery
5. Preview: Test your post locally before publishing

Publishing

1. Create your post file in src/content/post/
2. Add the front matter and content
3. Commit and push to the repository
4. The site will automatically rebuild and deploy your new post

Example Post Structure

Here’s a complete example of a blog post:

---
publishDate: 2024-01-25T00:00:00Z
title: Getting Started with React Hooks
excerpt: Learn how to use React Hooks to manage state and side effects in functional components.
image: https://example.com/react-hooks.jpg
tags:
  - react
  - javascript
  - web-development
---

## Introduction

React Hooks are a powerful feature that lets you use state and other React features in functional components...

## Understanding useState

The useState hook is the most basic hook that lets you add state to functional components...

## Conclusion

React Hooks provide a simpler way to handle state and side effects in your components...

Need Help?

If you encounter any issues or have questions about writing blog posts:

1. Check the existing blog posts for examples
2. Review the Markdown syntax guide
3. Contact the site administrator

Remember, the key to a good blog post is clear writing, proper formatting, and valuable content. Happy blogging!