Docs/add markdown page #3111

pksjce · 2017-12-03T01:22:00Z

This is just a stripped down reproduction of https://www.gatsbyjs.org/blog/2017-07-19-creating-a-blog-with-gatsby/ with generalised terms and actionable steps. I found that this was the minimum setup I required to get my blog working.
Also in the context is https://www.gatsbyjs.org/blog/2017-11-08-migrate-from-jekyll-to-gatsby/

tamouse · 2017-12-03T01:24:26Z

docs/docs/adding-markdown-pages.md

+
+1. Read files in Gatsby from the filesystem.
+2. Understand Markdown syntax. Convert metadata to api and content to html.
+3. Create a page template from above Markdown data and style it.


"from" should be "for" to match heading below?

gatsbybot · 2017-12-03T01:26:51Z

Deploy preview ready!

Built with commit 9b21069

https://deploy-preview-3111--using-drupal.netlify.com

gatsbybot · 2017-12-03T01:27:31Z

Deploy preview ready!

Built with commit 4c5a1c9

https://deploy-preview-3111--gatsbygram.netlify.com

tamouse · 2017-12-03T01:34:04Z

docs/docs/adding-markdown-pages.md

+}
+
+export const pageQuery = graphql`
+  query BlogPostByPath($path: String!) {


Could you offer just a little more about who / how the $path variable is getting filled in? I thought it would get set in the context parameter in gatsby-node.js but I don't see it there.

Thanks for the review!
So that's a graphQL thingy which I don't completely understand honestly :(
Regardless, wouldn't the right thing to do be point to graphQL docs or graphQL-Gatsby docs at this stage? It would be awfully irrelavant explaining graphQL query structure here no?

Sorry, I don't mean explain how graphql variables work, I mean specifically what sets the value for that $path variable. If that's a standard thing that's explained somewhere else, then a pointer would be good. I haven't found a place it's explained, though. I only figured out some of how they work by reading code in the examples (gatsbygram in particular).

Also, I really want to say thank you for writing this, it's already helped me a lot.

I'm sorry for the delay. I really am only trying this out on the weekend. Thanks for the encouragement. Will finish this up soon.

@tamouse - I tried figuring this out. I think I have an idea that possibly some Gatsby Node-api magic is involved, but can't say for sure. Would really love somebody's help on this. Maybe @KyleAMathews can help me with this part of the documentation.

@tayiorbeii talks about this in https://egghead.io/lessons/gatsby-create-a-blog-post-template-for-gatsby .Maybe he can help?

shannonbux

Hi pksjce! Thanks for submitting this PR! We're excited! I'm helping Kyle Mathews out with docs and will probably be making a few reviews of this file (usually it will be edits for grammar and style rather than actual coding knowledge--so please correct me if I'm wrong!).

shannonbux · 2017-12-04T22:28:33Z

docs/docs/adding-markdown-pages.md

-This is a stub. Help our community expand it.
+Gatsby can easily convert Markdown pages to static pages in your site.
+It provides plugins to read and understand folders with markdown files and 
+node api, which help you create static pages automatically.


My initial feedback is to make sure you write API with all caps. And are you referring to Node.js API? Because if so, then Node.js is capitalized too.

shannonbux · 2017-12-04T22:29:15Z

docs/docs/adding-markdown-pages.md

+Here's how you do it step by step.
+
+1. Read files in Gatsby from the filesystem.
+2. Understand Markdown syntax. Convert metadata to api and content to html.


I believe HTML is also in all caps.

shannonbux · 2017-12-04T22:31:58Z

docs/docs/adding-markdown-pages.md

+
+#### Note on creating markdown files.
+
+When you create a Markdown file, you can add a block that looks like below to the top of the file content. This block will be parsed by `gatsby-transformer-remark` as `frontmatter`. The GraphQL api will provide this data in our React components.


"that looks like the block below"

shannonbux · 2017-12-04T22:33:39Z

docs/docs/adding-markdown-pages.md

+
+Gatsby exposes a powerful Node API, which allows for functionality such as creating dynamic pages. This API is exposed in the `gatsby-node.js` file in the root directory of your project, at the same level as `gatsby-config.js`. Each export found in this file will be parsed by Gatsby, as detailed in its [Node API specification](https://www.gatsbyjs.org/docs/node-apis/). However, we only care about one particular API in this instance, `createPages`.
+
+Gatsby calls the `createPages` api (if present) at build time with injected parameters, `boundActionCreators` and `graphql`. Use the `graphql` to query Markdown file data as below. Next use `createPage` action creator to create a page for each of the Markdown files using the `blogTemplate.js` we created in the previous step.


"to query Markdown file data as shown below"

shannonbux · 2017-12-04T22:34:17Z

docs/docs/adding-markdown-pages.md

+```
+
+Two things are important in the file above.
+1. A GraphQL query is made in the second half of the file to get the markdown data. Gatsby has automagically given you all the Markdown metadata and html in this query's result.


I believe Markdown is always capitalized as well.

shannonbux · 2017-12-04T22:34:54Z

docs/docs/adding-markdown-pages.md

+Now open up your `gatsby-config.js` to add this plugin to the plugin list.
+
+The plugin list accepts either a string which is the plugin name or an object with any options you may want to pass.
+Here we add an object with the path as an option to the plugin


