Front-end Stack — Gatsby, Contentful & Netlify | Luis Fernando Saavedra Meza | Skillshare

Front-end Stack — Gatsby, Contentful & Netlify

Luis Fernando Saavedra Meza

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (25m)
    • 1. Introduction

      0:54
    • 2. Requirements

      1:24
    • 3. Get ready, set

      2:11
    • 4. Going static

      6:02
    • 5. Full of Content

      3:55
    • 6. Pluging things

      4:10
    • 7. Connecting the dots

      2:28
    • 8. Deploying

      2:46
    • 9. Good bye

      0:46

About This Class

The front-end web development world is ever changing. There's always something new to learn and keeping up can be overwhelming. In this class you'll add GatsbyJS, Contentful & Netlify to your stack, three technologies that are being used by many because of its power and efficiency.

Transcripts

1. Introduction: brother with development work is ever changing. J query back. Would you react? Web? Brosius is rough. You over there. So many things to learn Remember the world A final Junior waas html CSS and JavaScript. Hello. My name is Fernando and I'm a web developer. I think building once for five years and not once have I still learning. Being in front end Web developer means me a jack of all trades and not we knew framework. Some labourers coming up almost every single date keeping over this new thing all just gonna be overwhelming for your braids. You're rebuilding. It works like got to be comfortable. And Italy by the end of this class, you should feel confident enough on this technology to integrate them into your daily work . Let's take care of some of those things. A lot of finger, Julia. See you, Nicholas. Um 2. Requirements: Hello again. Congrats, Seeker. Before we have any for I want to make sure that we're on the same page. Will be using someone related concepts rentals, but you need to be familiar with in order to completely break ready. Here's the politest. Get the version control system. If you don't have giving stall or don't know what it is or how it works, you can check out this tutorial from inflation. No. Es the script runtime Berman. You need to know that you are installed during your NPM the back of my letters. MPM is still with no Js but during supper, some cool features get out of every second service for depositors. You don't have an account already. You can sign up here, react They were firmly you'll buy Facebook. But which got me and many other tools you don't know react. I'd recommend you go through official tutorial time this time 48 on how it first que el little type of language and signed by Facebook. You can read more about right here and here. Yes, you mostly estates is you certainly have to know there is a very basic supplies will, even if you don't know that I recommend you for a lot since kosher or in words, that's it. Once you have everything ready, I'll be waiting for you in the next list somewhere we re creating the break hung learning but on the first team in the next month. 3. Get ready, set: Welcome back. Now we have everything set up. Let's get into it really is. A website will be creating for a very fictional friend, Malcolm, but he's a freelance copywriters looking to showcasing his portfolio online, So it's a very much interview official intelligence movie, so he would love to use his skills to look at. I would ask, Let's start by talking about Gatsby that Lisa Static side Generator for react. Using its rich content. Logan Ecosystem We conserve data from content management systems. Markham. On that basis, they got speak. Where is the Zeta? Using refuel and compulsive replication into static assets, which are faster load on recording the specials, however, technology mean that we can deploy our website generally anywhere, including Amazon Middle. If I get your pages now with sage and many more in order to create a website, we need to tell the command line interface. So open up your terminal and type Jarrett level at Gatsby Klay. If you've ever used human generators, you'll be familiar with Get me starters. Is there basically community pretty fine boiler plates that he uses to kick start no breaks Now we created them a website to see the contents of the starters. We create a website using the Command Gatsby new, followed by the name of the website. It's gonna take a while, but after it's done, remember to see the into the website. Using the Command Gatsby develop, we can create our development server that allow us to see the changes we make to the cold in real time. Now we ve opened your browser or local. Who's put 8000? You should see get with welcome page. As you can see, it's a fully working website and it even includes links between pages. We just went from nothing to a full working website in just a few comments. In the next lesson, we'll take a closer look at what it can be. New starter thing did first, and we'll build our website. On top of that, it's either 4. Going static: hello again in the previous Listen. Well, it gets rebuilt the whole website first. Now it is time for us to do the heavy lifting. If you open up the operating your favorite 80 tradition Steve, Pause Fuller structure. That can be great for us. Inside the public folder, we can see the index, the regional, which is where Gatsby will inject our application. In the search holder, we have components, riots, rampages. These are the basics of every website. Components are reusable pieces of code that our share across the website like a header which is used in every single page. You can think of it as a share structure among pages. So, for example, in these whips, like we have a header that will be share on the 40 for and expand complementary pages that that's great for us. Notice that instead of using anchor tax, we use a link of boning that got me provide to navigate between pages. Next, we have the cats be browser configuration, which is where you would define metal company here the behavior and respond to events of the browser. They got three configuration file is where you place site configuration options like the title and Pat prefix. But here you also define the planning that you'll be using like this. React helmet playing, which is used to define meta data for rich layout. He got to be a CSR configuration file is where you would find allergic for a server side rendering website and finally, the package to Jason, where we can see The Gatsby commands that are available for us. Now that we have a better understanding on the predicts structure, we can go ahead and modify some. If you modify the contents of the index page and give you that saved, you should see the change is applied to the browser. Okay, now let's dive into the race I have created. I have account where you can find some starter falls upon, which will be built in the break. You can also find the completed break in here if you need to take a peek at the code, go ahead and cloned. Operate in your own computer. Don't forget to city into it and open eating your favorite later. As you can see, I already created some components that we'll be using Accuracy website now. The first thing we need to do is going to the index layers and apply some of the base tiles that I've included in the server files. Next, we're going to give. Besides on meth attacks, let's give it a description on some key words, we can also get rid of the hair as we won't be using it. Now we can open up or terminal on type gets be developed and their cement right. Don't forget to install the break dependencies. Since we cloned the prick, we need to do this before we can start the development server. Okay, Now we trade again. Andi built so you can open up the great in your browser and it should look like this. We can also get rid of these deep and replace it for a container. We will also build the section where contact firm will be placed just in case you don't remember how the looks. Here is the final version. Now I've already created the contact form for you on bacteria in the component. There's nothing special in cure except for these data nettle. If I equals true attribute no. If I come with firm handling from generality and all we need to activate it. It is actually getting their phone. We'll talk about it later when we get to deploy the website. But for now, all we need to do is important component in our next layer on places below the partner, we also need to optical component. It's a container element. These were DCs is that I find to be applied next up, opened the index page and lead. Everything will be creating the portfolio section which you lose some copy. With hair apart off and a link to the contact form, the portfolios include these little cards with the client name on the work that Malcolm has done for them. We interrupt this united with a class of for polio feature. I've already created the component for discards and it received the name on the work description. So we just need to remember the component and give it some fake. Perhaps we give it a safe on DSI the changes in the pro sir. Now we can duplicate this component many times to try to make me the final design. Right. Okay. Next is of look section, just like they perform. The block section has some copy which includes Ah Header and the Fire off. And instead of our portfolio feature, we have love posts. Look. Both component receives its look logistic partial off the Ural that is used to identify the specific post. It also receives a title and a punch line. Just like with the client card will be providing some pay data until we have the actual content. Be sure to also duplicate many times this component in order to approximate the final design. The postcard includes a wing component that should redirect to look post page. However we're getting before four page because we have not find the component that will be rendering Look Post. We only have the four or four page the index page on the page to that came with The Gatsby starter. Actually, we can already believe this follows we won't be using it will be creating this look most components. But first, let's head over to content full to create some real content to you in the next listen 5. Full of Content: welcome back injustice and will take a break for coding and get our hands into comfortable . Come Painful is a content infrastructure services that allow us to define our data schema on create content based on it. We can then consume that content through and maybe I you can sign up for a condom. Full using er you have are a Google account. Now, as you can see, content full integrates perfectly with a Gatsby website deployed. A little fight using this workflow gets me. Fitch is confirmed from the delivery FBI from Gundam Food and also content full three years weapon notifications that tells little fight to rebuild whenever there's any content. Once you're into your home space, you can go ahead and create a new one. The first thing you need to do is select that space type. A free one should be enough for these braked. Next, you have to keep it a name and then confirmed the creation of the space. We will then be prompt with the following steps for content creation. As you can see, we've already created a new space and then we can define the structure of our conference. The first content time will be creating is a client. This will be the information for the portfolio carts. Now we can let the different fields that we we need it for this company type. As you can see, there are plentiful options like next number, date and time, location, media, Boolean values, Jason objects and references. And I go ahead and select the text field for the name of the client. The field I d. Will be used for our application. Crazy. Create button on that We have to the same for the work description. Now we need to create the content type of the low post we need to create feels for the title punchline. Really great content, Kober Slow and category of the movie. We can use the short text field for the title on punchline. Their release date should be a date and time field, but we can Confuse agreed to only display the date as we don't care about the specific time for the content we need to use a long text field is we provide us with that market on a teeter. We can use a media feel for the cover of the movie. This looks should also be a short X fields. And finally, for the category field, we can use a short dicks field and like the least attribute as each category should be its own body that we really to create content, so go to the content up until entry. From here, we can select the type of content that we want to create well being with the clay and entries. As you can see, these are the fuels that we have previously defined, and all we need to do now is fill them. I hit publish. I'll make sure to include a document with dummy content in the class resources so that you can speed up the content creation like this. Now we have all the cranes. We can go ahead and create the block post, as you can see, even the date armed, um on media fields are intuitive and easy to use. The media field is bullish independently off the post, but it gets linked automatically. It allows you to upload different type of file from different sources. Finally, the category left field requires you to separate each value used in a coma that we hit bullish and I'll create the rest of the gun thing at super speed. Okay, now, in the content of you should be able to see over client amble of posts. You can assign them different statuses. Bullish change dropped on archive. Likewise in the media top, we can see all the assets that we have upload in next lesson, we learn how to get all these content to our got the website, see there. 6. Pluging things: Hello again. Now we have content. We can use search Bluewings to tell Gatsby to fetch it from comfortable. We'll be needing some A P I keys from our content for litigation to go ahead and grab those from sittings. We're replacing this credentials in an environment configuration file so that we don't make them up with our websites. Coat local and content full space I D and content Full access Token. Now we need to tell the cat resource constant for playing, which is used for pulling content types, entries and assets into got different content. Full spaces using graphic you'll so open up your terminal and type journey at Gatsby Service content full. Next. We need to configure it in our Gatsby configuration file notice that will be needing our space i d. And not stoking that we have defined in our environmental configuration inner city that were stolen. Library using journey at the end will require it until he to load our environmental variables so that they're now available. Notes Process that now we can query or constantly profitable. Initialize your developments for reducing the Gatsby, Develop command and open your browser on local host Port 1000 slash underscore graft You well is your websites craft? You'll play around in here You can write, validate and taste rough. You of course, it will connect wherever serves you have defined in They got the configuration file one of its cool features of the completion. So, for example, here we can query for all content, full assets, all content for clients, all content for blood posts, which corresponds to the content that we have published. Start by pitching the clients data. We'll be needing the ages, which we can think of as theory containing individual notes or client objects from each of those will. Need a name on the world description Hitter on bottom and you should be able to see the data that come tenfold return. Now we can copy this query and creed secure Linton or index speech. Now we need to look through each of these client out to create line card components. If you remember Paul content. Full Klein Built bridges is an array of notes which represent each client publication. Now we can use the notes information for a client Car properties be sure to also include the key for a looping component and data is not defined hope. That's because we forgot to tell Gatsby the index page should receive a data prop. Now we can see all the claims that we create in content, full interprets it. Let's go ahead and do the same for the look posts. Now we re fetching for all content. Full block posts will be needing, alleges Ari containing notes off which we need a title. Slow release date category a cover that is a file which we need that you are well on the content object of which we need the actual content now, firstly, and you should be able to see all the blood post that we created, not these other release date is in a lever. Inform the one we need for the final say we can use graphic us to information arguments to give it the look that we need without having to transform it in our websites. Coat also noted that the content is deliver to us in plain text, but we published it using Markham. We can install the Gatsby Transformer remark blowing, which is used to parse markdown files, open up your terminal and install it using John athletes from former remark, Be sure to other, to the Florence least into our Gatsby configuration on to reload your development server. Now we can query for a child markdown remark of which we actually need the html GOP. These greens are index page in which actually will only be needing the title on the punch line. And now we can look to each of these ages just like we did with the client cards. Actually, we also need to fix this love for a post card component. Okay, now, or index pages ready in necklace. And we're learning how to programmatically create pages for each of these low posts to you there. 7. Connecting the dots: Hello there. In the previous lesson, we caught our portfolio and look close to the expectation. But right now, if we click in a block post, we get this for for error message. That's because we have not created both. Just we only have the for four and index ones. In order to hack into that this page building process, we need to use the note computer aeration file. We'll be using the park particles we need to require. It will be exporting the create pages metal for Gatsby two years on. These methods will receive the graphical function as well as some found action creators off , which will need to create page function living a returning and new problems inside of which will be creating a reference for a look close templates and will be quitting for the most. Using the same quarry that we build in the playground. We reject the promises that Query results has some errors, otherwise will live through each of the note degree and your page. Using that speeds create page method, we're going to give you the post locus a pup. We'll be using our block post template as the component to render it well to give it some context, which in this case is every property off the post after all of these will return. If we reload the developments River and open the browser, we should see that Gatsby created Look both stage for each post. Now we can go ahead and fill the template pitch. Remember the context later that he passed to these components? Well, it will receive it inside of a pop context object so we can restructuring the facilitate access to the properties. We'll grab everything in deep with the blood post less, and we should also place holding to the helm. Pitch look. Post details contained the movie in for, Like title at Avery's and release date. He also contains the cover of the movie A for the content of the boats. We have a punch line on the parts markdown content, which will insurgents using that dangerously said Inner HTML attributes this sounds, then yours by sight to remind us that the injecting nation well could be used for cross site scripting it, Lex. Now we can open the browser and it would leak in any post. We should see the corresponding love both page all right, look like we're pretty much done here. In the next lesson, we're learning how to deploy our website to nullify. It's either. 8. Deploying: all right or west. I just read to any place assignation earlier. Gets me, compiles our website to study files can be deployed nearly anywhere. Occupies a hosting service that allow us to deploy our site in seconds. All we need to do is connect a repository at some bill settings and then we can be played a website. If you don't have already, go ahead and create a little fire camp. I recommend you use the kicker People of orbit bucket signing up as we were pulling the code from one of these services in the side panel, please. The new site from gate to get started. The first thing we need to do is connected. They keep provider that host our sights, cook everything. We pushed to the repository. Little if I will create a new build. Andi played for us. The second step is to select the repository from your provider. And finally we configure the deployment settings like the branch will be deploying. In my case, this is the completed parade French Not is that identifies is smart enough to fear that we're playing that gets me website. So it already computer, that gets me Bill command and the public directory first. Then we need to other Ameren mental worries ultimately, by remember or don't and filed these files should never re part of a poorly repository. That's why we need to tell Notify about these variables. Once we he deployed quickly presented were Sites Overview panel, where we can see that the deployment is implores. From here, we can set up by custom the main uneven secure side with https. We can also see a history of deployments on forms of missions that have you received all the cited successfully deployed. We can visit the unique you are allowed in Italy by provided to visit our site. We cannot write a beating for this is the default scream for form submission, but you can go to my site. Following that, we fight the communication. Now we can go to the form panel in our sights dashboard, and we should see them in such that weekend. We're pretty much done now, but we're having coffee or Netley fight to rebuild our website when we create new continent content. For for that, we need to go to build and deploy under settings and create a nubile hook which will call content full book. Next. We need to provide a content whole space with this Europe so that we can notify Nettle five . The country has been modified and indeed to create a new built in their home space. Like they wept, cooks link on her settings. We can have a weapon mentally or we can use the complete There are provided for us. We pay the euro. Hey, great weapon Now we can try police in new content on the new deployment should be triggered in the notify passport. Once it's done, we can rely on our website and see the new content is all right here. 9. Good bye: congratulations you've made. It would be no water. Right now. You should be able tow three new motor adultery or what, people? The wind chills it. Have you been following along? You should now have a full working with that way to read the one for Malcolm one for yourself or something else entirely. I encourage you to share it in the brave section. We all want to see what you came up with. You are now ready to take the training wheels off from here on. You should feel something into the deeper into reactor. Angra field deserting will use the road used to build amazing parades. And I'm confident. But by building things you can get to mustard in while building a portfolio of your own. All right. Thank you so much for joining this list. If you have any doubts or want to say hi, you consider me an email or reach me out through Twitter. I've been looking forward to hearing from you. See you