Building a personal blog with Gatsby.js | Kalin Chernev | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Building a personal blog with Gatsby.js

teacher avatar Kalin Chernev, All About The Web

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

14 Lessons (1h 14m)
    • 1. Introduction

      2:30
    • 2. Installing prerequisites

      3:19
    • 3. My first page

      5:52
    • 4. Deploying Gatsby.js

      6:29
    • 5. Organising global styles by adding our first plugin

      4:00
    • 6. Using a theme

      4:54
    • 7. Using CSS modules

      5:33
    • 8. First GraphQL query

      7:23
    • 9. Using a new data source and making a GraphQL query for it

      9:56
    • 10. Creating content programatically - part 1 - adding custom fields

      6:12
    • 11. Creating content programatically - part 2 - creating pages

      7:53
    • 12. Creating content programatically - part 3 - using variables in GraphQL

      6:13
    • 13. Refactoring a promise to async/await

      0:41
    • 14. Additional resources and farewell :)

      3:30
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

153

Students

--

Project

About This Class

In this course, you will learn how to create a modern and highly efficient personal website with one the most innovative static site generators: Gatsby.js.

Learning Gatsby.js is both fun and rewarding, because it makes site building a great experience by letting you prototype your design ideas quickly and also letting you effectively plug in various data sources with ease.

Being able to build sites with Gatsby.js means being able to deliver highly performant and secure web applications which require less maintenance costs and follow the best practices of the JAMstack.

In this class, you will be able to hone in the following skills:

  • React.js: creating components which render parts of your web page
  • GraphQL: querying data from various sources
  • Node.js: creating configurations and content for your website
  • Adding continuous deployment of your project

In the end of the course, you will have your own personal blog which works fast, costs nothing to host and takes little to maintain.

The course will be useful for web developers who already know the basics of HTML, CSS and JavaScript. If you are a web developer who already have experience in building sites with a server-side programming language, then this course will open your eyes on how to achieve results with reduced costs. On the other hand, if you are more into design and CSS, then you will get equipped with a new tool for effective prototyping which lets you focus on the job at hand.

In general, prior knowledge of JavaScript would suffice, although if the language is not your tool of everyday, you will still be able to follow along as concepts are not too complex and each lesson will give you the necessary additional information to match the problem to solve at hand.

Meet Your Teacher

Teacher Profile Image

Kalin Chernev

All About The Web

Teacher

Hey there!

Many many years ago, when still at university, I was part of a student organisation which spreads across hundreds of universities and unites thousands of students of engineering in Europe. Back then, I was responsible for fund raising and I started building websites in order to create value for sponsors.
My first project in production was a career/jobs website for engineering students.

That's how my journey into web development started.

