Dynamically Generate Gatsby v1 Blog Posts by Path

Taylor Bell
InstructorTaylor Bell

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 4 years ago

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.

Instructor: [00:00] We've created a blog post template and now when we click one of these, we get a 404 page because our page has not actually been built yet. In order to build our pages, we're going to use Gatsby's createPages Note API.

[00:11] Back in the root of the project, we're going to do a new file called gatsby-node.js. Since we need to access our local file system we'll require path. Gatsby processes every export from gatsby-node.js, so we'll write an export that takes advantage of the createPage action from the bound action creators and GraphQL. We'll pull out createPage from the bound action creators and we'll bring in our blog post template.

[00:36] The createPages export returns a promise that we'll start with our GraphQL query. Our query starts with allMarkdownRemark. Each node or post will have its generated HTML and ID and front matter keys matching what we have at the top of our markdown posts. After the query we'll add a dot then to actually process the results.

[00:54] If there's errors we'll reject the promise. To make this more clear we'll make a posts variable from our allMarkdownRemark edges. For each post we'll pull out the node and use that to call createPage. The path'll be the path to the blog post and the component will be the blog post template.

[01:09] Speaking of which, in the blog post template, title and date come from front matter. Now we'll restart Gatsby Develop, reload the page, and there's our posts.

Luis Toubes
Luis Toubes
~ 5 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 Bellinstructor
~ 5 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
~ 5 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 Bellinstructor
~ 5 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
~ 5 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 Bellinstructor
~ 5 years ago

@Justin

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

HK
HK
~ 4 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
~ 4 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
~ 4 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!