Part 1. GatsbyJS How to enable MDX

In GatsbyJS prompt, install the starter project.

E:\Repo\Tests> gatsby new myproject https://github.com/gatsbyjs/gatsby-starter-default

This creates a new folder called myproject in which all the code and dependencies are imported. Open the Folder with Visual Studio Code. In the Terminal window, execute the command below to run the website :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

    E:\Repo\Tests> gatsby develop
    ...
    ⠀
    You can now view gatsby-starter-default in the browser.
    ⠀
    http://localhost:8000/
    ⠀
    View GraphiQL, an in-browser IDE, to explore your site's data and schema
    ⠀
    http://localhost:8000/___graphql
    ⠀
    Note that the development build is not optimized.
    To create a production build, use gatsby build
    ⠀
    success Building development bundle - 3.660s

You can now see the website in live by clicking on http://localhost:8000/

Now let’s add a folder Blog under src/pages and add 1 file named post1.mdx :

1
2
3
4
5
6
7
8

    ---
    title: My First Post
    ---
    # Post 1
    ## Part 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam diam est, mattis id justo at, tempus facilisis lorem. Vivamus auctor, nisl vel interdum sollicitudin, libero nisl malesuada massa, fringilla lobortis urna eros sit amet enim. Nulla eros nisi, laoreet a mollis nec, pellentesque ac metus. Integer maximus erat sed ipsum vehicula, sit amet consequat justo euismod. In orci neque, consectetur sed luctus eget, pharetra sed ante. Vestibulum enim nisi, faucibus sit amet ultrices faucibus, maximus sed nibh. Ut a lacinia diam. Proin tempus ipsum mi, sed auctor nunc convallis eu.
    ## Part 2
    Curabitur nunc quam, ultricies sed tortor nec, iaculis interdum mi. Aliquam laoreet ipsum commodo, euismod augue in, consequat nunc. Aenean dui lorem, dignissim nec blandit vel, ullamcorper in mauris. Vivamus quis orci mi. Fusce at fermentum metus, non pulvinar nisl. In non justo sed lacus facilisis iaculis. Sed venenatis eget urna suscipit posuere. Nulla egestas dapibus metus, in dapibus nunc molestie a. Suspendisse commodo, augue molestie bibendum consequat, turpis urna aliquet justo, sit amet placerat elit dolor eu odio. Ut condimentum, eros ut maximus lacinia, nibh mauris egestas lectus, at venenatis mi turpis ac lectus.

Let’s install the MDX plugin :

Then add the plugin in the gatsby-config.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

module.exports = {
siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
},
plugins: [
    `gatsby-plugin-react-helmet`,
    {
    resolve: `gatsby-source-filesystem`,
    options: {
        name: `images`,
        path: `${__dirname}/src/images`,
    },
    },
    {
    resolve: `gatsby-source-filesystem`,
    options: {
        name: `pages`,
        path: `${__dirname}/src/pages/Blog`,
    },
    },
    `gatsby-plugin-mdx`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
    resolve: `gatsby-plugin-manifest`,
    options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
    },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
],
}

After changing the config, run the development again with

E:\Repo\Tests> gatsby develop

Now go to the following url : http://localhost:8000/Blog/post1

The page has been created automaticaly and is now accessible.

The HTML of our post looks like this :

1
2
3
4
5
6
7

<div tabindex="-1" id="gatsby-focus-wrapper" style="outline: none;">
    <h1>Post 1</h1>
    <h2>Part 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam diam est, mattis id justo at, tempus facilisis lorem. Vivamus auctor, nisl vel interdum sollicitudin, libero nisl malesuada massa, fringilla lobortis urna eros sit amet enim. Nulla eros nisi, laoreet a mollis nec, pellentesque ac metus. Integer maximus erat sed ipsum vehicula, sit amet consequat justo euismod. In orci neque, consectetur sed luctus eget, pharetra sed ante. Vestibulum enim nisi, faucibus sit amet ultrices faucibus, maximus sed nibh. Ut a lacinia diam. Proin tempus ipsum mi, sed auctor nunc convallis eu.</p>
    <h2>Part 2</h2>
    <p>Curabitur nunc quam, ultricies sed tortor nec, iaculis interdum mi. Aliquam laoreet ipsum commodo, euismod augue in, consequat nunc. Aenean dui lorem, dignissim nec blandit vel, ullamcorper in mauris. Vivamus quis orci mi. Fusce at fermentum metus, non pulvinar nisl. In non justo sed lacus facilisis iaculis. Sed venenatis eget urna suscipit posuere. Nulla egestas dapibus metus, in dapibus nunc molestie a. Suspendisse commodo, augue molestie bibendum consequat, turpis urna aliquet justo, sit amet placerat elit dolor eu odio. Ut condimentum, eros ut maximus lacinia, nibh mauris egestas lectus, at venenatis mi turpis ac lectus.</p>
</div>