 OK, am I audible? Sorry, I'm not using a mic because I have to do some coding. So I'm not using a mic. If I'm not audible, let me know. I'll try to use a mic. So today I'm going to show you how we actually build a simple block and also deploy. So I'm going to use a Jamstack here. So the Jamstack is, as you are aware, like it's a JavaScript, APIs, and mockup. I'm going to use a Gatsby. Instead of talking much, let's jump on to a demo and very quickly let's build a block. So I have a very basic setup here. So I have some dependencies Gatsby and Gatsby source file system. So I'll explain why I needed that and transform and remark with React and React DOM, obviously. So just to give an introduction of the Gatsby, it's built on top of React to make things very easier. And also it uses the GraphQL to fix some data, to read the data, to read any information about our site. So very quickly, so the Gatsby needed a source folder, SRC folder, and pages. So this is the pages. So whatever you put in within the pages will be rendered as a separate HTML page. So once you build it, it will be separate HTML page. Like say, for example, the index.js is a main HTML page, which will be rendered the moment that you land on to your website. So here I have a very simple component, which actually shows you the hello world. On top of it, there is a layout component. So the layout component is just I have some header and then main. It's very simple. So let me quickly show you. So when you say Gatsby developed, so it's basically Gatsby developed, it takes all your pages and then renders it to a HTML file. So the moment I'll go here, so it renders my layout component. Layout component contains my header and as well as the content of my blog. And it also comes with the GraphQL IDE, so where you can actually query all information about your website. So I'm going to actually show you what I can query in later stage. Let's jump on here. Like say, for example, as I mentioned, I can create another page. Let me create a about page and call it subot me and come here and say slash about. So that's simple it is. So you create a page and then you can easily query the page also. Like say, for example, I don't want to actually keep that my blog. It has to be very dynamic so that I can easily ship, make things changes dynamically. Let me introduce you to the gatsbyconfig.js file, so which is a very specific configuration that is required by the Gatsby to maintain your configs as well as your plugin system, the Gatsby plugin system. So I'll very quickly show you how it looks. So I have a small code here. Let me create a file. So Gatsby config, it has to be in this format. The very first thing is the site metadata which shows you the title. I'm going to replace my blog with this title. And also I have few plugins which I'll come to that part later. So let me quickly go here. So how do I actually query this title? So using GraphQL, I have to query this title. So since I have added the Gatsby config, I have to rebuild. So let me run this again. Now I can go to my GraphQL interface. This has added more information about my site. Like say, for example, let's take the site. And you can see the site metadata. This has been added now. And you can query the title. So now I can get this information. Let me quickly take this query and then go to... So I'm going to, you know, I'm sorry. So there is a... Sorry. There is a use static query from the Gatsby. This is a simple hook which lets you to query static information of your site. Like say, for example, the site metadata is a static information which you can query from the components, not from the pages. So you cannot use the use static query from the pages. So that means like index.js or about.js. Any file within the pages folder, you cannot query the static information. So that is the reason I'm putting it into the layout component. So this is, as I mentioned, it's a GraphQL. Very quickly I replaced this with site and site metadata and title. So that's simple it is. Now let's jump on to the... OK. So now I have a very basic setup of my website. Now I want to make it as a blog. So I should be able to write posts and then post it to my blog. To do that, I want to actually write posts on using the mockdown because that is very simple for me to, you know, instead of putting into different HTML files and all those stuff, I'm going to put it into the mockdown. So I already have a few mockdowns here. So like say for example, first post and my second post, it's the same content. I mean different content by the way. The only thing is that the same format. So title and date. So these are the kind of meta information of the particular post. So you can add any information here. You can add tags also. Just for a preview, I'm going to keep these two information. As I mentioned, like coming back to the Gatsby config, the Gatsby source file system is a plugin, Gatsby plugin, which lets you to read all the files from your data folder. So I have mentioned here from that to, you know, read the information. So that's what I had given here. So if you look at this, okay, and also there is a Gatsby transformer remark plugin, which helps you to convert your mockdown to a HTML content. So whatever you write it in a mockdown file, it will be converted to a HTML content. So these two plugins will be helping me now. And let's go back. You can see the all mockdown remark that has been added now after you add the plugin and which will help you to go to the nodes and front matter. So you can query the date and title here. Like say, for example, I want to query date as month, DD, and here. And also I want to query the excerpt. So there is an excerpt also. Excerpt lets you to give the only few characters of your content. So query, you get all this information on your write, your date, title from your mockdown, and also the content. So just for a time sake, I'm going to quickly replace my index.js here and explain this. So this is the same query that I used in the GraphiQL interface. And here I just replaced with the just coring that information. So if you look at here, I'm not using a use static query here. This is a page query basically because I'm coring from the page. And let's go here very quickly. So whatever the blog post that I'm writing, I'll be able to publish it in this way. So very quickly, let me show you Gatsby node. Now I have a home page which lists down all my posts. Now it should be clickable and read the entire content of each post. So for that, I have to build my pages dynamically because every post is a single HTML file. So that means I have to build these pages dynamically. So to build those pages, I use Gatsby's Create Pages API, which let you to query some information. Say for example, there is a slug. But by default, there is no slug from your mockdown. So what I have to do is I have to dynamically build this slug from my existing mockdown remark. So that is what the create node does. So I'm taking the mockdown remark type. So there are many internal types. So I'm just reading only the mockdown remark type. And I'm creating a slug. So and then I'm coring the slug. I'm creating the pages basically. But if you look at this here. So I'm having a source template and post.js. So what it does is I'm going to create a one single file which accesses a template for my post page. So let me quickly show you that page. So here again, I'm using the same kind of graphical query. But only thing is that instead of all mockdown remark, I'm coring only for a mockdown remark with a variable. So say for example, here the slug. Slug is the first, sorry, here it has to be the dollar slug. And the variable should be slug and string. So this is the variable. I'm passing the slug. And it will be replaced. So the variable value will be substituted. And I'll be getting the information. How do I pass this slug? If you come back to the Gatsby node, there is a context field which lets you to pass this slug to your page, to your template via the query. I'm going to quickly, oh, I'm sorry here. So let me build it successfully. So I have to add a link, but sorry. So now I can render the entire template here. So this is done. Now very quickly, I'm going to deploy using a now. So hope you know how to use now. So I have a now CLI. It's a Zeeds now. So I'm going to deploy. So we build a block and just I do a now. It actually builds my Gatsby and then deploys into the cloud CDN. You can actually view the logs at runtime while it is building. So this is very handy because now with all this tool set, I can build the blocks very quickly. I can build my web set very quickly and also deploy. And this now is very easy for us to deploy it in a very speed in a couple of seconds. It's almost ready now. Yeah, the Gatsby build is running. All right, yeah, done. So let's open. OK, yeah. So it's now in an internet. Thank you. Sorry, I took more time.