Creating a coding blog with gatsby.js and mdx

Welcome to the first post in our tutorial series!

In this post, we will walk you through the process of setting up a coding blog using Gatsby and MDX. This tutorial assumes you have some familiarity with React and Gatsby, but don’t worry if you're just getting started—I'll make sure everything is easy to follow!

Prerequisites

Before we get started, ensure you have the following installed:

Node.js and npm
Gatsby CLI
A code editor (VS Code is a good choice)

You can install Gatsby globally by running:

1npm install -g gatsby-cli

Step 1: Create a New Gatsby Project

First, we’ll create a new Gatsby project. Open your terminal and run:

1gatsby new coding-blog https://github.com/gatsbyjs/gatsby-starter-blog
2cd coding-blog

This will create a new Gatsby project using the gatsby-starter-blog, which is a great starting point for a blogging website.

Step 2: Install MDX for Gatsby

MDX allows you to write Markdown mixed with React components. To use MDX in our project, we need to install a couple of dependencies.

Run the following command to install the necessary packages:

1npm install @gatsby-plugin-mdx @mdx-js/react

Now, let’s configure Gatsby to use MDX.

Step 3: Update Gatsby Configuration

In your project, find the gatsby-config.js file and add the gatsby-plugin-mdx to the plugins array. Here’s how your gatsby-config.js should look:

1module.exports = {
2  siteMetadata: {
3    title: `My Coding Blog`,
4    author: `Your Name`,
5    description: `A blog about web development and coding tutorials`,
6    siteUrl: `https://www.yourdomain.com`,
7  },
8  plugins: [
9    `gatsby-plugin-react-helmet`,
10    `gatsby-plugin-styled-components`,
11    `gatsby-source-filesystem`,
12    {
13      resolve: `gatsby-plugin-mdx`,
14      options: {
15        extension: `.mdx`,
16        gatsbyRemarkPlugins: [
17          {
18            resolve: `gatsby-remark-images`,
19            options: {
20              maxWidth: 800,
21            },
22          },
23        ],
24      },
25    },
26    `gatsby-transformer-remark`,
27    `gatsby-plugin-sharp`,
28    `gatsby-transformer-sharp`,
29  ],
30};

This configuration sets up Gatsby to use MDX files and process them correctly. It also includes some useful plugins, such as gatsby-remark-images for image handling.

Step 4: Create Your First Post

Now that MDX is set up, it’s time to create our first post!

Inside the src/posts directory (you may need to create this folder if it doesn't exist), create a new file called creating-a-coding-blog-with-gatsby-and-mdx.mdx.

Add the following content to the file:

1---
2title: "Creating a Coding Blog with Gatsby and MDX"
3date: "2024-11-28"
4author: "Your Name"
5---
6
7# Creating a Coding Blog with Gatsby and MDX
8
9Welcome to the first post in our tutorial series! In this post, we will walk you through the process of setting up a coding blog using **Gatsby** and **MDX**. This tutorial assumes you have some familiarity with React and Gatsby but don’t worry if you're just getting started—I'll make sure everything is easy to follow!

Step 5: Style the Blog with Tailwind CSS

To style our blog, we’ll use Tailwind CSS, a utility-first CSS framework that makes it easy to build responsive and modern designs.

To install Tailwind, run:

1npm install tailwindcss postcss autoprefixer
2npx tailwindcss init
3In the tailwind.config.js file, enable JIT (just-in-time) mode and specify which files Tailwind should scan for class names:

Then configure:

1module.exports = {
2  content: ["./src/**/*.{js,jsx,ts,tsx,mdx}"],
3  theme: {
4    extend: {},
5  },
6  plugins: [],
7};

Now, in your src/styles/global.css, import Tailwind’s default styles:

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

You can now use Tailwind’s utility classes throughout your project to style your blog!

Conclusion Congratulations! You've set up a basic blogging website using Gatsby and MDX. You’ve also learned how to add and style posts using Tailwind CSS.

In the next post, we will dive deeper into customizing our blog, adding components, and optimizing performance. Stay tuned!

Happy coding! ✨