Build a knowledge base with Gatsby, Contentful and AWS

Rate this content
Bookmark

In this workshop, we will go over how to build a knowledge base using Gatsby, a static site generator Framework that uses React and graphQL, Contentful, a Headless CMS to drive the content and deploy it to AWS S3.

This workshop has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

A knowledge base is a self-service online library where data and information are centralized to help team members or customers. It's chosen over a normal blog or news website because it allows users to find answers quickly without needing to ask repetitive questions, thus streamlining information dissemination and support.

The workshop utilizes Gatsby, Contentful, and AWS to build a knowledge base. Gatsby is used for static site generation, Contentful acts as the content management system, and AWS is used for hosting and deploying the application.

Static site generators pre-render pages at build time, which means all pages are generated before they are requested by the user. This approach speeds up load times, improves SEO, and enhances security by serving pre-built HTML files rather than relying on server-side processing at runtime.

Contentful provides content as an API, which Gatsby can pull into its GraphQL data layer during the build process. This integration allows developers to query content dynamically from Contentful and render it using Gatsby, benefiting from fast performance and enhanced developer experience.

AWS is used for hosting and deploying the knowledge base created during the workshop. It provides the infrastructure necessary to ensure that the web application is accessible online and can handle user requests efficiently.

Server-side rendering generates the full HTML content on the server before sending it to the client, ensuring that the page is ready to be rendered when it arrives. Client-side rendering, however, sends a minimal HTML document with JavaScript that renders the content in the browser, which can delay content visibility until scripts are loaded and executed.

Using Gatsby with Contentful combines the benefits of static site generation with a powerful headless CMS. Gatsby pre-builds pages using content fetched from Contentful, resulting in fast load times and improved SEO. Contentful's API allows for easy content updates without redeploying the whole site.

Webhooks in Contentful can trigger automated actions like deployments when content changes. This feature allows developers to automate their workflow by connecting Contentful to other services, like AWS, to automatically update the live site whenever content is updated in the CMS.

Abdelrhman Adel
Abdelrhman Adel
152 min
04 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Workshop focuses on building a knowledge base using Gatsby, Contentful, and AWS. It covers the basics of Gatsby, including static site generation and routing. The Workshop also introduces Gatsby Content Mesh, which provides a GraphQL layer for adding various data sources. It then demonstrates how to integrate Contentful, a Headless CMS, with Gatsby using the Gatsby-Source-Contentful plugin. The Workshop concludes with deploying the app to AWS Amplify and setting up webhooks for automatic redeployment.

1. Introduction to Workshop

Short description:

Hello to building a knowledge base using Gatsby, Contentful, and AWS Workshop. My name is Abderrahman Aedel. I'm a solution architect at Rangle. Today we are going to build a knowledge base using Gatsby, Contentful, and AWS.

So, hello to building a knowledge base using Gatsby, Contentful, and AWS Workshop. My name is Abderrahman Aedel. I'm a solution architect at Rangle. And I will be guiding you today to this workshop.

So, at Rangle we make things that matter. We believe in doing the right thing, the right way, and then improving it. We have been in Toronto and Amsterdam. For more than nine years, we founded in 2013, and we have over 150 team members. We serve a lot of clients who are building their own product creation capabilities through immersion and the enablement systems.

Today we are going to build a knowledge base using Gatsby, Contentful, and AWS. So, this is a table of contents of what we are going to do. So, since most of what we are going to do is like live coding, so I'm gonna try to go over these super fast at first, and then we can just jump into the code.

2. Introduction to Knowledge Base and Gatsby

Short description:

A knowledge base is a self-service online library where you put all the data and your knowledge dump, everything you have, either to help team members or customers. Today, we are going to build a homepage, a categories page, and a page for every category and for every category we'll have a bunch of articles. Websites can be rendered through server-side rendering or client-side rendering. A new concept called static site generators came out, which take all the queries and fetch them ahead of time, generating actual HTML pages and building them on the server. Gatsby is a modern site generator that supports most modern requirements and is built over React. We will show you how easy it is to build something with Gatsby and how fast it is to migrate from something static to something dynamic using Contentful.

