Gatsby Tutorial #2 - Starter Sites

all right then so now we know a little bit about what gatsby is let's try making a new project so the easiest way to get started with a new gatsby project is to use what's known as a starter site now these are ready made by the plated gatsby projects that come fully baked with all the setup and configuration that we need to develop a gatsby project and they range from bare bones starter projects which contain only the essential configuration that we need to make a site right through to fully fledged blog sites and other more complex builds so you can view all the different starter sites on the gatsby website go to gatsby js.com forward slash starters like so and you can see them all here so you can see right here we have a starter blog we have a starter default starter portfolio etc and you can click on these to learn more about them and see how to install them now the one we're going to start with is a bare bones starter site and it's called hello world so i'm going to search for that and it's this one over here so this is a snapshot of what it looks like in a browser and as you can see it's very very bare bones it just contains this text so it's going to come with all the configuration we need all the setup but only the minimal setup it's a bit like when we create a react app using create react app it's that kind of setup probably less so if we scroll down here it's going to show you how to install this starter but there's one thing we need to do first and that is to install the gatsby cli and only then can we use a command like this because we start it using the gatsby cli so let's install that first of all so to do this you want to open up a terminal this can be command prompt or whatever terminal you want and we want to use npm to install package now this is why you need node installed because you can only use npm if you have node installed then we want to say we want to install then hyphen g meaning install this globally on our computer so we can use it anywhere and we want to install gatsby hyphen cli so press enter and that's going to install that tool for us [Music] and then once that's done we can go back to the starter site details page so we can copy this command right here now notice this says gatsby new which is how we start a new gatsby project then it says my gatsby project now this is what we want to call our project so we're going to call it something different and then this is a github repo and a starter project reference that we're going to install so let us now go over to the terminal and paste this in and i just want to change where it says my gatsby project is something that our project is going to be called so let me delete that and i'll change it to web warrior all right then so if i press enter now it's going to create a new project called web warrior in this directory for us and it's going to base it on this starter site [Music] all right and now that's done i'm going to cd into that new directory web warrior like so and then i want to open this up in visual studio code so to do that i can type code space and then full stop press enter and it's going to open up this project in vs code right here okay so now we can see all of these different folders and files on the left this my friends is our starter project so the first thing i want to do is give you a little tour of all these different folders and files because i said that this was a bare bones project but by the look of things we've got a lot of different files and folders here so let's take it one step at a time first of all node modules over here this is where all of the different packages are installed so react itself and gatsbit they go in there and any dependencies that they have as well any other packages that we install in the future as well for the project are going to live inside here but you never have to go in there and edit anything that's just where they live then we have this source folder right here now this is where like 95 of your code is going to go so most of the work you do will be inside this source folder and inside the source folder at the minute we just have a pages folder as well and inside that we have an index.js and this is where we have the hello world that is seen in the browser we'll see that in our browser in a minute but this is the entirety of the content at the minute so this is basically the home page so down here we also have a static folder this is where we can place any static files that will be made public to the browser we also have these files down here so git ignore this is a version control we have some prettier config files which you'll need pretty installed for them to have an effect so go to your extensions and search for prettier if you want to install that so this thing right here all right so let's go back to the files down here we have gatsby config this is where we have some different configuration options for our site as well as where we register plugins which we're going to learn about later on we have some package files down here as well so the package.json file lists all of our different dependencies which we can see down here and also we have some scripts which we're going to use along the way as well the ones we'll mainly be using are this towards the end when we build our project maybe serve as well and we will use develop this is what we're going to use to actually preview the website in a browser and then we also have a license file and a readme file as well so it's pretty simple most of the things you're not going to need to touch and like i said most of the work will be inside the source folder and inside this gatsby config file as well all right then so how do we then preview this in a browser well all we need to do is run this command right here gatsby develop and what this does is spin up a local development server so that we can preview it in a browser so let me open up a terminal you can do that by going to terminal and new terminal and i'm going to say gatsby develop like so so press enter and this is going to spin up that local development server so it says right here something else is already running at port 8000 for me so i'll say yep run this on a different port for you as long as you've got nothing else running it will just spin up a local development server using port 8000 now we can see if we scroll up we get this link this is for graphical we'll talk about that later on but we also get this one right here now yours will probably say 8 000 instead of 8001 but i'm going to control and click on that to open this up in a browser and we can see this is our website right here hello world so there's one more thing i want to show you and that is if we head back to the code you'll also see this public folder now now this folder was generated by gatsby when we ran gatsby develop and inside here is all of the stuff that is being served to the browser when we preview it including this html file right here this is the html file we're currently seeing in the browser for this homepage index.js file right here so this stuff right here is being served in the browser and later on when you come to deploy your application this will be the folder that you deploy as well after we've run the build command because all of the built files will then go into this public folder so that's your introduction to the starter site next up we're going to start talking about pages and routes so that we can add more content