Building a blazing fast website with GatsbyJS and Contentful #1

Building a blazing fast website with GatsbyJS and Contentful #1


Hi, my name is Khaled and in this video We’ll take a basic Gatsby example and turn it into a Content full powered website. Let’s get started Here we have the Gatsby documentation website, and it’s telling us to install first The Gatsby CLI, so let’s do that Once that’s done it’s telling us to create a new site, which is using Gatsby and then new Gatsby site So we hit enter It’s installing all the packages now Okay the installation is done. Let’s CD to the directory And Start gatsby develop, or there’s always This npm script so we can do NPM run develop Now it’s building all the stuff And once it’s done it will give us the link to our website. If you go here this is a very basic Gatsby website and with navigation Now let’s install the gatsby-source-contentful plugin to be able to pull the data from content volume so we Close our server Then we do npm install and then we need to save the gatsby-source-content for plugin. Hit Enter [Installing….] Once that’s done. We need to add our Contentful credential into the Gatsby config So we go to our gatsby-config.js And as you can see here it only has one plugin So we need to expand this And then in here our Plugin will be defined as an object because it accepts some configuration option so first will be Resolved and then here we need to type the name of the plug-in which is gatsby-source-contentful and in here We need to pass in options and basically the options are two things One is the space ID? Which we will get in a minute, and then we have the access Token which is the deliberate access token that you need to do in there so let get let’s guess these credentials So I go to app but content for the and then in here I select my space I already have two predefined articles that I created but I need to go to the APIs tab and then in here I just add a new key and then call it gatsby-website , but here I’m not gonna do this because I already defined my key So I go here first I get my space ID And now need to get my token And we should be set Okay, so now We need to write some Gatsby a specific code to be able to create a page for each blog post To tell gatsby that we need to create some pages dynamically we need to export a function called `createPages` So we do exports createPages And here we get an object as a configuration We are interested in the GraphQL function and then the boundActionCreator So this will be a function In here first thing we need to get the createPage function From the boundActionCreators This will be used to map a path to an actual react component And also we will need To return a promise since this is a promise based API you can also use the callback, but that’s… You can check that in the documentation So here our new promise will have the resolve and reject as usual Now we need to get the path to our block force template that we will define later so for now. We’ll assume that It will be inside the assessee & templates folder, so we call it blue post template and then here we’ll use the path of resolve and then SRC templates blog-post.js And here of course we need to define the path It’s basically mainly important Okay, so here, we need to call the result function And instead of a lot function we will have the graphical function that will accept our query and our query basically will be All content follow Block and then here the limit be 100 can Make it up to 1000 And inside of these all block content whole will have edges and inside of edges will have node and in there We’ll have access to all our fields so that defined in content for like Slug ID and so on we’re only interested in the ID and slug in here The rest of the data we can pull it on later So you might be wondering why this is called all contentful block where this name is coming from so if you go to your website to the Content lab excuse me and then go to your content module. You can see here. Is there’s a blood content type And there’s also author Kannan type What the Gatsby source content plugin is doing is? actually getting all your entries and They group them it group them based on the condom. Type so here basically we are asking the Gatsby to give us all the entries that are based on this common. Type which is blog So think of it as all content hole, and then here is your content type You’re gonna type ID basically Okay So here we change this back to blog so in here The scrap function returns a promise so we need to resolve that and then it will give us the result And the result will contain an error if something wrong is with the Query, so we should check for the errors Result dot earth Here we just simply reject And we passing the earth so we can see them in the console otherwise we can just create the pages based on the data, so Inside of result there will be a data object and inside of the data object you will need to follow this Through so here will be all content whole block or all content whole whatever the content type you looking for and then in there it will be there will be edges and Edges basically are like all the objects that contains our data, so we need to look through them so we need to do for each and Then here we get for each edge We need to create a page So here we call our create page that we got from the bondage grade and the create page will accept an object sorry so first we need to specify the path for that and The path for that will be edge Dot node and then slug so the slug is the unique string that Defines the path for our blog posts And also we need to map that to a component In here we just need to provide the path of the component to Gatsby which is here the blog post Don’t late Ya later spelling mistake in there yeah, not spell it and also you can passing some data to the component through the context, and this is actually will be useful later when you Want to use queries graphical queries inside of that template component so here We are interested in the slab so we pass in just a slag Because we’ll use it inside that object to get the data related to this blog post So it will be edge don’t know dot slack Just need to return here And we hit save We need to create our blog post template So we go to SRC and then we add a new folder called templates and side of it We create the file called the blog post yes and then if we go here, this is our template component and then here I Need to define my component and here we will call it blog post Component we don’t need these styles And we don’t need the Khan sector And don’t need all of that And that’s clear these completing step, okay, so This is a clean component First we need to add the prop type to our component so here Types equal to We’ll get a data. We will see where this is coming from later, and this will be a type Taught object, what is required? And also here we need to have a query specific to this template and To tell you guys about it we need to export a variable called page Query this will be the template string with a tag grab QL and Then here we do query block post coolie So this is basically just as defining this function Name, it could be anything so This will accept a slab of type string And Once we get the slag Which we’ve been passing it through the context and the Gaspee nodejs We call content well Block so content will block. This is the sink So alternative block is the collection and this is just Just getting one Entry based on this one based on some filtering. We’ll be doing and We’ll pass the slack and it should equal To the slack our slide And in here what will be getting is titled and Slack for now So after we get this data We need to Fill in the render function here, so We can for now just have some tip and side of the tail We display simply for now the title so maybe you can wrap this in an h1 And then we hit save you And for the title we will be getting it from The props so title is actually coming from this dot props dot theta dot content roll Blob And then it’s a So if everything is fine now we should be able to run this And test our Website Just building And it failed you probably were screaming at me because you forgot this new promise in The beginning when we were creating the Gatsby no, Jess so I added that and our website should build why not now We do npm run develop you And everything’s fine yeah now the website it looks the same, but we actually created pages and the test this we Can trigger the 404? Page of Gatsby basically by just go to the horrorcore or Adding any random ID and the good thing in developed mode when you trigger the 404 by a Gatsby would show you this page and will tell you all the pages that was created and as you can see here We’ve actually created our pages so if you go here This is one of the blog posts title and here again Even if you go back to content one and we’ll check our content these are the titles so for example like do you know hacks and It’s here, and then we can check. Also the slag, which is matches this slide So so that’s great, but we need to List have a list of all the articles on the index page which is very easy We just need to change the index J. S So if we go to our source pages this index J. S Let’s remove all of this That we don’t need and then do if I say you can see that reflecting here because now we don’t have anything and Then we need to define Another component in here as a function. We call it a blog post We’ll see why for a moment in a moment And then the blog post will get Prompt sensitive crops that will be an odd object, and then here we simply return the GSS that we need and to be just an item inside of a list so and I and Then here we just do blink this is a special special link object coming from Gatsby so it knows which One you knows how to map links to component so it’s route, so we tell it to go to Node slack And then here for the text it will be node, or title And then we’ll close the link here And then for our index page We get data inside of the props and then inside of the tip instead of the tip so We’ll have a ul And then In here what we’re gonna. Do is we do data, but all content whole Blog dot Edges so it’s similar. What we did in the Gatsby note. Yes, and then we map all that data To a component Which is basically the blog post? Component, and then we passing the node So it will be edge dot note and then we need just to close this Yeah, that’s it one more thing We need to have a query for this page to fill in The data so again we export the page query Which would be a template string The diagraph card and then here again same thing query h query And the page query will be all Content whole blog because here we actually want the collection and not a single Entity and then here we do a filter if it’ll be an object And Inside the filter we need to have the node Look al I’ll explain a bit. Why we need that and Then here the locate will be English us So why this node looking? Thing is that tenth of all the Seuss plugin for contentful and Gatsby its uses a better sync endpoint and all the data is coming in the form of locale, and then you get the field and Here by default my website has only one Okay, which is link is us, but you can make this super dynamic and maybe get the German one and and so on But for default there’s always the English us or the default Locale space if you go to space settings and locates you can see this is the default okay it might be different for you but mainly But for me, I use English us so that’s why I put in here English us Okay what we want to get from there we have hedges Is always inside of the edges? There’s the node and? We need to get the title of the blog post and the slug so we hit save and Go back to our website And you can see here. We have the list of all the blog posts And here I go, but you have everything That’s how easy to build a website using Gatsby and content hood But there’s some pieces missing like parsing my town and make it a real progressive web app We’ll see that in the next video make sure to subscribe

