github as database

how to blog


Create your first post in Coding Club Blogs

5 mins Read

beginner blog tutorial

Noufal Rahman

Thu 1 Feb 24 8:27 pm

Last edited by,


Sat 20 Apr 24 7:34 pm

Create your first post in Coding Club Blogs

Hey there, enthusiastic students! Welcome to the Coding Club Blog, a platform where you can share your knowledge, insights, and passion for technology. We're thrilled to have you join our community of passionate writers and learners.

We've made it easy for you to contribute to our blog by creating your own posts. Here's a step-by-step guide to help you get started:

Fork the Repository

  • Head over to the Coding Club Blog GitHub repository.
  • Click on the "Fork" button in the top-right corner of the page to create your own copy of the repository.
  • This forked repository will be linked to your GitHub account and will allow you to make changes and create new posts.

Clone the Repository to Your Local Machine

  • Open your preferred terminal emulator.
  • Navigate to the directory where you want to clone the repository.
  • Run the following command to clone the repository:
    git clone https://github.com/<your-github-id>/blogs.git
  • This will create a local copy of the repository on your computer.

Create a New MDX File in the app/blogs Folder

  • Navigate to the src/blogs folder within the cloned repository.
  • Create a new MDX file with the name of your post. For example, if you're writing a post about "My Journey into Python," you would create a file named my-journey-into-python.mdx.

Write Your Post

  • Open the newly created MDX file in your preferred text editor.
  • You can refer to src/template.mdx to create a blog. You have to use markdown to write the entire post
  • Start writing your post! You can include text, images, videos, code snippets, and more.
  • MDX allows you to combine Markdown with JSX, giving you the flexibility to create dynamic and interactive content.

Add Frontmatter to Your Post

  • At the beginning of your MDX file, add a frontmatter section.
  • The frontmatter is a YAML-formatted block that contains metadata about your post, such as the title, author, date, and tags.
  • An example frontmatter section:
       title: "Title of your blog post"
           - tag 1
           - tag 2
           - tag 3
       coverImage: "<image link for your cover image>"
       read: 5 mins

Preview Your Post

  • Run the following command in your terminal to start the development server:
    npm run dev
  • Once the server is running, you can preview your post by visiting http://localhost:3000/<your-post-name> in your browser.
  • This will allow you to see how your post looks before it's published.

Commit and Push Your Changes

  • Once you're satisfied with your post, add and commit your changes to your local repository:
    git add .
    git commit -m "Added new post: [post title]"
  • Push your changes to your forked repository on GitHub:
    git push origin main

Create a Pull Request

  • Head over to your forked repository on GitHub.
  • Click on the "Pull requests" tab.
  • Click on the "New pull request" button.
  • Select your branch as the "head branch" and the main branch of the Coding Club Blog repository as the "base branch."
  • Write a clear and concise description of your changes.
  • Click on the "Create pull request" button.

Review and Merge Your Pull Request

  • We'll review your pull request and provide feedback if necessary.
  • Once your pull request is approved, we'll merge it into the main branch of the Coding Club Blog repository, making your post live!

Share Your Post

  • Once your post is published, share it with your friends, family, and fellow students. Encourage them to read it, comment, and engage in discussions.

We're excited to see what you create! By contributing to the Coding Club Blog, you're not only sharing your knowledge but also inspiring others to do the same. Let's build a thriving community of passionate learners and technology enthusiasts. Get writing and let your voice be heard!

Comment Section


Login to post a comment

Blogs from Coding Club GCT

Ideas Unleashed


Connect with us

Source Code