Adding Blog Posts

Complete guide to adding blog posts to your portfolio website.

Understanding Blog Posts

Blog posts are displayed chronologically with tags, dates, and descriptions. They appear on the blog listing page and can be featured on the homepage.

Step 1: Create a Blog Post File

Create a new .mdx file in the content/blog/ directory:

URL: The file name becomes the URL slug

• content/blog/my-first-post.mdx → /blog/my-first-post

Step 2: Add Frontmatter

Blog posts require frontmatter with metadata:

Required Fields

• title: Blog post title
• description: Brief description (appears in listings)
• publishedAt: Publication date (YYYY-MM-DD format)

Optional Fields

• updatedAt: Last update date (YYYY-MM-DD format)
• author: Author name
• tags: Array of tags for categorization

Step 3: Write Your Blog Post

Write your content using Markdown or MDX:

Lists

• First item
• Second item
• Third item

Conclusion

This is the conclusion of my blog post.

Server Components

Server Components allow you to render components on the server:

Getting Started

Installation

Project Structure

Best Practices

1. Use Server Components by default
2. Leverage the App Router for better performance
3. Optimize images with Next.js Image component
4. Use TypeScript for type safety

Conclusion

Next.js 14 is a powerful framework for building modern web applications. The new features make it easier than ever to create fast, scalable applications.

Resources

• Next.js Documentation
• Next.js GitHub
• Next.js Blog

content/blog/ ├── 2024/ │ ├── january/ │ │ └── my-post.mdx │ └── february/ │ └── another-post.mdx └── 2023/ └── december/ └── old-post.mdx

Code Blocks

Images

Videos

Best Practices

1. Write engaging descriptions: They appear in listings
2. Use tags: Categorize your posts for better organization
3. Include dates: Help readers understand when content was published
4. Use headings: Structure long posts with headings
5. Add examples: Include code examples and screenshots
6. Link to related content: Connect to other posts or documentation

Display on Homepage

The latest blog posts automatically appear on the homepage. The number of posts shown can be customized in app/page.tsx.

Next Steps

• Adding Documentation - Learn about documentation
• Using Features - Learn about all features
• Customization - Customize your site