Dynamically Generate Gatsby v1 Blog Posts by Path
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 it seems to be here https://github.com/eggheadio-projects/gatsby-demo-blog-code/blob/master/src/templates/blog-post.js#L55
Just a note, but the blog posts don't display in date order - which should probably be a primary concern of a blog..
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 - 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.
@Justin
Glad you got it going! We'll get a note added to the repo later today.
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.
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,
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!
The default export is missign on the
templates/blog-post.jsin the soruce code. I tried to open an issue on the repo but it's disabled.