So first let's know what's the knowledge base and why are we picking a knowledge base instead of a normal blog or a news website or something like this. So, a knowledge base is a self-service online library. It's a place where you put all the data and your knowledge dump, everything you have, either to help team members or customers.

So for example, if you are a company and you want to have some place where the new employee will jump in when they join and understand how the onboarding works, how the communication works or something like this, you can have a knowledge base in place. If you are a company that's providing service for customers and you want to document everything you want in some place, instead of having everyone having a question asking the customer service, you can just create a knowledge base or like a help center or a place where you double click on a page and you can put all the FAQs and articles and you can put them into categories and stuff like this or troubleshooting guides. And yeah, the customer or the team members would just join, jump in, find the right answer to the question instead of bothering you with multiple questions.

Today, we are going to build a homepage, a categories page, and a page for every category and for every category we'll have a bunch of articles that will have also a page of rich.

So first, let's talk about how websites are rendered, because the concept of static site generators are very new, or not new, but like a lot of people don't know how static site generators work. So let's go from the start. How do websites get rendered? At first, when the internet came out, there was only one way to render websites, so it was called server-side rendering. Well, there was no name because it was just the only way to do it, where you have a server and the client and the client or the user type the URL into the browser and then send an HTTP request to a server, which does the magic, generates a whole HTML page with everything you would need, and then get, like, pass it back to the browser where the browser would paste the HTML and render it in the browser.

And then every time you want to switch to another page, like you want to route, if you are in a home and you want to go to help or something, you would click on an a-link, on a-tag, that would send another HTTP request, get the whole HTML from the server and then replace everything with this new HTTP. The server uses templates to dynamically generate full HTML pages. So you have, for example, a PHP website where you send, if you send like a GET request to this page, it will be handled and then it will put all the variables or the actual data into an HTML template and then send it back to the browser.

And after a while, a new concept came out called client-side rendering. It came out usually with single-page applications or like with the generation of sending API requests. So you still have a client and the server and then you send the first API call to the server and then you get an empty HTML page with a bunch of JavaScript scripts attached to it and then the client or the browser would take it and give the JavaScript control to fetch everything you need from the server with API requests and then directly manipulate the DOM or the HTML in the page. So instead of having everything sent back like before, now you get a very placeholder HTML page that doesn't have anything meaningful, just a bunch of scripts and then these scripts take over and generate the actual HTML.

So as you see here, the client renders the empty page and JavaScript renders the content later. And if you're looking into this in some aspects like render time, the render time here is inconsistent because the client is actually the one doing the real job while with multiple clients there are multiple performance, like if you have a high-end PC it's different than having a very low-end mobile phone. And for SEO, search engine optimization, it was very bad when it came out because the crawlers before this uh like the search engine crawler and the crawlers are like a bunch of scripts that search engine used to crawl the web and archive their data so that when you search for something you would have everything there.

So the crawler would go into a link and get an empty HTML page and find no meaningful content in it and then this way you get an empty page that doesn't get archived or it would be very bad for SEO ranking for it. After a while a lot of crawlers or a lot of search engines adapted but it wasn't this fast and it wasn't like working 100 until recently I guess. the build time was super fast and caching was happening only on the client side because yeah like you don't you get only you get you get every time you get the same page so there's no caching that can happen but the client was caching the API requests on the client it depends on how you configure it of course but like normally it would cache it but it wouldn't thing and to fix this issue with the SEO mainly a new concept came out which is a mix from the first thing which is server-side rendering and the second thing clients client-side rendering so for single page applications every time you send the first API call sorry the first HTTP request instead of having a very empty HTML page sent to you you would have like that server would do the first render like it's happening on the client and then send you the full HTML page where the client would render it and then happen something called rehydrate where you will you will rehydrate the state and work as a normal single-page application.

So JavaScript would still take over but this way if a search engine crawler comes into a page like this you would get everything it needs from the first different thing. Some aspects of this is the render time was slow of course slower because the server would still generate the HTML or like render the first render on the runtime but this fixed the issue because the crawler would get the full HTML page. The build time was fast because you were yeah still the same as the other one at the client-side rendering and the caching you could do at this stage using a third party like Cloudflare and some frameworks added it later but it wasn't it's not there out of the box. And this was fine until a content-driven website were like very famous.

