Getting Started with Gatsby: Building Your Portfolio Site


– [Linda] So first of all
welcome to the webinar. Getting started with Gatsby,
building your portfolio site. We have a couple of really
exciting speakers as well as some guest speakers today. But first a few announcements. The webinar will be recorded
so it will be sent to all registrants and posted on
Twitter after the live webinar so if there’s anything that you missed, you can go ahead and
access the recording on our website a little bit later today. The recording will also
have closed captioning so if there’s anything that you
missed there and it’s easier to read it, you’ll be able to access that on the recorded webinar. All the attendees are on
mute, so if you do need to chat with us or especially
submit a question please do that through the Q&A window
on the Go To Webinar app. And we will make sure that
either we have time to answer questions today or we’ll answer them throughout the webinar. Okay and with that we’re
going to get started. And let me just introduce
our great speakers today. So Jason Lengstorf will be joining us, he’s Head of Developer
Relations at Gatsby. And Jason is Head of Developer Relations, he’s also a human duct-tape, which you could ask him about sometime. He’s a regular keynotes speaker
and an occasional bartender. Jason has done a lot of
livestreams, a lot of training and we’re really
excited to have him here today. We also have Tiffany White joining us. Tiffany has been working with
Front-End technologies like JavaScript and React for several years. She is an instructor at Egghead
and writes on her blog at Tiffany White dot tech. And we’re also going to
hear from Nathan Leon. Nathan is a Front-End Engineer
based in Washington D.C. who loves CSS React and Gelato. I think that’s a great combination. And when not coding you will
probably find him hanging out with his dog Renly or
watching Brooklyn 999. Actually that’s just two
nines, Brooklyn 99 (laughs). Alright, and with those short
intros I’m actually going to turn it over to Jason, who’s going to give us
an overview of Gatsby. So let me pass the controls. – [Jason] Alright, hello everyone. And I’m super happy to be here, thanks for inviting me, Linda. So the first thing I wanted to do is just talk a little bit
about portfolios and Gatsby. And so when you start
thinking about your portfolio, the thing about is that your
portfolio is your resume. Like portfolio sites today tend to carry more weight than
a piece of paper that you would hand into a business. But your portfolio is
also your business card, it’s what you’re gonna send
people like I don’t know about you but I haven’t had a
business card in years. Instead I just give people
a link to my website. So in a lot of ways your portfolio becomes your first impression. Which means that it’s the
first thing that people are gonna see about you,
they’re gonna Google you and they’re gonna find your website. And you wanna own that first impression, you don’t want your first impression to be something like LinkedIn. Why let them control that experience when you could control it yourself? A portfolio’s also a place
to learn and experiment, it’s a low-risk environment
where you can try something new and if it doesn’t work, no big deal, take it down and try something else. And if it does work, you’ve now learned a new skill
that you can apply elsewhere. And it’s a place where you can show off, like do you know how to do
animation but you can’t get a client to give you the money
to do like a cool animation? Do it on your portfolio, show
off that you can do that. You can do illustrations,
you can do some kind of cool JavaScript interaction. Anything that you’ve learned
that you’re proud of, you can work it into your portfolio and that’s a great way to do things. But a lot of times
portfolios end up being hard. Almost everybody I know in
tech has a recurring joke where they’ll say oh, I’ve been
working on my portfolio site. I’m like, cool how long? Uh, I don’t know, 15 years. And we want to make sure
that that’s not the case so in our estimation we believe that you can build a portfolio
site in a few minutes which I’ll show you later in the webinar today. But it can look really
professional, you don’t have to slap something together and
feel like you just put it up there to be done with it. You can do something very fast
that is really high quality. And you can do that using Gatsby. So to talk a little bit
about how Gatsby works. Gatsby is a system of kind
of node API’s under the hood, that will load data from
anywhere into GraphQL. And we use GraphQL to normalize
that data so that we can, this is kind of a technical
term but early buying that data build time and what that means is we’ll pull the data in from all sorts of different places and we’ll
stick into template so that you don’t need to
have a server running when your site is served. We use this to generate static assets, which means you can host it anywhere. You can put it on Netlify, Amazon S3, Google Cloud Storage, whatever you want. We’ll automate the
performance tuning of this as we generate so that you get a really, really fast website
right out of the box and it’s then deployable to
any CDN that you want which means that your site is really close to the people who are using it. And it loads very, very quickly. And probably most importantly, this rehydrates to a React app
once it gets to the browser. Meaning that you’ve got a
fully interactive website as soon as it hits the client, the browser. And that means you can do
anything that you could do with a React app inside of it. So this is kind of, I just
threw a lot of terms around so to visualize this a little bit, what we’re trying to do is we’re trying to make the right thing, the easy thing. Gatsby is designed so that
if you are basically doing the bare minimum amount
of work to get a site up, your site is going to be high performance and pleasant to use. And we do that by optimizing a
lot of things under the hood. If you’ve ever heard different
performance terms thrown around like the purple
pattern or code splitting or bundle optimization, those sorts of things all happen
automatically inside of Gatsby. So by default you’re
gonna get something that’s gonna score really, really
well on performance tests. Which means that people
even on bad connections or mobile phones are gonna get a
really, really fast load time. Visually what this looks like is your data can come from anywhere. So here we’ve got GraphQL content fold, WordPress, you could do a REST API. You could pull from regular
json files or mark down. And that all gets pulled into Gatsby. Then you use reacting
GraphQL to pull data in and build out components
that use that data. We then compile that
down to static assets and you can put that on S3,
Netlify, whatever CDN you want. And ultimately, that ends up
in the browser as a React app. So that’s kind of a really, really fast crash course
in how Gatsby works. We’ll actually dive in and look at that a little bit later in the webinar. But for now, I’m gonna
hand it back over to Linda. – [Linda] Thanks, Jason. Well we brought Tiffany
and Nathan on because we want them to share the great work that they’ve done on their portfolio site. So I’m actually going to cast
the controls over to Tiffany, and have her tell a little bit more about using Gatsby for her site. You might be on mute still, Tiffany but we can see your slides. – [Tiffany] Oh, okay, here we go. Hello. I use Gatsby & Contentful Starters for pretty much a quick and easy way to get my portfolio site up and running. Previously my portfolio
was a static HTML and CSS site with like a few
animations sprinkled in. I used my sort of brand
color of Tiffany Blue for the background and some SBG’s
to different services to link to where I am on the internet. So basically like a landing
page with all my links. I use the small animation
library to target the text bouncing up as
well as the little logo. It was great but it wasn’t eye catching, it wasn’t something that I
could look at and be proud of. This is the old, this is a screenshot of the old portfolio that I had. Not bad, but I could do better. I wanted something a
bit more eye catching, that could link to all
my projects, the repos. And basically showcase
my blog post which are a key component of who
I am as a developer. What would look good, still be fast, and help me get noticed as a dev and ultimately get interviews out. That’s what my goals were in
creating a newer portfolio. So I basically used Gatsby and Gatsby uses a stack you’re
already familiar with. JavaScript, React, and GraphQL. This is a screenshot of my current site. Gatsby is basically a fast
static site generator. Compared with other solutions like Jekyll. So it’s fast, flexible, and extensible. I’m not a designer and I
wanted something easy to set up and customize. Gatsby has an ever increasing selection of starters for you to choose from. Because using Contentful is a,
had the CMS you don’t have to use the command line to get something up and running right away. Basically using Contentful
means you could add something to your site or take something away from your site and then slide
right away without having to push and pull content
from the command line. Gatsby has a lot of
plugins that you can use to make your site look the
way you want it to look. To make it more your own. So my goals for creating
this newer portfolio was to land interviews, network
with companies and other developers and I’m
currently interviewing right now. That was my ultimate goal. It’s also letting me network with other developers in the industry. Some from large tech companies, some not but the Gatsby
Starter & Contentful are the easiest and quickest way for me to get my portfolio up and
showcase the work that I’ve done and be able to
focus on my main projects. And that’s it. – [Linda] Great, thanks Tiffany. Just a quick reminder, we have
a few questions coming in. The question chat window, so feel free to submit your questions. For either Jason or Tiffany
or Nathan in that window. And so now for another example of a portfolio site I’m going to turn over the controls to Nathan. – [Nathan] Alright, can you hear me? – [Linda] Yep. – [Nathan] Perfect. Alright, hi everyone my name is Nathan. And I wanna talk about how I built my portfolio using Gatsby. So let me see. So in preparing to build my portfolio I had a few goals, right? I wanted to quickly build my portfolio, and I wanted to be simple and easy, get it up and running quickly. I wanted to use tools that I
was familiar with and I was hoping that in designing a portfolio that stood out I could get interviews that would hopefully lead to a job. So those are my goals in preparation of building a portfolio. And the reason why I chose Gatsby is because when I first looked into Gatsby, I was really surprised how
well the documentation was. So it was really easy to follow along and navigate through the site and
understand how to best use it. And I went through the
tutorial and within 30 minutes, honestly I felt really confident
to just start working on my portfolio using Gatsby and
just getting right into it. And another thing I noticed
in reading about Gatsby is that there were a bunch of plugins. So there was plugins for
essentially anything that I could really think of that I would want to use for my site. And there were plugins for
everything I specifically needed. And one of those things is
I wanted to use Emotion, which is a CSS-in-JS library. Which I used for my last
project and I want to kind of build on that foundational
knowledge and keep it going. And sure enough, Gatsby
obviously had a plugin for that. So I was able to use that
plugin and get my styles in with no issues whatsoever,
it was seamless. And I want to show you a quick preview or a quick showoff of my portfolio. Obviously I wanted to use my
dog for some bonus points. So obviously here’s a quick bio about me. And in my projects you
can see my transitions and then some notes about my experience. A Hackathon I did in 2016. And a quick bio over here. So it’s pretty simple but I
think it was eye-catching. Really stands out. Everyone that I’ve talked to
really likes it and I’ll get to how it’s helped me and improved my chances at getting a job in a minute. Let me get my notes back. Okay, great. Full screens, oh. My bad, okay. So in building my
portfolio I used Gatsby and it was incredibly easy. And some of the things that I
really liked about Gatsby is I think Jason also mentioned, it uses code splitting,
right out-of-the-box. And in the dev environment
it has hot reloading. So I could view, in Gatsby
Develop I could view all my changes live so it was incredibly easy just to build my components and
then see immediate results. That way I can make quick
small CSS changes as I was going along, right? And also the plugins were essential for me because I wanted to
use things like Emotion. Because that’s where I felt the most confident and comfortable. And also I think Jason also
mentioned static rendering so as soon as, it actually outputs a site, it outputs it statically. So I wanted to, in building my portfolio, utilize the tools that I
was already familiar with, which includes React, Emotion, and using a component structure. So and jumping to Gatsby was
a quick and easy transition. So by using Gatsby I was
able to focus entirely on just the design and implementation, right? So Gatsby did all the heavy lifting behind the scenes for me. I didn’t have to worry about tweaking or optimizing performance
after I built the site. The reading and documentation,
I was also able to get it quickly up and running,
deployed through Netlify, because Gatsby has, it has a quick blurb on just
how to get that set up and I want to say it took
me all of 30 minutes to get everything up and running, and I think maybe an hour
to get the SSL certificate. It’s crazy easy. And I recently ran a lighthouse
audit on my portfolio. And the score, let’s see if it’ll show up. You can see right there,
97 in performance. This is simulated fast
3g, 4 times CPU slowdown. And the other audit I think
available is applied fast 3g. Same thing. I think that the applied one was at 94 performance which is still incredible. So I can’t really speak anymore highly of my experience in using Gatsby. And it was incredibly
positive experience thus far. I wanna build, my next project is building a blog using Gatsby. And it’s one of the main
reasons I’ve gotten interviewed. And also it let’s you a job opportunity. So I currently work as a
Frontend Engineer at Tagflix. And I was hired I wanna
say three weeks ago. So one of the reasons I got
the interview was because my portfolio stood out so much. So I owe some of that to Gatsby
because it made it so easy, I was able to just focus on, like what I said the
design and implementation. And that alone made it possible for me to stand out from the
others, and from the rest. So that’s it. You can reach out to me over here. Thanks. – [Linda] Thanks Nathan. Thanks for sharing that. And actually quick
question for you came in, and also for Tiffany, maybe we can just address this real quick. Just wondering how long did it take for you to build your site? – [Nathan] I can go first, it took me I wanna say like
I built it in a weekend. Right so, I wanna say
eight hours maybe total. Getting it really, just like all the tweaks and
getting everything perfect. It was just like I built it
in a weekend and that was it. So, it’s pretty quick. – [Linda] Okay, great. And Tiffany, how long did it
take you to build your site? – [Tiffany] For me, it took oh
a couple hours because I was using Contentful so
everything was basically, I used a starter and then
there was Contentful as a back-end so I was able to
just get up and running by entering a few things in
the Contentful headless CMS. And I was up and running,
maybe in four hours. So not too bad. – [Linda] Okay great, perfect. Okay, if you have more
questions for Nathan or Tiffany go ahead and submit
them in the question window. And we’ll either answer
them through the webinar or answer them at the end of
Jason’s next presentation so with that, I’m going to turn it over to Jason for some live demoing. Okay. – [Jason] Alright. So yeah what we’re gonna do next is we’re just gonna build a
portfolio from scratch. And we’re gonna just do a
quick little offering to the demo gods here that this
is gonna work out alright. So I have a just a simple site set up. I pre-installed all of my
dependencies to make sure that we didn’t run into any
network issues and other than that we have a json file that we’re gonna use for our data. So each of these is a project. We’ve got the name of the project, where we want it to live on the website. The URL where the
project is actually live. A path to an image of
like a screenshot for the project and a short description. And we’ve got two of those in here. We’ve got our images in a
folder alongside the json. And in our source folder, all
we have right now, is a to-do. So if I start this project, all we’re gonna see at the
moment is, once it bootstraps. There we go. All we have in here, is
this TODO to add code. So let me blow that up a little bit. And so that’s not giving us anything. So let’s make that actually useful. So the first thing that
we wanna do is we want to configure our plugins. And in order to load this json,
we need to do a few things. The first thing is we’re
going to use the file system to add, to actually read that json file so let me create a new file. I’m gonna call it Gatsby config.js. And inside of that I’m
going to export an object. And this is the just
the standard config for every Gatsby site, you’re
gonna have a module that exports and it puts out an object. One of the things that you
can put in this object is a plugins array and
we’re going to start by getting Gatsby source file system and we’re going to give it some options. And the options that we
want are the name and this is just whatever we want to call it. I’m gonna call it project
and a path which is the path to the data. So from here then we
need to tell the files how to transform the json
into actual information. So I’m also gonna use
gatsby-transformer-json. And after I save this,
if I restart the server, what we can see is that
if I want to go look at this data now, I have
access to our GraphQL later. So let me open whoops, localhost. Let’s go to GraphQL. And inside here, that’s a little too big. Let’s close this up, ‘cus
we’re not using it right now. And what I’m gonna do is
I’m gonna look at my docs. And so over here I can see
this all projects json. So let’s look at that. I’m gonna do allProjectsjson and it auto completes for me which is great. And then I’m gonna hit option
space to see what’s available. And one of the things
about GraphQL in Gatsby is that we use a format
that’s comes from one of the original things that
Facebook did when they were inventing GraphQL which is using some terminology from graph theory. So edges and nodes. Don’t think too hard about this. A node is the actual thing that we want. So edges are the connections like think of ’em as the relationships between things. And nodes are the actual thing. And then inside of this node,
if I hit control space again, I can see all the things
that are available. And I want, let’s say the title and let’s maybe grab the URL. And if I hit play, we
can see now my project, all this data has been
loaded from the json. But one thing that’s a problem
here is if I get the image, I can find it and like we can pull in a public URL, where is it? Somewhere in here. Let me start typing. There we go. And we have this public
URL, so if I take this public URL and I put it in here, we load this image but
look how big this image is. If I pull up the dev tools
and I look at the network and we reload this image, I can see
this image is 106 kilobytes. And that’s, it’s just too big
for what we need it to be, because what we’re actually
gonna be showing is more of, like a thumbnail. It’s gonna be much smaller than that. So the next thing we need to do is we need to optimize these images. Now we could do this manually. We could go in and we
could create a bunch of different sizes of the images but that’s a pain and Gatsby
will do that automatically. So the next thing we want
to do is we’re gonna come in here and we’re gonna add some plugins that will automatically optimize your images. So let’s add gatsby-plugin-sharp. And gatsby-transformer-sharp. So the plugin is what will
actually transform the images or what will actually process the images. And the transformer finds
image files and turns them into sharp nodes so that we can
access the different fields. So let’s save that, let’s restart. And what we’ll see in
here is that it’s going to start processing our images for us. So that when I come in
here now, if I reload, I have a new type. I can do childImageSharp. And in here I can grab, let’s do fluid because
that’s what we’re gonna use. And I’m gonna grab the source set. And so in this source set we
now have all these different sizes of images so from 200 pixels wide, so I can take this one,
let’s go over here. And look at it. So there’s the 200 pixel version. And then it goes all the way
up to this 1280 pixel version. And so I can take this and drop it in and this is pretty much the
original size, right? And so we get this whole array
of different image sizes, without having to rewrite the whole thing. And so with that we’re actually ready to start building things. So the first thing we
want to do is we want to build out a listing of our project pages. And we’re gonna do that by
creating a layout component first and so to save you from having to watch me write CSS I wrote
the CSS ahead of time. So I’m just gonna build
out a layout.js component. And inside of that I’m gonna
import React from react. I’m going to import Gatsby link… From Gatsby. And then I’m going to import our CSS. And importing that CSS just means that it’s gonna get applied to this component. So let’s set up the actual
layout component here. And React allows you to pass the children into any component. And that’s just anything inside
and so if we look at like, I’m gonna use a fragment here so we don’t add unnecessary
markup to the dom. But here whatever’s inside
of this react opening and closing tag, that’s what would be passed as children to react fragment. So we’re just doing the
same thing with layout. And I’m gonna put in a header, and I’m gonna give this
header a className of header. And we will make a link that’s gonna go to the homepage and that’s for my portfolio. And then outside of the header, we’re gonna do a main component. Call it className content. And inside of it we’ll put the children. And so what this means for
us is once we export this, we now have the ability
to wrap anything with a styled layout component that’s gonna include a header for us. So let’s just start by
looking at what that does. So let’s go in and we’re
going to import layout, from components layout. And then I’m just gonna
add that layout here. And we’ll wrap everything. And so now if we go back
and look at our homepage, we now have a header and the
code is a little more styled. So let’s make that useful. So what we’re gonna need to do that is we need a project preview. And this component is going to be pretty simplified here. Actually let’s start, yeah we wanna a project
preview that’s what we want. So we’re gonna do import React from react. And we’re going to import
Gatsby link from Gatsby. And then we’ll import Gatsby
image from Gatsby image. And we’re gonna create a
ProjectPreview component. And we want to export
default ProjectPreview. And the reason that I am
exporting default instead of doing the export default up
here is that we want that component to be named in stack traces. So I’m going to give this a
className of project-preview. And inside of it we’re
going to start by linking to the project and we can do
that by grabbing the slug. Which means that our component is going to need to get the slug as a prop. So we’re gonna put that up here. And inside of this we are
going to link to the image. And that means that we’re gonna need to have access to this image data. And so we’re gonna make sure
that gets passed as a prop. And for the alt, we’re
gonna use the title ‘cus you always want to set an
alt tag on your images. So we also need to get
the title as a prop. Underneath this, we’re gonna
set up a header and that is also going to link to our slug so let me just copy that straight across. And we’ll use the title as the content. Let’s put the description
down here as well. Which means that we need to also get the description as a prop. And finally, we will add an
actual link calling out that we want to view this content. And so instead of the title, we’re gonna say view this project. And let’s use a right arrow, okay. So now we have a simplified
project preview component. But how do we get the data into here? What we’re gonna do is
go to our home component, this index page and we
need to grab that data. So if you remember, we had in GraphQL this component or this query here that gave us all the things that we needed. So let’s write a query that’ll give us all the pieces we need. So we need the title, we need the slug, we need the description not the URL. And we need the image
and this will give us all the pieces that we need. We’re also gonna use a
GraphQL fragment here but let’s not worry about that
in graphical because there is a limitation where you
can’t use fragments. So we’re gonna grab import
graphql and we’re gonna do what’s called a static
query to make this work. And we’re gonna grab that out from Gatsby. And that means that in here I am going to change this one so that I can
put some stuff inside of it. And we’re gonna grab our data out. Const data equals useStaticQuery. And inside we’re gonna
make a GraphQL call. And I added an extra letter
up there so let me fix that. And in here, I’m going
to do a GraphQL fragment, I’m not gonna go into
how this works today. But if you have questions
please Tweet at me, and I will help with that. Now we have our data and so
the next thing that we need to do is we wanna get our
projects out of this data so we’re gonna do data.allProjectsJson. Because the data that comes
back is this object so the data.allProjects.Json
and then we want the edges. So let’s grab the edges as well. Okay so now we’ve got those and inside, I can take this and we’re going to map over these projects so
I’m gonna do a projects.map. And inside of this I’m getting an object and that has the node. So we have an edges which is an array and that gives us a node. And I don’t wanna call
that a node because that’s confusing to me so me I’m
gonna alias it to project. And then that means that I can
set up a little function and we’re gonna map data here so let’s do title equals projectTitle. And there’s a reason I’m doing it this way that we’ll
see a little bit later. The description is gonna
be project.description. The slug will be project.slug. And the image data will be project.image.childImageSharp.fluid. And so this one’s a little
gnarly but that’s because we had to do all of this
extra image processing so we’re grabbing the image
but then we’ve got to go into that sharp node
that we created with the transformer sharp and
we want the fluid style of image which is a whole bunch
of data that we’re gonna use to pass into the project previews image tag. And finally once we have all that data, we can now use project
preview and I just let as you can see, vscode just
auto-imported that for me, which is a wonderful feature. And I’m going to then
give it the data it needs. So it needs the title prop. It needs the description prop. It needs the slug prop. And it needs the image data prop. And once I’ve saved this, assuming I didn’t make
any typos, oop I did. Components project preview. Did I spell something wrong? Okay let that run. Alright I have screwed something
up, can’t resolve react. Oh I have a typo. I put a space in front
of react so that’s fun. Now we’re compiled successfully. Let’s go back over here, reload. And now we can see our
project so this is wonderful. We got exactly what we wanted but, if I click on this you can see
that page doesn’t exist yet. So we need to make sure
that this page exists. So let’s go back in
here and we are going to create the actual project pages. Which I will do by first, we’re gonna create a project component. And that project component is going to be relatively similar
to the project preview. So I actually could just gonna
start by copy pasting this. And I’m going to rename this to Project, so we’ve got project there. And then I’m going to swap out, we don’t need the slug anymore. Because we actually wanna
link to the project and so I’m going to simplify
this out a little bit, let’s drop these pieces. We’re not gonna do the link
to the project anymore, we’re just gonna do an image of it. And we wanna put the heading up top now, and we’ll make that an h1 since this is now a page about this project. And we don’t need it to be a link anymore. So now we’ve got a heading with our title, we’ve got an image that
just shows the project. We’re showing our description and then instead of linking to the… The slug which would be
the page on our website, we’re gonna link to the external URL so that you can view this project online. And finally, because we
want a way to get back, let’s create a backlink. So we’ll do a left arrow and
back to all projects, okay. So this is now ready to be used but again we have to get data into it. And the way that you get
data into individual pages so we want this to be a page at like our site.com slash project one. And that means that we need to do a little bit of programmatic
page generation. And that might sound scary at first but don’t worry about it. So the first thing we have to do is set up a template and
we’re gonna call this template projects or project.js. And inside of it we will
import React from react. We’re going to import graphql from Gatsby. We’re going to import our
layout from components layout. And we’re going to import
project that we just created… From the components. So the first thing that we need to do, is we actually need to get our data so I’m gonna export a query, it doesn’t matter what this is called. Gatsby is just gonna
look for a graphql query. And inside of it we need to figure out how to get individual posts. So I’m gonna come in here
and let’s do this again. So let’s look at how to get a project so I’m gonna do projectsJson and I want the slug. And we’re gonna make
sure that slug equals and let’s just start by saying project one. And inside of that, then
I can get the title, the description, the URL, and the image. And again we’re gonna want
the child image sharp. Fluid and to start we’ll
get just this source. Okay so this gives us our project but obviously we can’t hard code that. So what we’re gonna need to do instead is set up a query variables. And then we can use that query
variable here and that means that we’re actually gonna
need to define a query here. And so now if we run it
we can see project one. We get project two. And all we have to
change is this variable. And this is how it’s gonna
work inside of Gatsby. So first we start by
setting up this query. And now we have to figure out, how do we get that data into this slug. We’ll talk about that in just a second. First let’s get the template rolling. So we’re gonna do the ProjectTemplate, and that’s gonna be a react component. And it’s gonna get the data and that data comes from this query. That’s something that Gatsby does at build time kinda behind the scenes so you don’t have to worry about it. And then we’re gonna simplify
our data a little bit so let’s start by getting the project out. The project’s gonna be
data.projectsJson, plural. And then we’re gonna extract the title. So the title is project.title. The description is, Can I spell? I can. Project.desription. The image data is going to be project.image.childImageSharp.fluid. And finally the URL is
going to be project.url. And we can return, whoops. Our component so we’ve got a layout. And inside of it I’m going
to use this project that we created and we’re
gonna feed it the data. Title and… Description, whoops. Description. Whoops, that’s what I wanted. Then we can feed it the image data. And finally we can feed it the URL. So now we’re ready, let
me export this as well. Export default ProjectTemplate, okay. So this is now ready to be
used to build the pages but we’re not actually building yet. So let me go ahead and
get into our Gatsby node. Which is where we will build this project. So if I come in here and I create a new file, Gatsby node.js. I’m going to then exports.createPages. This one of Gatsby’s API’s. And it passes down a handful of helpers that we’re gonna use. So the first one is action. So there’s things we can do
as graphql, as Gatsby builds. Then it gives me a GraphQL helper so that I can make requests. And it gives me a reporter so
that I can put things out on the command line if I need to. So the first thing we’re
gonna do is we’re going to get the results of that
query that we wrote. Or we’re gonna write a
different query this time. And the query that we want
is just allProjectsJson and we’re going to do edges, node, and slug. And because remember what we need in this, let me close some of these. In the project here is we need this slug. And so we have to get that
into this template somehow. And so we’re gonna query that out here so that we can do that. Once we get that result, we’re gonna check if there’s an error. If there’s an error I am going to for now just print a
message and let’s see. There was a problem loading your project. And we’ll just make sure that it doesn’t go any further after that. Assuming there is no problem, we can then grab our projects
out and that’s going to be result.data.allProjectsJson.edges. And finally we can loop
through those projects.forEach and I’m going to again,
when we get the node. But I’m going to alias that to project so that it makes more sense as we use it. I’m gonna grab that slug
out and that’s going to be the project.slug. I can spell. And then we’re going to
use our actions.createPage. Now this one is singular. And what that means is we’re
creating a single page. So I’m going to create a
page at the slug which is what we want so that’ll give
us our site slash project dash one for project one slash
project dash two and so on. Then we need to tell it
which component to use. And we’re going to use, require.resolve is a kind of a built-in node
thing that will give us the location of a file. So I’m going to use this
template that we just built. Source dot. That’s why it’s breaking. Source dot template project. And finally we’re gonna give it context. Context is what actually gets passed in. And that’s what’s used in this query. So anything that gets passed into context, whatever the property name is
will be created as a variable. And so we’re gonna give this the slug. And that means that the
slug from the page or from the project will be
available in that GraphQL query. And so having done that,
we’re gonna stop and restart. And this will build. No errors, that means that
I didn’t typo anything, that’s always a good sign. And let’s go back out
here, I’m gonna reload. Okay so we’re close
but I missed something. What did I miss? I forgot to update this. GatsbyImageSharpFluid,
let’s try that again. And there we go, now we got projects. So each of these projects is now working, let me check for time, alright. So I am gonna then take, let’s assume now, this is all building from json. If I wanted to do more, I could just go into my data
here and I could add more data. But as you can imagine, over time that’s gonna
get a little cumbersome, it’s gonna be hard to use. And so what I wanted to show you, and the reason that I did some of that data abstraction a little bit weird, is because I wanted to show
you how simple it is to switch over to a different
data source later. And we’re gonna switch over to
a headless CMS called Sanity. It’s at Sanity.io if
you wanna look into it a little bit more. I’m not gonna talk about how
to set up Sanity at all today. Instead I’m just going to
set up a plugin to use it. So to switch over we can drop
everything that we’ve done, because we’re not gonna use it anymore. And instead, we’re going to
use the gatsby-source-sanity. And I’m gonna give it some options and the options that I need. I set this up ahead of time
so I already know these. My project ID is that and my
data set is called production. And that’s it, this is ready to roll. But we have to change out our GraphQL queries to make this work. And so instead of setting up
a json, this is now going to, it’s gonna give me a
bunch of errors but that doesn’t matter ‘cus what we’re looking for right now is the GraphQL. So if I go in here and I’m
just gonna clear that out, ‘cus we’re not doing it that way. I’m gonna refresh and now I
can do all sanity project and we’ll get edges and nodes
and title and you can see we’re already, we’re
pulling in these projects. So I can come in now, and I
can make a couple adjustments. So there are a few things that
get weird and the reason that we abstracted our data the way we did will become clear in a second. So let me take a look at
the gatsby node first. So the first thing that we
have to do is the slug in sanity can be versioned which means that we want the current slug. Once we get the current slug, we’re gonna do allSanityProject. And then down here, I’m
also gonna change this to allSanityProject because
we changed our query and I want the current slug instead. And that’s literally the only change that we need to make to get that to work. So then I’m gonna go in and
change the same thing in my queries here so I’m
gonna do allSanityProject. And the slug we need to be current. And instead of being at sharp, it’s going to be GatsbySanityImageFluid. And down here we’re gonna
do allSanityProject. We’re gonna switch this
out to be the current slug. And we’re gonna switch that out to be the asset instead of the sharp image. And let’s do the same
thing in our template. So we’re gonna do SanityProject, and let me make sure I get
this right because this is the current slug now. And we want to swap this
out for assets and this is now sanity image
instead of sharp image. So we’re going to do sanity project, we’re going to use the asset. And down here nothing else changes. So assuming that I have
done all of that right, what we should see is now
with just a few lines of code change, we’re now pulling in, whoops. Oh I have to stop and restart because I rewrote the Gatsby node. So let’s restart. Okay, let me go back
here, we’re gonna refresh. Oh no, I broke something. And what I broke is gonna
be in gatsby node here. And I wrote slug slug
instead of slug current. Rookie mistake. Alright so let’s jump in here. We’re gonna refresh. And now we have our projects
loading in from other CMS. And so if you wanna see
more of how this works, all the code is up online. It’s at gitbuh.com/demo-gatsby, whoops. Gatsby portfolio. You can go to take a look at that code. I have each section, I have the start which
is where we started from. The finished json powered project and the finished sanity powered project. Please take a look, open
PR’s if you need it. Otherwise, that’s all I got, so I’m gonna hand it back over to Linda. – [Linda] Great, thanks Jason. By the way can you copy
that URL and put it in the chat window for everybody? – [Jason] You bet. – [Linda] Great. Okay, thank you. Well we’ve had quite a
few questions come in as Jason’s been doing the live demo and I know that Sam and Kyle have
been working to answer those. There are a couple that
I wanted to highlight and then I’ll leave it open to Sam and Kyle to highlight any others that they think or maybe reoccurring themes. One was a question around perhaps
working with you Jason and it reminded me of the
pair-programming program that we have. If you could just take a
minute to talk about that and how somebody could get more involved. – [Jason] Sure, yeah if you wanna get more involved you can go
to gatsby.dev/pairing. And we have instructions on, did my internet just quit on me? Hello? – [Linda] No, you’re still there. – [Jason] Oh, weird. Okay so apparently I broke that. Let’s go into contributing
and you can find… Pair programming, that’s what we want. Pair programming, let me
post this into the slide. And that means that you’ll be able to pair up with a couple of us on, you’ll pair up with somebody
for an hour on kind of any Gatsby related
questions that you have. Another thing that you could do is I do a weekly livestream
on Twitch where you can come follow along as
we build out something new. So on tomorrow morning,
I’m gonna be working with Aaron Parecki from Okta, we’re
gonna add authentication. I’m gonna do something with
Kent C. Dodds for writing tests. We’re gonna do some real
time stuff with Asura, we’ve got all sorts of fun
stuff coming up, every Thursday. So you can head over to
Twitch.tv/jlengstorf and hit this, there’s a follow button on there so that you get notified when that goes live. But it’s every Thursday, 9 A.M. Pacific. Otherwise, yeah, you could
always hit me up on Twitter. I am at jlengstorf. And anytime that you have
questions you can always send me a message and I’m happy to
do whatever I can to help. – [Linda] Great, thanks Jason. I also saw a lot of questions
come up around themes and does Gatsby have something
around theme-ing? And so I’m hoping that either
Sam or Kyle can take that one. You’ll just have to unmute yourself. – [Kyle] Yeah I’ll take it. So yeah, so we’ve been working
on adding theme support for the last six months or so. And there are a few members
of the Gatsby team who are working full time on it. And making a lot of great progress and… Yeah so it’s still in experimental stage, we’re still playing with
different possible API’s, and how they’ll work exactly. But if you’d like to dive in,
we have written a number of blog posts that’s on
the Gatsbyjs blog that you can check out to kind
of familiarize yourself. Also Jason actually has done a great… Livestream with John Otander who’s one of the people working on the Gatsby team. And you can check that out too, to kind of familiarize with how it seems support’s gonna work. Yeah so they’re very exciting and you should definitely check them out. They are experimental so we don’t recommend using
them for production stuff. But yeah if you want to play
around with them and get going, we’d love to have you
participating and kind of figuring out how they’re gonna work. – [Linda] Great, thanks Kyle. There was one question that
came up for Nathan that I wanted to get to, but also I’m sharing
my screen real quick to make sure that everybody knows
where to go to get started, building a Gatsby website. Just go to gatsbyjs.org
and from there you can, there’s a quick link to get started. There’s links to talks and tutorials so that’s how you get started. So Nathan, one question came up for you around what did you use for your animations for your portfolio site? – [Nathan] As far as
I can tell I only have one animation and that’s an
arrow that’s kind of floating. I just used CSS keyframes. And the clickable interactions
between my projects, that’s just all JavaScript. – [Linda] Okay, great,
thanks for clarifying. And then I wanted to pass it over to Kyle real quickly since you
and Sam have been kind of triaging all the questions
that have been coming in. Were there any other
consistent questions you saw that you wanted to call out? – [Kyle] There’s a lot questions about kinda getting started with Gatsby. And so we always recommend
that when you’re jumping in to using Gatsby that you
go through a tutorial. It introduces you to
the basics of React and just the basics of using Gatsby. And it’s kind of a great introduction into the Gatsby ecosystem. – [Linda] Great, thanks. And Sam, any other questions
you wanted to highlight? – [Sam] No. Just encourage you if you’re thinking of redoing your portfolio site, you have a couple great examples
of great portfolio sites. What one of the questions
that came up was, one of the questions that
came up was well I’m not necessarily a designer but I do want a build a portfolio site. And I thought that was a great question. And so the question is,
well what should I do then? And I think there’s a couple of different options so we have a… We have a starter library
as well as a site showcase. So the starter library has, you can go to the starter library at
gatsbyjs.org/starters. And see some portfolio site
starters that you can get started with if you want to use those. And those, so you can start with the code, with particular designs. Let me, and you can also go to the site showcase at
gatsbyjs.org/showcase. And also you can filter
for a portfolio there. And you can see some
kind of inspirations if you’re looking to get
inspired for like a design, you can go to like 100 different
portfolio sites there so that’s a great way of
getting some inspiration. – [Linda] Great, thanks Sam. And one question came through about doing a Gatsby events in Europe. I know there are community
organized events in Europe and also we will be doing a Gatsby
Days conference most likely in London later this year,
probably in September timeframe. So we’ll let everybody know about that. Also if you wanted to
view the recordings from our Gatsby Days conference in San Francisco area last December, those recordings are also on
our website at gatsby.js.com. So with that, just a reminder
that this webinar is recorded. We will send the link
to the recording out to all the registrants later today. And that includes closed
captioning as well. So if you didn’t catch everything
the speaker was saying, that’ll make it a little
bit easier to catch that. So thanks so much everyone,
remember to go to gatsbyjs.org to get started on your portfolio site and then we hope you can join
us for the next webinar. Thanks all.

2 Comments

Add a Comment

Your email address will not be published. Required fields are marked *