GatsbyJS 3 (Static site generator) + MDX

Pet-project Blog generated using gatsby-starter-default & MDX

DEMO link of Frontend deployed on Netlify

• Frontend deployed on Netlify => continuous integration from GitHub
• Frontend deployed on Vercel => continuous integration from GitHub

• Gatsby 3.0
• Quick Start
• Gatsby Starters
• Hello world starter
• Gatsby Plugin Library
• React icons
• gatsby-plugin-image - ⚠️ The “fixed” and “fluid” resolvers are now deprecated.
• Migrating from gatsby-image to gatsby-plugin-image
• Gatsby Image plugin
• Getting Started with Gatsby
• prop-types
• gatsby-plugin-react-helmet
• Adding an Seo Component
• Pexels stock photos
• PNG photos
• Completely Free online photo editing
• Favicon
• gatsby-image - ⚠️ This package is now deprecated
• Inkscape
• Netlify Forms setup
• What’s MDX?
• Markdown Cheatsheet
• Styled Components
• Add components to content using MDX
• gatsby-remark-images
• Working with Video
• PropTypes
• Config Files
• Add components to content using MDX
• Table of components MDX
• Customizing Markdown Components Gatsby
• prism-react-renderer
• gatsby-plugin-mdx
• Adding an Seo Component
• @reach/router"">@reach/router - ⚠️ - may cause build error (in React17)
• @gatsbyjs/reach-router">reach-router for React17 (not tested)

Requirements:

• Node.js
• Netlify - Frontend site + Newsletter Form

Run in terminal

npm i

Or install Gatsby project manually:

npm i -g gatsby-cli
gatsby --version
npm install -g npm@7.10.0
gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
gatsby clean
gatsby develop

Check the result:

• localhost:8000
• localhost:8000/___graphql

Netlify Newsletter

Code an HTML form into any page on your site, add a netlify attribute to the
<form>tag, and you’ll receive submissions in your Netlify dashboard.
HTML files are parsed directly at deploy time, so there’s no need for you to
make an API call or include extra JavaScript on your site.

 <form
    className="contact-form"
    name="newsletter-submission"
    netlify-honeypot="bot-field"
    method="POST"
    data-netlify="true"
    action="/success"
  >
    <input
      type="text"
      name="name"
      placeholder="Your name"
      className="form-control"
      required
    />
    <input
      type="email"
      name="email"
      placeholder="Your email"
      className="form-control"
      required
    />
    <input type="hidden" name="bot-field" />
    <input
      type="hidden"
      name="form-name"
      value="newsletter-submission"
    />
    <button type="submit" className="btn form-control submit-btn">
      Subscribe
    </button>
  </form>

Creating posts dynamically

1. generate GraphQL query for posts

query MyQuery {
  allMdx {
    nodes {
      frontmatter {
        slug
      }
    }
  }
}

1. paste query to gatsby-node.js
2. create post template
3. use import { MDXRenderer } from 'gatsby-plugin-mdx' for body content in template
4. generate GraphQL query%0A%20%20%7D%0A%7D%0A&operationName=MyQuery>) for posts categories

query MyQuery {
  categories: allMdx {
    distinct(field: frontmatter___category)
  }
}

1. paste query to gatsby-node.js
2. create category template
3. restart Gatsby server

Config Files

function wrapRootElement to wrap App in MDX Provider, that allows to intercept the elements typed in MDX

• Gatsby Browser APIs
• Gatsby Server Rendering APIs

make changes in gatsby-browser & gatsby-ssr with logic in root-mdx

import React from 'react'
import { MDXProvider } from '@mdx-js/react'
const components = {
  h2: props => {
    console.log(props)
    return <h2 {...props}>{props.children}</h2>
  },
}
export const wrapMDX = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

<h2 title="true">random h2</h2>

Errors

to avoid deployment errors => delete package-lock.json

Netlify => Published deploy => Stop auto publishing => Publish Deploy

npm i gatsby-plugin-offline

npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number
of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x ev
en if nothing is polyfilled.
Please, upgrade your dependencies to the actual version of core-js.

ERROR

(node:3700) [DEP0148] DeprecationWarning: Use of deprecated folder mapping “./“ in the “exports” field module
resolution of the package at D:\projects\gatsby_03\node_modules\postcss-js\package.json.
Update this package.json to use a subpath pattern like “./*“.

ERROR #98124 WEBPACK

Generating development JavaScript bundle failed

Can’t resolve ‘/srcpagespost.mdx?type=component’ in ‘D:\projects\gatsby_03\src\pages’

If you’re trying to use a package make sure that ‘/srcpagespost.mdx?type=component’ is installed.
If you’re trying to use a local file make sure that the path is correct.

File: src\pages\post.mdx0

failed Re-building development bundle - 2.369s
ERROR in ./src/pages/post.mdx 4:0-60
Module not found: Error: Can’t resolve ‘/srcpagespost.mdx?type=component’
in ‘D:\projects\gatsby03\src\pages’
@ ./.cache/_this_is_virtual_fs_path/$virtual/async-requires.js 315
@ ./.cache/app.js 17:0-52 30:0-86 32:27-40 30:0-86

webpack compiled with 1 error

Process finished with exit code 1

Markdown Cheat Sheet

Thanks for visiting The Markdown Guide!

This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements.
It can’t cover every edge case, so if you need more information about any of these elements,
refer to the reference guides for basic syntax
and extended syntax.

Basic Syntax

These are the elements outlined in John Grubber’s original design document.
All Markdown applications support these elements.

Heading

H1

H2

H3

Bold

bold text

Italic

italicized text

Blockquote

blockquote

Ordered List

1. First item
2. Second item
3. Third item

Unordered List

• First item
• Second item
• Third item

Code

code

Horizontal Rule

Link

title

Image

Extended Syntax

These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.

Table

Fenced Code Block

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Footnote

Here’s a sentence with a footnote. [^1]

[^1]: This is the footnote.

Heading ID

My Great Heading {#custom-id}

Definition List

term
: definition

Strikethrough

The world is flat.

Task List

• Write the press release
• Update the website
• Contact the media