This line is missing punctuation, like a period or colon at the end.

pksjce · 2017-12-09T06:10:55Z

Hey @shannonbux - I've made the grammatical corrections!

KyleAMathews · 2017-12-14T00:39:19Z

Thanks @pksjce and the reviewers!

pksjce · 2017-12-14T00:49:00Z

Yay! Thanks!

pksjce · 2017-12-14T00:53:42Z

Hey @KyleAMathews - How would I fix the indentation here?

KyleAMathews · 2017-12-14T01:30:15Z

Fixed it in another PR actually :-) it's in the docs-links.yaml file for future reference

pksjce · 2017-12-14T01:30:54Z

Cool! In my next PR will remember to do that too.

shannonbux · 2017-12-20T05:13:07Z

@pksjce and @tamouse I just wanted to say thank you again for doing the work to fill out this stub article and edit it! You are some of the first brave people to contribute to the new stub articles and it made the process so much faster. Awesome 💃 😸 🙌 and looking forward to your future PR's! :D

jlengstorf · 2019-02-16T08:14:07Z

Hiya @pksjce! 👋

This is definitely late, but on behalf of the entire Gatsby community, I wanted to say thank you for being here.

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (We’ve got t-shirts and hats, plus some socks that are really razzing our berries right now.)
If you’re not already part of it, we just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. You’ll receive an email shortly asking you to confirm. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If you have questions, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again! 💪💜

pkodmad added 2 commits December 3, 2017 11:23

First draft of add markdown pages

339607d

Polish the draft

467d2b0

tamouse reviewed Dec 3, 2017

View reviewed changes

shannonbux suggested changes Dec 4, 2017

View reviewed changes

Make grammatical corrections

9b21069

Update adding-markdown-pages.md

2b2577b

ghost assigned KyleAMathews Dec 14, 2017

ghost added the review label Dec 14, 2017

KyleAMathews added 2 commits December 13, 2017 16:38

Merge branch 'master' into docs/add-markdown-page

f25b121

Format markdown

4c5a1c9

KyleAMathews merged commit 616a745 into gatsbyjs:master Dec 14, 2017

ghost removed the review label Dec 14, 2017

pksjce deleted the docs/add-markdown-page branch December 14, 2017 00:49

snyk-bot mentioned this pull request Jan 17, 2022

[Snyk] Fix for 59 vulnerabilities danielres/gatsby#1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs/add markdown page #3111

Docs/add markdown page #3111

pksjce commented Dec 3, 2017 •

edited

Loading

tamouse Dec 3, 2017

gatsbybot commented Dec 3, 2017 •

edited

Loading

gatsbybot commented Dec 3, 2017 •

edited

Loading

tamouse Dec 3, 2017

pksjce Dec 4, 2017

tamouse Dec 5, 2017

tamouse Dec 5, 2017

pksjce Dec 8, 2017

pksjce Dec 9, 2017

pksjce Dec 9, 2017

shannonbux left a comment

shannonbux Dec 4, 2017

shannonbux Dec 4, 2017

shannonbux Dec 4, 2017

shannonbux Dec 4, 2017

shannonbux Dec 4, 2017

shannonbux Dec 4, 2017

pksjce commented Dec 9, 2017

KyleAMathews commented Dec 14, 2017

pksjce commented Dec 14, 2017

pksjce commented Dec 14, 2017

KyleAMathews commented Dec 14, 2017

pksjce commented Dec 14, 2017

shannonbux commented Dec 20, 2017 •

edited

Loading

jlengstorf commented Feb 16, 2019


		#### Note on creating markdown files.

		When you create a Markdown file, you can add a block that looks like below to the top of the file content. This block will be parsed by `gatsby-transformer-remark` as `frontmatter`. The GraphQL api will provide this data in our React components.


		Gatsby exposes a powerful Node API, which allows for functionality such as creating dynamic pages. This API is exposed in the `gatsby-node.js` file in the root directory of your project, at the same level as `gatsby-config.js`. Each export found in this file will be parsed by Gatsby, as detailed in its [Node API specification](https://www.gatsbyjs.org/docs/node-apis/). However, we only care about one particular API in this instance, `createPages`.

		Gatsby calls the `createPages` api (if present) at build time with injected parameters, `boundActionCreators` and `graphql`. Use the `graphql` to query Markdown file data as below. Next use `createPage` action creator to create a page for each of the Markdown files using the `blogTemplate.js` we created in the previous step.

Docs/add markdown page #3111

Docs/add markdown page #3111

Conversation

pksjce commented Dec 3, 2017 • edited Loading

Choose a reason for hiding this comment

gatsbybot commented Dec 3, 2017 • edited Loading

gatsbybot commented Dec 3, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shannonbux left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pksjce commented Dec 9, 2017

KyleAMathews commented Dec 14, 2017

pksjce commented Dec 14, 2017

pksjce commented Dec 14, 2017

KyleAMathews commented Dec 14, 2017

pksjce commented Dec 14, 2017

shannonbux commented Dec 20, 2017 • edited Loading

jlengstorf commented Feb 16, 2019

pksjce commented Dec 3, 2017 •

edited

Loading

gatsbybot commented Dec 3, 2017 •

edited

Loading

gatsbybot commented Dec 3, 2017 •

edited

Loading

shannonbux commented Dec 20, 2017 •

edited

Loading