diff --git a/README.md b/README.md index a094813..6a63839 100644 --- a/README.md +++ b/README.md @@ -524,11 +524,51 @@ Now we can add some JSX that loops through all of our files and outputs the info +## 11 Working with Markdown +Now we are able to access information about all of our pages. But as mentioned, in the beginning of the last paragraph, we are also able to use **Gatsby Transformer Plugins** to look into files and make their content available to GraphQL. + +In this case we want to use Markdown files and transform them, to be able to display their content in our website. The Transformer Plugin needed for this is [gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/). First we need to install the plugin: + +``` +npm install --save gatsby-transformer-remark +``` + +Then create a markdown page inside */src/pages/myfirstpost.md* that contains some **FrontMatter** (metadata in the beginning of the file, that can later be queried by GraphQL) and some text: -## 11 Working with Markdown -## 12 Build the Static Page +``` +--- +title: "My first Post" +author: "Mike Polinowski" +--- + +# This is my first mardown Post! +``` + +Now we need to add the plugin to */gatsby-config.js* : + +``` +`gatsby-transformer-remark`, +``` + +Now we have Markdown available in GraphQL - as before, just start typing allMardownRemark (ENTER autocompletes) and then press **CTRL + ENTER** to complete your query: + + +![](./gatsby_09.png) + + + +Now we can query for the FrontMatter as well as the MD-to-HTML transformed content of each MD file we add to our pages folder: + + +![](./gatsby_09.png) + + + + + +## 12 Build the Static Page We now want to move our website from the development environment to our webserver. Gatsby offers us a simple command to build render our React.js page into a static website: diff --git a/gatsby-config.js b/gatsby-config.js index 3b7486c..4430a4f 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -64,5 +64,6 @@ module.exports = { path: `${__dirname}/src/data/`, }, }, + `gatsby-transformer-remark`, ], } diff --git a/gatsby_09.png b/gatsby_09.png new file mode 100644 index 0000000..e91200f Binary files /dev/null and b/gatsby_09.png differ diff --git a/gatsby_10.png b/gatsby_10.png new file mode 100644 index 0000000..f6bd314 Binary files /dev/null and b/gatsby_10.png differ diff --git a/package.json b/package.json index d457d4f..0419d4d 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "gatsby-plugin-offline": "^1.0.9", "gatsby-plugin-react-helmet": "^1.0.5", "gatsby-source-filesystem": "^1.5.2", + "gatsby-transformer-remark": "^1.7.15", "prop-types": "^15.6.0" }, "keywords": [ diff --git a/src/pages/myfirstpost.md b/src/pages/myfirstpost.md new file mode 100644 index 0000000..ae89878 --- /dev/null +++ b/src/pages/myfirstpost.md @@ -0,0 +1,6 @@ +--- +title: "My first Post" +author: "Mike Polinowski" +--- + +# This is my first mardown Post!