 Okay, so I guess before I start, yeah, so who here uses Gatsby? Okay, great, so now I started a Gatsby site and refresh, so I just clone this Gatsby, is it big enough? I just run the Gatsby starter and then this is what I get, so if you guys don't know, Gatsby is like a static site generator and a lot of cool people are using it for their personal sites as well as like RK and build on Gatsby, Gatsby, Tenebormov, Coway, they have all their blocks created using Gatsby. Okay, so to real, I think let me first introduce myself first. Again, I'm Lee Hao, this is my Twitter handle and I work at Shopee. So what I'm going to talk about today, it's a bit of overview of how Gatsby actually build the site. So we're going through Gatsby pipeline and some of the configurations and Gatsby is part of gem stack where it has the markup part of it where it uses a markdown to write your content. So sometimes you want to have maybe some markdown plugin to have your own flavor of markdown. I might be able to cover about that if time permits, but mostly I'll be talking more on the Gatsby pipeline and going through that, we'll see what we can actually type into it and make some customization to it. So as you see just now, when I started my sites, you see all these things is going on step by step. So this is Gatsby trying to build my sites. So what are they trying to do? So basically I break it down to a few stages. So the main stage is the bootstrap stage where it tries to find sources which she means like your site has a lot of different, like where does your content come from. So it tries to find all these content and Gatsby uses GraphQL. So you have this graphical to tell you what kind of things that you can query from the GraphQL. So I can't cover too much on that, but then this is where it tries to start to create schema based on what you get from the content. So the first schema of GraphQL is built here and then the next stage will be this and all this content try to start creating pages from it. So the content could be like markdown files that you write or things like that and then based on them, basically Gatsby will try to query from the GraphQL and then try to create pages from it. So when creating pages, they are actually creating more markdown nodes. As you can see here, markdown remark is like a source like markdown files and then they create like site page which is pages. So it's just creating more and more content in the GraphQL and then lastly, the next step will be actually generating them which is to run through the queries, query all the pages and then write the pages down into your file system and things like that. And then the last, this is like the bootstrap part of it and then the next step will be actually building JavaScript to it. So if you don't know like Gatsby static site generator is generating static sites but then there is some interaction that you can do with your website and those things that you can write in JavaScript they are being built in this phase and once you finish a bundle, then you start a server. Okay, so this local host your server which is to serve your pages and hot-wheelers when it changes. So first thing, the first file that you will see or you will touch the most of the time is the Gatsby config which is a file that you can configure all the plugins. So it will be here. So I just start with the starter and then you will see Gatsby-something. So the first file is Gatsby config. We actually install the config plugins in it. So there are small things that you can do which you can always refer to the reference which I'm not covered here. The next file is the Gatsby-node over here. So this file is actually a place where you can start to tap into all the different phases of Gatsby. So I have the same pipeline over here but then in each phase you can over like the one that I put a link over is a function where you can actually tap into the Gatsby pipeline. So during bootstrap, it has a pre-bootstrap and then it calls source nodes where actually all the different plugins try to create nodes. So inside it calls the create nodes. So for one, as I explained just now this is where the Gatsby starts to go through your file system, all the content you write with written. So it's actually being done by a plugin called Gatsby Source Flow System. So it does use like this so this is like where it's actually it does, it's where it starts to call a source node and then get all this content from. So when you create nodes you'll get a callback call on create node and then that's where you can do some transformation to it. Things like because you create a markdown file and then you try to transform it to maybe like HTML and things like that. And this is also where you can and when it starts to create GraphQL schema this is where you can do customization as well. You can create more nodes or more types in the GraphQL server. So this is what we must do as well. So basically if you look over here like this all markdown remark is a new type of node that remark plugin creates. So and then you start to create pages so there's like hooks that you can call like create pages and create pages statefully and this is like one of the page creator plugin users. So basically you can see like Gatsby itself is being built with a lot of different kind of plugins in the Gatsby repository and basically each plugins are just implementing all these different hooks and all this piece up together to get your basic Gatsby sites. So basic and if you click into one of sorry, I clicked the wrong one like if you click into one of the plugins you will see like the Gatsby files that you have in your project and basically they are actually the that's how so you have these files over there and they basically implements all these different hooks and all these pieces together to become Gatsby sites. There's more different kind of hooks that you can do over here like during build you can customize the Babel plugin or the Webpack plugin and you can do something after you build you can create like when there's when you create that server you can access to the express local express server you can add things like adding proxy and stuff like that right so I guess it's getting a bit lengthy over here but basically some way of all this is that all the different stages has a function where you can hook into and do things with it and this is not as exhaustive list if you go into docs they have a more complete list of all the things all the different stages they have and actions will be things that you can do during those phases right okay so so right now I'm trying to do a simple demo what you can do with a simple demo okay so over here I have installed my plugin okay so one is the live uncomment okay so I'm going to head over to my plugin folder sorry so basically it has Gatsby node in it ya so basically I'm just going to implement like things like like doing source nodes you can create more types in GraphQL and then you can create node over here and then you can doing create pages stage you can call like create page and then create page ya so so basically you just implement all these different functions that you want and then because this is during the building phase you just name the file as Gatsby dash node just like what you will have in your repository but then if you feel like you want to package it up as a plugin you just have the same name that's it there's some so what it does now is that it will do I have it or is it running okay nevermind okay sorry so so these are like the node phase of building it right so the next phase is actually after you build you actually load your HTML to the page and then it's actually a React app and there's a lot of things that you can do with a React app which like for example when you do a hydration or when you're trying to render or you can wrap your entire app with some elements right these are the different kind of phases that you can add and you just add them to a gatsby-bowser.js file and ya and lastly is the SSR API where it's similar where basically this is the phase where it generates the HTML but how does it generate it use React SSR to render the HTML so so this is the phases that there's a lot of different APIs over here and things that you can do with it right so let me summarize it so gatsby-plugin so you just folder with a package.json and then you just create like gatsby-node.js or browser.js or SSR.js that will basically that is basically just a how gatsby-plugin is right ya so okay so let me quickly do I have time for this one okay sorry um I think it's okay if you ya 10 minutes, right ya okay so ya, sure so sorry sorry so mungdown is you can do some plugins with the mungdown itself basically if you use the mungdown plugin this is where you will edit right I'm not going to delve into much of the details of it but basically what it does is that you can use the mungdown AST and do some transformation and then that will that is basically the gist of a mungdown AST right if you want to know more about it you can always talk to me about it right ya so ya I guess I grace through everything ya so thank you everyone