So what's a content-driven website? A content driven website is any website that is mostly like the most main object of it is to deliver content instead of like having a lot of tasks tasks in it. So not a dashboard or like not a social media app, not a web app, but some website that it's like it has a lot of content that's mainly like text rich text assets like images and stuff like this, like a blog and news website, a company website, marketing websites, or a knowledge base. And when the content-driven websites had the static site generators, came out.

So what's a static site generator? So we still have a client and a server. But there is something happening on the server, even before you ask for the call. You asked for the HTTP request. So what happened is that you do everything as a normal single-page application, but instead of fetching the data and rendering on the runtime, you do it on the build time. So the server-side generator, the static site generator, would take all the queries that you have and fetch them ahead of time, and generate actual HTML pages and build them on the server. So that every time you want to have an API call, sorry, an HTTP request, you would send the HTTP request to the server and server would give you that prerendered HTML page ready for you to go. And then the whole operation continues like normally, the server-side rendering. So the app would still get rehydrated and the single page application takes over. It doesn't only generate these, but it also takes care of routing, so you would be generating a bunch of JSON files that have the data for other pages. So instead of sending multiple API calls to get also the content for the other pages, you would just fetch this JSON, put it on the template, and here you go. You have the other page ready, even after the single page application starts working.

So for aspects here, render time is faster, because there is more render. Like most of the job is already done in the build time. ICO is super good because crawlers can now... Can now fetch the data faster than ever. The build time is lower, of course, because you are doing a lot of stuff and you also take more space. But if you're talking about a bunch of HTML pages, it doesn't really look like a space. And caching, of course, is supported, because the HTML pages are there, and also most of the frameworks support caching out of the box.

So, to summarize this, the client side rendering, the render time is inconsistent, ICO is bad, build time is fast, and caching will happen only on the client side, the server side rendering, render time is slow, ICO is good, build time is fast and caching you can do through a third party, like partially supported. Static site generator would have faster render time, a good ICO, a slow build time, and supported caching out of the box.

But the limitation here for static site generator would be you have to have a static site to use a static site generator, you know? It's literally in the name. So you cannot do this for a dashboard, you cannot do this for an app that has a lot of stuff that are very different like, for example, a username or a user data. You can't use this for like a profile page for all the users because you cannot generate pages for sensitive information, you know? But you can do it for a news, for a news website, for a blog website, or, yeah, in our case here, knowledge base.

And that takes us to Gatsby. Gatsby calls itself a modern site generator, not just a static site generator because they have adapted to most of the modern requirements and they can offer you everything, mostly everything you need when related to normal websites. And the very nice thing about it is that it supports most of, well, like, yeah, almost everything out of the box. It's built over React. So if you have a knowledge with React, like even familiar with React, then learning curve is very shallow for you and you can easily, like, yeah, in a couple of days you can get something working with Gatsby. It's very easy. It didn't take me a lot of time to to work with it. So it should be super easy.

And let me make something here super clear that what I'm trying to to accomplish today is that not just not show of that Gatsby or like this kind of scales, but I want to show you how easy it is to build something. And later, when we we use Contentful, I want to also show how easy and fast it is to migrate from something that's very static to something that's super dynamic. And also with the deployment, it should be easy and straightforward for you.

So that takes us to the end of the theoretical part. And now we should jump into the code. So before, before we get into this, so we have a Q&A panel that you can find in Zoom where you can ask questions that only the panelists would find and then we can answer them later, or you can just drop your question in the chat. We also have with us Matt Van Voorst, we are very happy to have him here, he's a software engineer from Contentful and he will be happy to share with us or answer any questions related to Contentful. So, yeah, that's it, let's jump right in.

QnA

Watch more workshops on topic

Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL for React Developers
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
Roy Derks
Roy Derks
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
Relational Database Modeling for GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
Adron Hall
Adron Hall
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Power Fixing React Performance Woes
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
Watch video: Power Fixing React Performance Woes
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.