MDXBlog

2024-08-31 Web Development

How to Install MDXBlog and Deploy on Vercel

By O Wolfson

MDXBlog is a platform for bloggers who value the simplicity of Markdown and the power of React components. Built using MDX (Markdown + JSX) and Next.js 14, this blog template offers a unique blogging experience with easy content management. This guide will walk you through installing MDXBlog on your computer and deploying it on Vercel.

Prerequisites

Before you begin, ensure you have the following:

  • • Node.js installed on your computer
  • • A GitHub account
  • • A Vercel account

Installation Steps

  1. Clone the Repository

    • Find the MDXBlog repository on GitHub.
    • Clone the repository to your local machine using the command:
bash
git clone https://github.com/owolfdev/mdx-blog-basic

  1. Install Dependencies

    • Navigate to the cloned repository folder on your computer.
    • Run the following command to install the required dependencies:
bash
npm install

  1. Run the Development Server

    • Start the development server with the command:
bash
npm run dev
  • Open your web browser and go to http://localhost:3000 to view the blog.

  1. Set Up GitHub Repository

    • Create a new repository on GitHub.
    • Push your local repository to GitHub with:
bash
git remote add origin [your GitHub repo URL]
git push -u origin master
  1. Deploy on Vercel
    • Log in to your Vercel account.
    • Connect your GitHub account to Vercel.
    • Choose the repository you just pushed to GitHub.
    • Follow the prompts on Vercel to deploy your blog.

Configuring the Contact Form (Optional)

  • Google reCAPTCHA v3

    • Register for Google reCAPTCHA v3 to get your keys.
    • Add the keys to the .env.local file for development or your Vercel deployment for production.

  • Supabase

    • Register with Supabase for database services.
    • Obtain your keys and add them to the .env.local file or your Vercel deployment.
    • Note that you will need to create a table called contact_mdx_blog with the following columns:
    • id: uuid
    • email: string
    • name: string
    • message: string
    • type: string

  • Disabling the Contact Form

    • If desired, or to keep things simple, you can disable the contact form or remove the contact page by deleting the contact route from the app directory and removing links from the nav components.

Creating a Post

  • In Development Mode
    • Use the '+' icon in the nav bar to create a new post.
  • Manually
    • Alternatively, create a new MDX file in the 'data/posts' directory.
    • Edit posts using a text editor like VS Code.

Conclusion

MDXBlog combines technological innovation with user-centric design, making it an ideal choice for developers and content creators. By following these steps, you can set up your own MDXBlog and share your stories with the world.

Feel free to reach out if you need any more information or clarification on any of the steps!