21 comments

  • Great video, very helpful and explanatory, as well as showing how to display markdown data from contentful it would be useful if you could show some examples of a multi line text field such as an address which is not markdown and also other data types from contentful and how these fields are displayed through gatsby, another item which I have not seen covered is how to page through a list of say 20 blog posts when only five is displayed on one page at a time.

  • https://www.gatsbyjs.org/docs/awesome-gatsby/ Your video is referenced here

  • Nice vid! Quick question, how would the graphql query look like to pull in the content of the post in addition to the title and slug?

  • Excellent work

  • `rcc` ->> boom, stateful component boilerplate. What plugin was that?

  • أبو عائشة الشامي

    subscribing …… keep it up KHALDONI

  • Very cool, learned a lot from your vid 🙂

  • Thanks for the video, I have some issues getting data from contentful. For my index.js, I get an error saying that gatsby-node returns an error cannot read property 'allContentfulBlog' of undefined, so it means data does not exist. I have 1 content model named Blog and 2 entries under it so there should be data existing and the terminal says that i have fetched 1 content type and 2 entries.
    GraphQLError: Cannot query field "slug" on type "ContentfulBlog".
    Fetching default locale
    ⠂ source and transform nodesdefault local is : en-US
    ⢀ source and transform nodescontentTypes fetched 1
    Updated entries 2
    Deleted entries 0
    Updated assets 0
    Deleted assets 0

    Any idea how to fix this? Because my gatsby-node.js is similar to yours and I cant figure it out

  • Very helpful. Your video forced to me to consider Contentful for the content data modeling purpose.

  • my terminal is giving me an error saying " TypeError: Cannot read property 'allContentfulBlog' of undefined "

    I tried to figure out the problem, but I couldn't. What do you think is the problem here? I have content model named Blog in contentful as well.

  • Very helpful, thank you for this video!

  • Nice tutorial, can't wait to implement

  • Hi Khaled, thank you for this amazing tutorial! It was very easy to follow along, though I did have some hangups due to how my Contentful content model was set up. Something that might be useful in the notes is to have your Contentful data model so it's easy to replicate in our own Contentful spaces as we follow along. Just a thought, thanks again for taking the time to teach us Contentful & GatsbyJS.

  • Thanks for sharing.

    Tip: put your microphone on a sponge… or something to absorb the small shocks from your keyboard which transfer through the table. (Every key press produces a low rumble in your mic.)

  • Khaled, great work here and I totally enjoyed meeting you at JAMstack_conf.

  • Khaled, thanks for making this!

  • Hey, did you create the slug? was that an automated option? I have only managed to create it when adding it myself. Can you reply and explain that bit please?

  • Thanks a lot for this video Khaled. It was informative and easy to follow. I'm amazed by the ease of use of Contentful and Gatsby.

  • Michael Corleone

    good one

  • This video is awesome! But as a heads up, most of the code you write is hidden from the viewer when they hit pause or try to watch it in full screen mode because the caption at the top of the page with the user icon is covering it. So, its really difficult to see the very code it is that is the reason for watching the video. Maybe see if you can get the title bar to go somewhere else or next time, leave a little room at the top of your page where that title will go. Since your editor is maximized to the top, it is very frustrating to watch. But. great information overall!

  • so it's been almost 2 years. I'm wondering if this still applicable in all the ways to set up both?

Leave a Reply

Your email address will not be published. Required fields are marked *