Go back

How to write more posts?

2024-06-08

This guide will walk you through the steps to add new posts to your Markdown blog system in Next.js. Follow these instructions to create and display new blog posts.

Step 1: Create a New Markdown File

  1. Navigate to the /posts directory in your project.
  2. Create a new Markdown file for your post. The file name should follow the format your-post-title.md.

For example, to create a post titled "My New Post", create a file named my-new-post.md.

Step 2: Add Metadata and Content

Open your new Markdown file and add the frontmatter (metadata) at the top of the file. Then, write the content of your post below the frontmatter.

Here’s an example of what your Markdown file should look like:

---
title: "My New Post"
date: "2024-06-10"
description: "This is a description of my new post."
---

# My New Post

This is the content of my new post.

Here, you can write your text, add images, links, and more.
  • title: The title of your blog post.
  • date: The date of your blog post (format: YYYY-MM-DD).
  • description: A brief description of your post.

Step 3: Save the File

After adding the metadata and content, save the file in the /posts directory.

Step 4: Verify the New Post

To ensure your new post appears correctly:

  1. Run your Next.js development server if it’s not already running:

    npm run dev

  2. Open your browser and navigate to http://localhost:3000/blogs. You should see your new post listed with the title and description you provided.

  3. Click on the post title to view the full content of your new blog post.

Step 5: Deploy Your Changes

If you’re satisfied with your new post and your blog is ready for an update:

  1. Commit your changes to your version control system (e.g., Git).
  2. Deploy your updated site to your hosting provider.

For example, using Git, you can commit and push your changes with:

git add .
git commit -m "Add new post: My New Post"
git push origin main

Then, follow your deployment process to update the live site with the new post.

Tips for Writing Markdown

  • Use # for headings. More # symbols mean smaller headings (e.g., ## for H2, ### for H3).
  • Use **bold** or *italic* for text formatting.
  • Use [link text](URL) to add links.
  • Use ![alt text](image URL) to add images.
  • Use - or * for bullet points.

Here’s a quick reference:

# Heading 1

## Heading 2

### Heading 3

**Bold text**

_Italic text_

[Link text](https://example.com)

![Alt text](https://example.com/image.jpg)

- Bullet point

* Bullet point