Creating your first Gatsby Site - Daily Dose of Gatsby Episode 1

[Music] hello everyone and welcome to the first episode of the daily dose of Gatsby what is the daily dose of Gatsby well besides being a mouthful it's essentially something that I'm going to be putting together about every day where we go over something Gatsby related so we're gonna start with the basics but we're gonna go into covering some more advanced topics eventually talking about different Gatsby themes and plugins that can be used to enhance or build upon your current gatsby sites so this episode we're gonna be going over the very basics of how to just install or set up our first Gatsby site so assuming you've gone through the install process make sure you have no js' npm make sure you have the Gatsby CLI tool you're gonna need get if you have those things installed which you can find documentation on the Gatsby Doc's website for how to do that once you have those installed you're good to go well and we you can follow along in this video and we'll get started so let's take a look so I've opened up a command line here I have a place on my directory in my file system where I want this to go I'm gonna go ahead and just type in Gatsby new and then whatever project name I want so I'm gonna do Gatsby video because I'm making a video on Gatsby and then I'll go ahead and hit enter and what that's gonna do is that's gonna go ahead and create my new Gatsby site it'll take a little bit of time and you can see it does require git now that it's finally finished we can go ahead and change into that directory and all we need to do is run gatsby develop and this will start up our gatsby development server so what this is actually doing is this is running the gatsby build process so it's going through and it's building essentially the site for us now we are running the development server or the develop server so what that means is any changes we make to files are gonna be automatically reflected so let's go ahead and start by just going to localhost 8080 fault starter site here there's not much to it it's pretty simple we have our first site or first page and then we have a second page that we can go to you can see there's some images so I made some markup things like that let's actually take a look at what is in or what's creating this these pages what's in this project so the best way to do that is open up a code editor you can use whatever code editor you're typically used to using if you don't have one or you're looking for a different one I would recommend vs code so in here I'm going to go ahead and go to open folder and I'm going to select Gatsby video because that's the folder I created now the project I created and you'll notice that over here we have a whole bunch of different files so when you run that gatsby new command it's going to create a bunch of different files for you most of what you're going to need at least for the code itself is in the source directory but there's some other files here that we're going to talk about in the future such as gatsby node gatsby config for now let's go into source and go into the pages folder you'll notice there's an index j/s and this markup for index j s matches this Paige so you can see it says hi people welcome to our your new Gatsby site if we go to our code editor it says hi people I can change this to say hello and if I save this and I go back you can see it's immediately shown here they did have I didn't have to refresh the page didn't have to do anything like that another important thing to know is that any JavaScript file created in this pages director or in this pages directory is going to end up being its own Gatsby page so as long as it's a react component it's going to create its own page for you at that URL so this one is page - - and you'll notice if I go to page 2 here it's slash page - - so it uses the name of the JavaScript file as the actual slug or the path let's go back to the home page here and let's take a look at this markup one more time so this might look confusing if you're new to Gatsby if you're new to react this might not make sense how we're having some tags that aren't even HTML tags we're mixing it in with HTML tags and it's all inside JavaScript so what this is called is it's part of react it's called JSX and essentially it allows you to add some HTML markup and custom component markup and it turns it into something that the browser's can then eventually read so turns in JavaScript so by importing react here creating the component with the JSX it's gonna then render itself into a bunch of just crew react that create element statements that are gonna be turned into JavaScript so that's all we're gonna do this time next time we're going to actually look at how to create these different components and subcomponents we're going to talk about how props can be used to send data back and forth by using components we'll talk a little bit more about JSX so if you're not familiar with it and it looks a little confusing you're gonna start to see how it kind of can come together and start making sense that's it for this time I'll see you next time goodbye

Channel: Code Karate

Views: 2,066

Rating: 4.9024391 out of 5

Keywords: Daily Dose of Gatsby, GatsbyJS, React, JavaScript, Website Development, Static Site Generators

Id: 7WJ-_Ap-_48

Length: 6min 10sec (370 seconds)

Published: Tue Sep 03 2019