Dynamically Generate Gatsby v1 Blog Posts by Path

Share this video with your friends

Send Tweet

Gatsby includes several Node APIs for building sites. In this lesson, we’ll use the createPages API to dynamically build a page for each of our posts, using the URL path in the frontmatter of each Markdown doc.

Luis Toubes
Luis Toubes
~ 7 years ago

The default export is missign on the templates/blog-post.js in the soruce code. I tried to open an issue on the repo but it's disabled.

Taylor Bell
Taylor Bell(instructor)
~ 7 years ago

@Luis it seems to be here https://github.com/eggheadio-projects/gatsby-demo-blog-code/blob/master/src/templates/blog-post.js#L55

Justin Handley
Justin Handley
~ 7 years ago

Just a note, but the blog posts don't display in date order - which should probably be a primary concern of a blog..

Taylor Bell
Taylor Bell(instructor)
~ 7 years ago

Just a note, but the blog posts don't display in date order - which should probably be a primary concern of a blog..

@Justin Handley - If the posts are out of order, try passing the sort option to the allMarkdownRemark part of the GraphQL query like this:

    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
    ) {
      edges { ...etc
      
Justin Handley
Justin Handley
~ 7 years ago

@Justin Handley - If the posts are out of order, try passing the sort option to the allMarkdownRemark part of the GraphQL query like this:

    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
    ) {
      edges { ...etc
      

Thanks - got it... If you sort DESC in index (showing newest first) you also have to do a sort in gatsby-node.js as ASC which will ensure that previous and next links also work correctly.

Taylor Bell
Taylor Bell(instructor)
~ 7 years ago

@Justin

Glad you got it going! We'll get a note added to the repo later today.

HK
HK
~ 6 years ago

this is one of the hardest video material that I've ever seen. Why do you need to play your video faster than it is. Plus, you really don't need to cut out clips. just show it as it is without over editing.

It seems it's better to try Gatsby official tutorial.

Ivan Eusebio
Ivan Eusebio
~ 6 years ago

yes, HK totally agree with you, however, I just followed the getting started in gatsbyjs.org and then move to this videos, nevertheless, I am having issues trying to pass path as argument to a graphql query, reading the doc from gatsby, I needed to pass the path in context in createPage, with all due respect, but paying a pro account for this, it is not worthy,

Felipe Segall
Felipe Segall
~ 6 years ago

Hi! I faced the same problem with the path. I had to put an absolute path in the gatsby-config.js to start the server. The path: ${__dirname}/src didn't work for me.

Then I got stuck with the following error message in lesson 5:

⠂ createPagesYour site's "gatsby-node.js" must set the page path when creating a page

{ path: null, component: '</my absolue path/my-blog/>'}

Thanks!