In the following decade or so, I spent thousands of hours building all sorts of websites and thus solving a variety of problems with performance, design and theming, etc - basically anything you can imagine.
I was the first person to deliver open public trainings on Drupal CMS in Bulgaria and I ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hi, My name is Colin Check and Time, a Web developer. I have dedicated many years of my professional life into building big websites, and I know that when we speak about big websites and big projects in general, we all share a common billions, like security or Foreman's keeping the project. Dana bow the cost and so on and so on. And from my personal experience, I know that in order to solve the complex problems of big projects, we have to divide them into smaller pieces and select the writer for the right job. So, for example, when we speak about user interfaces, we're going to use reactions because it makes Do you want more compostable, more mundane? Bo. The concepts behind it are very easy to work, and there are many tools. Some timeto help you with that. When Facebook released graphic you well in combination of reactor. Yes, because they share a common philosophy of being declarative. Many people really loved it because it gives you means to select the information that you need nothing more and nothing less combined. These two doors and you can already start using God's B. J s God's, which yes, is a start excite generator that takes many of the good concepts of building single page applications without giving you the drawbacks of the single page applications. For example, when you build your project, you still have the assets optimized for a progressive Web and very accessible. For since search engines, I have prepared discourse about God's BGS, mainly because I have many friends that are Web developers, and they share with me that building websites nowadays has become very complex task. And I believe that building websites with God suggests, could be still very real rewarding and very fun for these. I have also prepared the homework. You will be building your own personal work, which I agree is a very simple task. Puts deal. It's very small and usable. Step in object for you toe weren't the right concepts and then taken into your bigger project. So use this opportunity to sign for my course. Weren't about Godfrey GS and the modern tools that it provides to you enoughto improve work those that you have for building better and faster websites enjoy 2. Installing prerequisites: Hello, folks. In this session, we're going to install Nog s thesis The only requirement that you need to have on your computer negative to work with the system. Onda also going to say a few words about the editor that I'm going to use. So let's get started. I'm on the landing page of the project called No. G s. This is the only software that you need to have from your operating system in order to work with God's Virginia's. In my case, I don't use the installation from the website itself because I'm using this moto coat. No diversion manager. Why I am using it. I'm using it because when I have different projects, they might require different versions of no Gs with this utility. I'm going to have different folders for the different versions, and I will be able to use the specific version of note in the specific project. It's similar toe a ruby version manager and others like that. The installation is very simple. Just follow. This script is going to put everything in place after that. You just update this fire about your terminal in order to be able to just type envy n and see the common line utility working for you Receipt in my common line, amusing writer and I have see show. So having it already installed on writing envy, Um, I have the comments available for me. Let's imagine that I want to install version then of No GS I need to do is to really the comment. The end things, though. This will be snow version 10 of cogs. Okay, As you see, it's saying that now it's using note version 10. How you can see that it's with this flag. Does that V if you want to go back in version eight? Because that's what we're going to use the so called work term support. That's the stable version of note I'm going to do in the end it and that's all about it. About the editor I'm using Atom. You can use whatever Editori is convenient for you. Of course, for me, that's simple enough. I have some leggings already configured is convenient for me. I feel productive. You see some of the features that I have configured on the go. The only thing that I'm going to saying this tutorial is that if you want to have the same configuration, says me. You can just go to my just in get happened. Follow the the so called configurations for the model thing settings, and you're going to have the same modules with the same configuration, etcetera. And then that's all you have to do in order to be able to work on the project with God's BGs Siri next tutorial. 3. My first page: Hello, everyone. In this story, we're going to install gods BGs and have our first landing page. It will be extremely easy. So I will allow myself to explain a few things around the main topics. This is the website of the system. Oh, you need to do is too obvious to go to the documentation. The first thing that is suggested to use to install God. We see a why into your global note More juice. But honestly, I don't do that. I'm going to show you how you can ah achieved the same result without installing the common line interface property. If you decide to do it, you can still do it. But But because I'm using the note version, Major and I have different versions of note for the different projects. I prefer to not have Garbo's. The first thing that we do is to copy this Gaumont right here, and we're going to paste it into our turn. You know, the only thing that I'm going to do in order to make this happen is I'm going to at N p X. In the beginning, this comment is going to accept the God become online interface is a global, but it's not going to install it. This is coming after no GS version six. If I'm not wrong, the whole process takes in time. But India and you're going to have the project downloaded already bootstrapped with everything that you need. And later I'm going to show you how you can still use the guards become and dying in their face. But from the node Modules folder that is inside of the project without missing quit your Globo's okay, When the process is finished, you have this folder Gods beside this is going to be the project for their for your walk. I'm going to rename it from God's B side, too. My look, then I'm going to go into this folder and what we have here are some example files that are not necessary for the moment. But they're still good to be there in a book for you to know that it's possible to work with him. Ah, inside of this folder, the only interesting ah set of assets is actually the source folder. I'm going to show you that from a different perspective opening my editor. Okay, so now that we have opened the project. In our editor, we can browse the files to see what is where the components are. The small pieces of, um, markup created in reactor that you're going to put in different places of your website. The layouts are the things that are the same throughout. And then pages are just static pages that, um are displayed like that without having getting especially things around them. Okay, in October to demonstrate how this looks like, I'm going to go back into the common line and I'm going to run. Yearn, run! This is going to show me the Commons that I can run in in this particular project. And innovative too. I have my first beach. Ah, and and to have an idea how the project looks like I'm going to run this comment develop. This is starting a vocal development server together with graphic. Your end point that we're going to have in the in the territory above the data or you need to do is to click on this link and open it in your brother. And there you go. That's your website that you can start with. They're just a small navigation and that's it. another interesting thing that I would like to show you in addition to that. Imagine that I have my website on the on the right and I have my editor on the left when the server is continuous listening to take two changes. If you decide to, for example, change something kingdom in the lending page here you can open it like that and just at the new paragraph, defuse What more do reload loose paragraph. And when you because the paragraph and when you save it, you see that on the right things air actually changing even without the the whole website being preloaded. This is giving you great momentum to to develop faster and actually see the changes without spending too much time going into reloading the website and so on. It's actually very special think especially if you're coming from the background of react Js development. You really appreciate that and we that you already have very, very successful for your website that you can start creating content you can a little bit modified the header already and so on. Thank you. If you have any questions, let me know 4. Deploying Gatsby.js: Hi, folks. In this tutorial, we're going to make something very cool. We're going to deploy our website on Netley five because one of the 3rd 1st things that bring really good gratification is, um, looking at your website being online. Okay, In order to do that first, we're going to create a new repository on get help. It's very simple not going to go into details. We feel in the name of the block with nothing else. Probably you've done that hundreds of times before. Sees the repository is already created. We're going to take only this common because I know all of the rest by heart. Probably. You do too. Let's see, there is nothing here going to create a new records it tree. I'm going to check if everything looks correct. It does. So I'm going to put everything in place. Nothing. Nothing wrong. Then I'm going to actually commit that like that. I'm going to use the comment that I took from the from the documentation we did. No, we're going to push the worker changes to this repository. Okay, One of the changes are on. Get hope we can verify that. Just reloading this page everything is correct, and then we're going to go into the service that is going to take these files. Butte ODS. It's for us and deport on D Internet. In previous sessions I mentioned next. If I as the go to company for following everything related to the jams stock, they have provided many services related to deporting websites in a very good way. And there really so many useful things around that it's ah, it's It's really a video by itself to keep it simple. I'm just going to walk in. We'd get help in my case, take seconds. Then I'm going to create a new project. I'm going to select get who possess source because obviously I created the project. Ah, a few seconds ago. My, my Look, there we go. The service is extremely smart. It will assume the correct defaults if you haven't changed. The settings compared to the default installation of God's be everything is really good to go. If you need more information about this, either read the documentation of little If I or go to my book. I have written several articles about it. The whole process will take some seconds if you want to follow the progress just going to the council. Normally, everything that you would do to build a website woke early. We will be done by the boat off notify. So they're the optimization of CSS JavaScript, etcetera. And when it's done, it's going toe, Uh, give you the euro of the website or right. After some time, I have the message that the site is life. Just click on this link to see the website and Terry ago. The website is online, so it's ready to be shared with your friends, your colleagues or customers the services providing you dis for free. I'm going to show you something really cool. Imagine that we want to deploy a change because we use identify everything is handled for us. So I'm going to show you how when you push a change into the get up repository, identify who listens to these changes is going to pull the latest coat and before everything automatically for us. Um, I'm going to make that really quickly because it the change that I'm going to do is really small. So you remember the the line of code that I had it in my previous um sessions. I just don't need it anymore. There you go. I'm adding to change. So this is not the first commit anymore, but a small change. And I'm going to get Bush. This is going to the Git Hope repository. As I mentioned, you can verify that although it's not really necessary. See, the change is already here and at the same time, when you go to notify and the project you see the service already takes the latest coat and is going to before the changes for you. So imagine that this will take another minute or so. The site is life and if I refresh here, there you go. The changes already applied. So the moral of the story is that you don't have to focus too much into the infrastructure creating your scripts or selecting the hosting for your website. Everything is very simple. Ah, If you really like what you see, just go and say thanks to notify on Twitter. That's it from me. Go and share your website and see you in the next section. 5. Organising global styles by adding our first plugin: Hello, everyone. In this tutorial, we're going to start changing the styles of our website and this is the first step. I'm going to make a small change off our global styles as ah, cricket. Requisite to dis tutorial. I'm having this website from previous sessions. Comes from the default Godfrey starter. I've already started the Wolkoff server here, and I have opened a project in my editor. Okay, so what I'm going to do, I'm going to remove the global styles from my current set up and I'm going to change it with typography J s. And I'm going to explain why just in a second. But first, let's remove the default styles that comes from the different from the gods. Be starter. In order to do that, I'm going to go into the file of the layouts. It this file imports the index e Asus just as it is. This file contains the normal CIA says that you're used to see um in any ah Web projects the usual way. However, because the view layer of God's BJ guesses based on react Js uh, there are many better ways to do that. And there's the first step The topography Js is going to inject the global start ups in our components, um, so that we actually have access to the styling with JavaScript. I don't need this fire anymore. So what I'm going to do just going to delete this file and this file from here and when we reload the page because the work of surgery still listening to changes um, it's going to remove everything that we had so far. Ah, and I say as I mentioned, topography Js is so that we can use to inject the global styles. Okay, so here I am on the website of God's V gs with the directory of floggings available from the community. Um, what I'm going toe search for is something related to typography. This plug in will actually integrate typography Js ah, better with whole God's BGS works, I'm going to take the name of this of dis plugging because it plugging topography. I'm going to stop the server to add to this plug in and when it's ready, I'm just going to jump into the configuration file of my project. In every project, there will be guys, be conflict J s. This is the place where you configure the website. What? In my case, I'm going to first change the name of from our project to my book to be consistent with the rest of the project. And then here I'm going to take the name of the plug in that I installed and going to paste it here, saving dis changes. And three starting the server because we will use this new configuration options and we'll inject the Goebbels of typography Js into our up. And there you go. That's a very small step, but it already shows you that you can use another. The project coat typography GS in October to inject global styling into your work in the next sections were going to take this plug in as a base to modified the styling further. Thank you. 6. Using a theme: Hello, everyone. In this tutorial, we're going to continue on our journey of adding styles to our website. Previously we added the looking for typography. Js too enabled the Bobo styles and now we're going to take a theme to make use of ready styles that we can extend further. The website of typography gs will show you some examples with preview. Um when you change the theme, you will see the preview on the left. I'll select, for example, do Lincoln in October 2 out this team to my ah project. I'm going to search for the name, you know, grab a 20 to my project. I'm going to copy the name of the theme again. I'm going to go back to the common dine toe at this and when it's ready, we were going to configure that is a team to the project. How you do that First in the first directory, by informal convention, you create a new folder called Utilities Inside of Debt. You create the module name for the topography. Then inside of that, you need to imports two things. First you import the topography from D obstructed. Ah got it looking we will obstruct the biography Js So that's how you import topography gs itself. Then, um, I'm going to out the theme that downloaded going to copy it because I always have issues writing the correct name. Helene, go thing from divorce. Your name. Okay, then the more to itself that I'm going to export in a second, we'll be just, ah, according the constructor, together with the defaults of the team itself going to exported Griffey and that's it. This will actually applied the defaults of this team, Um, along to the topography gs. If you want to modify some of the sittings, that's the place where you want to do that. In the flunkies configuration, we're going to change the syntax of this particular plug in because now that we have thea configuration options in a different place, we buzzed it to the results. And then the second option that we will have his options with but to couldn't think more Jew. And then here I am going to bus the but to the fire that I created just a few seconds ago. So making change in this guy is the contact file. When we started project the next time, everything will be reviewed and the cash will be invalidated and we'll see the changes in our project. You didn't see the message that since you have modified the plug in section in the conflict fire uh, guys, bees recreating did yes, it's from scratch and no reloading the page. We see that we have applied correctly. Um, the styles that come from our Lincoln teen to our project. I went for do it Title doesn't look very good. That's normal because on top of the global styles that we just apply to their some in line styles that are coming by the default got to be starter. What we can do about it is to actually go into the header component which contains the seem line styles and actually ah, recreate thes in the better way. However, because it's yet another ah approach by which we can apply styles to our project, I would suggest that you follow me along to the next section. Thanks 7. Using CSS modules: Hello, everyone and the previous tutorial. Real State Book Refugee Yes, to a place on global stars on our website. Now we're going to touch upon another topic about CSS modules that will help us to style specific components in a better way. For example, in our case, the logo of the book is not looking very well. So what we can do is to first inspect to see what is the problem. We see the door assuming lifestyles that are applied directly to the HD and no, and most probably, we confined this by going around the place where this streak comes from. Opening the editor. We see that this is coming from our header component. This is coming by the way, by the default gods be starter. So if you have started with same starter, that's going to be the same place for you as well. Okay, What we can do is the first smaller free for small step of free. Factoring is to take this Jason object from the in line styles and to put it in another CSS file that is going to be used later on this file. Weaken name just styles without more ado dot CSS This is the native way for you to communicate to God's VG s that you want to use the assess more juice creating this file and based in the rules that we took from the reactor template. Now we need to re factor that in order to comply to the CSS Rose, for example, we can put the glass name here called Header and instead of using these were used the opportunity to put our preferred way for the background. Let's imagine that we want toe make it blue And since we were on the same line, we can remove the coma. We have to rename this Ruto margin bottom Also, this could be written in this way and also change the comma Too cynical here This is normal cirrhosis going back to the reality s template instead of having inland style room Now we have toe use the react jest way to put a class name. The class name will come from the ah last name of this uses. However, in October to use this file, we first need to import it. So we we import it with the name of styles from styles dot modu says That's all we need to do. Innovative toe import diseases, a CSS modules. And I'm going to show you what it means in just one second taking these styles and putting it here with a header and saving it. No, we can go and verify that the server has supplied our changes. It has so opening the brother. We already see that, um, the background has changed. Please notice that. No, that we're using CSS modules. The class that is injected into the HTML is going to be unique. So this is all drink a lot of problems that you would normally have with CSS. Um, and naming collision. Basically, however, I still don't like how this, um, logo looks like So what I'm going to do is to remove this style first and then I'm going to I mean that I'm going to put it also in the fire that I created for the CSS module, and I'm going to apply some specific styles on it in order to make it look like the way I would prefer each would be here. So we take this, I name it local here, something that I would like to, um but on top of this. The rules. In order to improved the visualization of this particular link, I'm going to reset the text shadow because that's, um, the problem in my case at the moment and also and going to reset the background, saving it and using this here quests name going to place it to the styles logo saving it. I see that now my logo looks better. I'm definitely not saying that the CSS that I wrote in this tutorial is the best year says that you can write us well, however, district or is not really focused on the best techniques of fighting CSS. Rather, it won't. I wanted to give you a very good idea about the benefits of using CSS more juice and how it easy it is to do that in God's VDs. So please go ahead and use the same techniques to improve the visualization of your own work. Thank you 8. First GraphQL query: Hi, everyone In this session, we're going to work with data and got V. J s. I have opened already, my God v conflict file, because the first half that we're going to take is very, very simple. I'm going to put slogan in my website and I'm going to take this Ah, drink in our template layer. Later on, we'll have another section on how to actually use the knowledge that we get from this session in October. Toe have different sources of information, but the spectacle tutorial will be very, very simple so that you get first impression how simple it is to get data into your Bages. Okay, so for the demonstration purposes, I'm going to add a new property into my site. Meta data here. I'm going to call it slogan, Let's say, learning God's B. J. S. At the moment, nothing happens because I don't have my server running yet. I'm going to do that by ah sink you're in developed, which is going toe in the background to use guns become online in their face. The interesting part here is that every single time you start the work of server there two endpoints um given to you, you know, little to work with your website. The 1st 1 we already know. It's the website that we have built so far. Nothing new here. The second link here is giving you the interface through which you're going to get information from the data layer. If you if you haven't heard about graphic euro graph, coil is not the specific language or technology. It's a concept of how you define your data requirements. If you have hurt about rest for FBI's most probably, you have already heard that grafico is innovation compared to the conventional bottles of transferring information over the wire. Ah, one of the best things about Grafico is that it gives you the means to to define exactly what you need. Nothing more and nothing less. The two that you have in front of your a screen at the moment is a to build on top off the language called graphical or a graph e que el If you don't know about graphic, you Oh, it's not a problem, because the way you are going to work with it is extremely simple. Okay, um, what I'm going to do for a very simple demonstration and deleting everything. And, as usual on opening new brackets, when you press control and space, you're going to be provided out of suggestion about the data that you can get. In our case, the information that we need to get is in website. You see that when you start making cure query there errors that tells you that you need to provide more information to the query. If, um if you want to be lazy like me, you can always press control and enter, which is going toe to put some properties in order to complete the query. For us, the information that we input here is inside metadata. So I'm pressing control again with space, and I'm going to select site meta data again. It needs some more so impressing control and enter, then automatically. It gives me title and spoken, and that's what I want to put in my, um, into my template. You see that the title and slogan are matching. That's a very, very simple demonstration. So if you're with the God of the starter like me, example query that you can start off with is in the layouts Index Js Here we have this graph G well dug that will enable you to take the query that you have here on the left side and put it into coat in this way, the result that you see here from the review is going to be bust as a property here in data in reality Esther's that's called the Prop. Fortunately for us, we already have the basic query made. So all we need to do in order to take the information that I had it in my convict fire is actually another another feud slogan. Many people in the community love this particular syntax of grafico, which is the clarity and select fueled by feud, the result of which being called Jason, that now we have in our reactor Js component. In fact, we already have the example of drilling down the information in these data attribute, So oh, I need to do innovative to pass my slogan into my header component is to say, site slogan, Let's say, is coming from data site site meta data slogan. This is going too much to the feud from this graphic. Your query. No, my Heather component will have access to this property, so I have to have also date my header component together with the site title and going to pull decide slogan having decided slogan here for demonstration purposes. I can just print it next to my sighted title saving dese changes. I already see the slogan printed out into my website. So this is really very, very simple demonstration about how graphic you end point is given for you compared to the regular way, you would normally have these graphic you. Well, it's over. Simply fight for you because you don't have to write. Resolver is to get the data that you need into your react component with this on going to leave you to experiment, creating data from this configuration file, maybe reading a bit on graphic your l and, um when you're familiar, guise yourself with simple syntax. Continue experimenting and I'll see you in the next section. Thank you 9. Using a new data source and making a GraphQL query for it: Hi. In this tutorial, we're going to continue our work related to data in God's vitreous. As you can see, data in God's VDs can come from different places. It could be existing data in your content management system, like droop. When we're press, it could be marked down files from your operating systems. You early to other static side generators. Could be data coming from 80 IES data basis. And so on. The way God VDs can know that you have new data sources is by the plugging system. There are two types of plug ins source plug ins and transform floggings source plug ins. Will DioGuardi, where the new data is and the transform Bradley Wiggins. Well, no guns be how to work with this new data. We're going to use this knowledge to put this new content that I have prepared from my own work on my landing page. The first step that I need to take in October 2 are the new data source is to use a plugging. It will be God's resource file system because the fires are on my file system. When the installation is complete, I need to update my configuration files Now that we're here in our configuration file, I'm going toe at information about the new plugging because the new plugging will have some options. I'm going to person object again and in deception I'm going to have to properties the result. That is simply the the name of the bloody and the 2nd 1 is the options. Again, the options object is going to bus two properties. One is the name of the content or the source. Let's see my my Mark don't And the second option that is actually the important one is where this files are. However, instead of fusing dis Intacs for strings, I'm going to use this Intacs. It will allow me to use variables. For example, I'll be able to see, start from distant from this current directory and go into content. This will allow me to say that my content is in this folder and later I can at new types of content here, like pages, news, etcetera. Having updated this file, you already have new information in the graphic your end point. So let's restart the server, and when the surgery is ready, let's see the graph co endpoint, starting the query again. There are going to be some new options here. One of them is this profile. Let's use our control. Enter approach, innovative it to see what's available instead of the i. D. They want to check another property. That's a name. So you see that I think this new source plugging we actually see the files that are inside of this folder. However, it's not much of a use yet. What we need to include further is transformer plugging for the mark down, which will allow us to use this information in our react templates. I'm going to go back into the console, stopped existing server and I'm going to out the other parking, the name of which it's got to be transformer remark. This plugging doesn't require any configuration. We can simply at it right after this source looking, saving this configuration file and three starting color server again, which we do every single time we have date the plugging configuration, starting the query again. We have some new information about the mark down in this property or will be mark or mark down remarks. Sorry. Using cower Control, enter approach, we nest our query again to this point where we have the properties. I can use this one in order to see for during information about the title the path and the date which actually come from so called front matter. The front matter is simply this information that you see here I have populated it beforehand. I'm going to simply remove those two. And now that we have this query, I'm going to show you how we can use it in our react templates. I won't name it first and stick it. It still works. So we take this information and we're going to go into sources pages index file instead of going into the second page, which is not super useful. We can make an update removing off this existing code, and I want to put my query results here. The query I need to cut is a new export. This name of the variable doesn't really matter, as long does it equals to Griff. Cute. No, with this particular syntax inside of that, we simply put the query that we took from graphical. Once we make the query in this way, it will. Thus the data is a prop to our component. And in order to see what we have here. One simple approach will be to actually change a little bit. This result put the good old council work here and the return. No, let's see the results of our work so far. I'm going to go up. No, leave it open the website and when they entered a console exceeded the result. I can see if, in this way. Now let's use this information in our react template. I know that we have prepared our data in this way. We can literate and displayed it. We'll use him on function True which we're going to take it A node itself with its key. Okay. And here Oh, actually, instead of returning uh, a whole new code book. I'm just going to return the component itself. Inside of that, I'm going to write a note to get the current element. But do note that the node itself, which is this level here, has another note inside. So I need to write note. Don't note. Don't that front matter, Doctor Tyto, to reach the title itself, saving it. I already see the result. You will see that react. Yes. We warn you that it needs this key that we actually already took from here. This is necessary for react, and it's do think agreed. Um, as you see, it's not very hard. However, I decided to make It is a small step so that you can understand the concept off. Making the query then placing it is an export in your template and using getting your react component in the next section. We're actually going to create content with the queries that we get from Gruff Kuo. Thank you. 10. Creating content programatically - part 1 - adding custom fields: hi. In this tutorial, we're going to continue on our journey into graphic euro in God's Virginia's. Don't worry if you have to watch the tutorial several times, have in mind that the topics that we're going to touch upon here are considered advanced. So take your time. If you don't understand something, repeat it. Make sure you do it yourself. The concepts that we're going to show here are part of the documentation. So if you're free to go into the docks pages and see it for yourself. And don't forget, however, that go Pynchon, basting the snippets from the website will not help. You weren't effectively from previous sessions. We have the following set up in the project are content he saved into content posts. This air just mark down pages that, at the moment, got BGS knows about. However, we want to create actual content based on these pages, and that's one of the best things about God's BGS because it's not limited to creating content only from static assets like other static side generators here. I would like to point out that in this note object we have fueled that include information coming from the remark looking. However, as you see, there is no fueled. So the first thing that we're going to demonstrate in this tutorial is how to add a new field here. Later, we're going to create pages based on this information that we put into these Kristen feuds . So let's get it started. The first thing that we need to do is edit our gods. Be note. Just Js In this file, we're going to put one method coat on, create note dysfunction, takes several parameters. We're going to select only one of them for the moment, usually in tutorials. You're going to go into counseling, walk this note in object to see what's going on, and you can do that. Let's see how it works. Yes, you see using this on create note method. When God's BGS goes into the building process, it's going to show information about every single note that comes from various places in the system. We're interested most specifically into this type markdown remark. Let me show you one very good approach that will give you the bigger picture of what's going on. Instead of putting council work here, I'm going to put a D Booker and I'm going to read the following comment. No de inspect Starting the gods becoming lining their face and running the build again. My work. Oh, no. GS is going to communicate with Google Chrome in order to allow me to the book my session Innovative to find decision, Go to chrome. Inspect. I'm going to add the notes type because that's what I need in order to make the check and future the content type markdown remark. You see that when I rendered Booger several times is going through different types that come from different probies when the process has stopped. At one example of having this markdown remark, then you're good to go. I can do the checks directly here. If no the internal Dave in this way, I ensure that this own create notebook take effect on Lee on this type of notes that I'm interested in. One piece of information that I need here is information about a slug. I can already take it from front matter when I safe. When I opened my editor, I see that the changes that I did in my Google chrome, our safety This is because I used the workspaces at this place. I want to create my custom fueled to create my custom field. I need to co create. Note fueled. However, as you don't have it, I can take it from bound action creators. If you don't understand this, don't worry. That's basically a big box of methods that God's BGS gives you inaudible to pull. Dismissed it out of the bounds. Sanction creators. They need to distract it. The properties that I need to pass here are the following note, which is the note name, which in my case will be slug and the value itself with your 16 tax. This could be written in the following way. Now, if we restart our server, we can go back to the graph cure with counsel and here, next to the front matter, we will be able to see this information. This is the result off our function. Create note field. Now let's use it 11. Creating content programatically - part 2 - creating pages: So let's use discussed a feud here that we created in the previous step to create new content to create new content. We're going to use the new method, create pages. But before that, let's remove this because we don't really need it or we need is the information about this looks coming from the custom field that we just add it that we're going to use in our method to create pages to implement a minute. Let's use a similar approach like on create note from the perimeters. We're interested in only one perimeter for a moment called Graph Kuo. With this perimeter graphical, which is another function, we're going to make a query for the information that we need, and it will return a promise. So in many tutorials you will see the following approach. This promise is going to accept resolve and reject. And inside of that, we want to make the query that goes to exactly this and because it's a promise, we condemn it with the results. Let's see what we have so far. Don't forget to close the process. With the result function, you can stop the server before the process finish. What is important here is to see that the same result that we have from the console into the from graphical we have now in this file from where we want to use this information to create new content to simplify our life. Let's take the example data from here and imagine it that we have it. I'm going to commend it out. This will enable us to imagine what we want to pull out. We want to pull information about firsts. No, let's it a rate disarray in October to create content for every single pitch. One specific here is that each element of dearie is an object which contains this key note . We can put it in the following way here. We want to use the method, create page, whoever it was, still don't have it in this your way like before. We're going to pull it from the bound action creators. Having pulled this create page method from bound action creators, that's use it in our iterated her here it except an object with following perimeters. Both. This comes from our custom feud. The next perimeter is context. Let's see the result for work so far. If you try to start the server again, you will see that the method that we just implemented for creating Canoe page also requires a template from where it's going to display the information. The most simple implementation could be that we create a new reactor component so that there is some think rendered during the creation of every page. I'm going to take this index Js for an example, and I'm going to create new folder templates and here I'm going to place this file that I cop it. Just few seconds ago, I'm going to rename me to Block Bust. This is going to be a template that I'm going to pass through my creative age function so that it can render for the moment. I want to make it a simple s possible in this book, Boston Plate. I have removed all of the data because I don't need it for the moment, the last thing that I want to do here is to rename this component to book post. No, I need to tell the create page method that I made in God's be no GS, that I want to use this template for every single post to do that I'm going to add a new property here gold component, and it's going to lead to sores. Then plates work most. This is the for that I just created one specific information here is that you have to ensure that this information is absolute for this. We're going to use the core path modu of no Gs. Let's that Let's restart a server, opening the website and writing Learn God's BGS. You can see that. No. When we go into the path of discontent, there is something going on. God be can resolve this bath based on the slug, and then it uses this book Boston Plate in October to show results. 12. Creating content programatically - part 3 - using variables in GraphQL: Now that we have connected our template toe our page here, it's timeto at some content to it. To do that, we're going to go into our graphical console again from previous queries. You remember that we used the remark, However, for a single page, we don't need all of the files. In fact, we're going to use this for this query this time. As usual, we don't need off the information we're going to take on the the title. And here we're going to select the age, you know? No, we can name this query. We can take it and we can use it in our template here. So far, nothing new. The information that comes after this query will come into these variable that we get from the perps data. Let's see how it looks. Saving it, going back in the page, looking can become so no. You see that these data that would pass to the template from the pro is having destructor. Let's use this information our template for the title. We're going to use the title from the front Better saving this. We already see the title. No, we have to. At some h Hello, This is the method with react genius. It's not as dangerous as the name saving. This received the HMO of the page. Let's see how it goes. However, here we have one post, but it's not the content of the word God, did you? Guess this is because we have the same query in every single instance, and this look doesn't matter. Obviously, we need to use the information of the current euro. That much is the SWAC. In order to say that the information of this page has to take the information from the specific markdown file to do that, let's go back into this council inducing variables in graphic. Your we're going to say that this query requires this four meter. This is the syntax to say that we're going to require this perimeter Toby bust and it's going to be a string. No, let's select it in our query. Picking the query again, we see that there is no perimeter provided. You can do that in the graphical from here and let's close toe Egypt. Now you see that when we make a query with the specific slug, this query gives this information. Thus we just have to update the query in our template, looked upto use the context correctly. I'm going to take over that and I'm going to baste my new query. No, really? Now revisiting cower page. You see, the content is changed. Automatic Next step would be to use this content on the home page because these are not applicable. It's very simple. In our index J s. We're simply going to rep this into link which is already included, which we didn't did it on purpose from previous tutorials. We're going to take this and I'm going to wrap the whole heading into this. The property in this component that serves the A treff attribute is gold too, because we have the information from this look and we're sure that it's same as the custom feud and everything is bind correctly. We can simply use it directly here, saving it and visiting our website. We can browse our content. Congratulations. You have the content correctly working on your home page 13. Refactoring a promise to async/await: hi. In this tutorial, I'm going to share its no tip about how you can re factor these promising tax into a sink await because I really appreciate your time into these long serious of tutorials about grafico. First, let's at a sink in front of our function next. Instead of this promise, we're going to have the results like that because we removed the promising tax. Let's remove also that after removing many things that we don't need anymore, you see that when you use the stink await syntax, you have cleaner coat that is easier to understand. 14. Additional resources and farewell :): Hello, everyone, and congratulations for making it a student of this class. I hope you enjoyed learning about God's Virginia's as much as I did. Preparing the course. As you might have noticed building features in your book was a very easy task, comparing it with the developer experience you might know really get from other assistance that will facilitate you building websites. I believe that God BGS is at a unique spot on the market of static side generators because it's not only that it gives you the benefits of tribute and optimized assets, which can be deployed on any hosting. But it also gives the best means for you to work with data Graphic. UL show. You decide to continue on the part of learning more advanced topics in God's Bigas. I would absolutely recommend you dig deeper in the data layer and some more advanced topics that I'm going toe briefly show you Now. First, you can familiarize yourself with these documentation pages about grafico on the website of God. BGS If you fall in love with the concepts behind Grafico is you might probably have done already. You can go through the Web site of how to graphic euro, which is the best resource that you can see so far on the market. You might also decide to reuse the same concepts of acquiring data in other applications that you maintain at the moment, if there working with dressed for it, the ice. Also, when the website of God's GS there is a useful features comparison with which you can see different features are compared throughout systems that, let's say, competitors to gas BGs on the market, then the next resource that is very useful and you will be here very frequently is this. Let's a marketplace of plug ins. There's an features that you might also check here that they're related to, Let's say, the markdown with the keyword remark. You can also see different things about religious. Out of that, you can also get a little bit deeper in the in the topic of the so called jam stack. This part will be especially useful for you if you come from the server side programming back and development background, and you're not certain yet whether working with only static assets would work where we not for you. At this stage keeping minded, there is yet another trending topic on the jams stock a market at the moment, so called server less. It's not only related to the Jan stack. In fact, it's how you can get the Compute Veum different services when you need it s oh, you're not bound to only delivering HTML. Last but not least, you might also want to check this tutorial on my website that will lead you through the way of integrating beckoned for the Continental Mint of your website. It's based on Notify CMS, which is an open source product of magnify who are also the leaders on the market when we speak about the gem stack. If you have found discourse useful, feel free to tell your friends about it and get your feedback about possibly improvement. You can finally online with the handle of Colin check on social networks. You can get in touch and ask any questions. Thank you so much and it's you so