This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Blog Setup" Lesson
[00:00:00]
>> Jason Lengstorf: So the way that the blog today is gonna work, this is kind of a ride along, right? So I'm gonna live code this whole thing up here, and we'll all do it together. I'm gonna go a little bit slow, but I have a tendency to code pretty fast.
[00:00:12] So I don't expect you to get all of these things, you're probably not gonna keep up with me keystroke for keystroke, and that's okay. We have regular checkpoints where you'll be able to check out a branch to get to where we are in the workshop. And these kind of encapsulate big concepts.
[00:00:27] So if you get lost, if you fall behind, don't worry, don't panic, we will have a chance to skip ahead. Let's build a blog. All right, so at this point, we should have the the package installed. And so if you haven't run it already, just run a quick npm install, make sure we've got everything, and let's take a look at this repo.
[00:00:49] So what we've got is a fairly straightforward Node module setup. So if you've used this before, you'll recognize the package.json. Inside, we've got three dependencies, gatsby, react, and react-dom. Those are the only three dependencies you need to build a Gatsby site.
>> Jason Lengstorf: We also have prettier so that we can format our code more easily.
[00:01:13] That's an optional dependency, you don't have to use that. And up here, we have a handful of scripts. So the one that we're gonna be using most is gonna be the develop script. We've also got a build script, which we'll look at later. format, if you just wanna fix the code.
[00:01:28] If you aren't liking the way it looks, you want prettier to fix it for you, just run npm run format, that'll do that. And then serve is kind of a test script for build that we'll look at a little bit later. Inside of a Gatsby site, you've got your kinda standard boilerplate, the README, the LICENSE, the prettier config, the .gitignore.
[00:01:48] And then we have two folders here. We've got a source and a static folder. In the static folder, we just have a favicon. The reason we include that is so that the browser doesn't complain about not being able to find a favicon. There's really no other reason for that to be there.
[00:02:02] And in the src folder we have a pages directory, and then index.js. And you can see here that index.js, it's a very straightforward React component. We are importing React, and we're exporting some jsx. If you're not familiar with React, don't worry, the things that we're gonna do in here today, I mean, we are writing React, but we're not gonna go way overboard.
[00:02:30] So don't worry if this is a new syntax to you. It will start to feel a little more natural, hopefully by the end of the workshop if you just keep writing.
>> Jason Lengstorf: And that's the whole thing. So the cache, the node_modules, and the public, those are folders that are handled by Code, not by us.
[00:02:48] So we're not gonna go in there at all. So really, all we've got in our Gatsby site is an index.js. There's not really any other code to start. And that's because Gatsby, again, is designed to be no boilerplate. We don't wanna have to do a bunch of boilerplate to get started.
[00:03:03] So let's start our site, we're gonna do npm run develop. And what this will do is, it will run through kinda Gatsby's startup process. This is doing all the things in the background that normally you would have to configure yourself. And once that's done, it's gonna give us this URL, this http://localhost:8000.
[00:03:21] So I'm gonna grab this, drop it into my browser. And now we've got our running site, this Hello Frontend Masters! And so something that I love about Gatsby is that right out of the gate we have support for hot reloading. Okay, so now if I save this, it's gonna update right away.
[00:03:39] So we're able to very quickly see something in the browser. And as you can see, we didn't change any code. There was no config, or boilerplate, or anything. We just set up our Gatsby site and we're off to the races. We're already seeing things in our browser.