JAMstack Tutorial - Full site using Netlify & Hugo

[Music] hey there I am Bryan Douglas and I am here in my garage to talk to you about the jam stack and how to make Jam sack websites so before we jump right in and I tell you how to build a jam sack app I want to actually show you what actually building so what we're looking at here is this a simple restaurant website that has the basics of what you would see in a restaurant one being in a menu so we've got a basic menu here you can see different types of menu we got a lunch we've got a dinner section we've got prices on the right very fancy that's why we don't see any dollar symbols that's how you know how upscale this restaurant is in addition that we've got a drinks menu which you can see here as well as a simple about page so I'll just simple routings if you're very familiar with like modern web technologies and frameworks routings always built in so we're talked about how to do that in the jam and then in addition to that we've got a simple gallery where we can show off some different images and then finally we'll have a forum where you can actually submit reservations now we're gonna move over to showing you how to clone this site as well as talking more about what Jam stack is so I'm gonna give you a one-time gift and that's pretty much all of the code and for this repository now if you look in the description of this video there's a link and if you click that you'll be able to clone a version of this tasty tutorial you can also visit bit ly slash taste the tutorial either those two links will actually take you to this page which is gonna be a wizard on net LeFay com granting access to your github account will allow you to create a new repository based on the template that I provided here you can change the name or you can leave it as the same since I already have a version of this already saved I'm gonna head go ahead and change the name and once you click Save and deploy it will then bring you to a screen where it starts to build your site for you so once your site's built you'll see a screen just like this which is an elephant and here you can see one thing I want to point out which is the URL of where your repository was created it's gonna be your github account that you connected to net with five and I'm just gonna go ahead and tell you to go ahead and click that link and it should open a github repo with that code this is a repository that includes all the code you need but also includes a readme with more instructions on how to get this started so if you get stuck at any time you can actually check out my repository at github that calms class-b Dougie slash he go restaurant tutorial here you'll see the same code that you see in the repo that you you cloned except that now we'll have some branches where you can actually see the solutions to you each step so if you do get stuck all the codes gonna be available here for you to look at so feel free to leverage this if you if you aren't able to follow along or if there's an error that you cannot get past so that you have your own version you just want to go ahead and clone this repo a repo URL and calling it on the command line you now once that's done you can go into your repository and as outlined in the readme you wanted to do two things MPM install and then finally MPM and start running npm start with this go ahead and compile everything into a bundle and load your very own version of tasty licks freeze view this tutorial is actually based on the static site generator you go in based on statistics from static gem calm Hugo is the second most popular static site in ER and it actually has a pretty strong engineering culture and community around it supporting it now this tutorial also will be based on Hugo but it's gonna be based on a Hugo boilerplate that also adds an asset pipelines so if you're familiar with either the rails asset pipeline or you're comfortable with NPM and node packages you will find yourself right at home with this sexy dinner which is Victor Hugo which adds NPM post CSS and a bit of web pack to your pipeline to be able to manage dependencies now once you have cloned the restaurant template that will be focused on you will need this install Hugo and if you are on a Mac you can do that by brew install Hugo and if you down on the Mac you can visit the Hugo installing guide to find out how to install he go either on Linux or Windows systems as well now if you get stuck installing kedo please feel free to check out the the forums for he go which will be discoursed go he go dot io here is a pretty thriving community that will actually be more than happy to help an assist on getting your environment set up as well you can also reach out to me directly or check out in the comments of this video so i mentioned earlier in this video that i was going to explain what the jam stack is and i'm gonna go ahead and default to a jam tech org already says jam sec is this a way to describe modern web development architectures where it's based on client side JavaScript and then reusable api's and all that information can be found more about the jam stack from Jam Network where we actually have different examples as well as some resources too if you're interested in finding out more about use cases and how other people are contributing to the jam architecture but I do want to take a chance to explain a little more in depth of how they got here and so basically what we're looking at here is just this normal website architecture so we have a client and then you have a server and that server usually is not as simple as what what we see more the server normally looks like more of like a monolithic application structure so not only behavior what you see on the browser which is the client but underneath under the hood you have like a web server an app server API server as well as like a database and because of that all that content actually walks around with you whenever you go to host or deploy your site to the web so people can actually view it and I always like to use this this analogy of monolithic architecture is like this so back in the day when I was a kid which actually still sold us in the actual stores but they have the idea of putting peanut butter and jelly in the same jar this was actually pretty cool when I was a kid but it at the end of the day it didn't work out very well because sometimes you only want jelly and sometimes you only want peanut butter but in this instance you have to take both of them in one big scoop so when you go to the ploy a monolithic architecture site you have to deploy everything all together so then you have all these one-click solutions that have done really well but we found out really quickly those who have become really expensive so pushing the analogy even further I'm separating the two ideas of api's our backends to separate that from your Friday which is your client so in essence this is what the Jam is all about separating your client from your API are your front end from your back end and what's really made this real easy from modern sites that are built on JavaScript or even other language is that we've had a lot and Sergent of all these javascript build tools so we had grunt goal browserify NPM now it's kind of take it over as far as the scripting build tool of choice and then also web pack as well all these build tools are making easy for us to bundle our JavaScript node apps and there's something that can actually be hosted easily through static which brings me to the static site generator so now we're getting more of surges and Static generators back in the day we only had a handful now we have tons as we saw earlier in static gen calm hugo is number two but number one is jekyll and then Gatsby and middleman are both very very popular in the space as well as a whole slew of other ones and what they do is they take what we're very used to having the command line interfaces in the interactions and build sites really quickly but we could also take that that complicated setup and then bundle that into a static output so we have an index.html that can be hosted easily on a CDN on multiple servers on the web without the heavy weight of a database or our back-end following it around instead we we would talk to an API directly to gather our data all that to be said is that the site that we're building is gonna have a pre build structure so we are going to do complicated things we are going to talk to micro services and third parties solutions to do some of these nice features that we want in our restaurant app but we'd have a the idea of a pre build structure so every time we push to get we get the idea of having continuous delivery and it goes straight to our CDN which for this example it's gonna be nullify so we can continue to push on a regular basis and update and see those updates happen live without the need of keeping our database in sync or keeping our app server and sync at all the whole purpose of this video series is actually to show you how you can build modern websites and web apps on a structure where there's not actually a strong tie to backends and databases so I hope you enjoy and I hope you got a better understanding of what the Jam stack architecture is kyouko and other static site owners for the most part use markdown as the basics for rendering dynamic content on the page with this project nothing's really different we have a menu that lists a bunch of food items and we want to render that same counter on our page the problem at the moment is that our version of site does not have any sort of menu whatsoever so I can't go to slash food and see any food items because we haven't set that up yet so we're gonna go ahead and do that now and I'll be the first thing we'll tackle and if you haven't gone to the readme yet you will need to NPM install so once you've installed the packages using NPM you go ahead and run NPM start to actually run a live version of your site to view now we're using a tool called browser thing so it should open up the browser for you and you should see the live site ready to go so open up your text editor and find you could find that this the the structure of the code is actually laid out pretty nicely the project itself most of what we're gonna be doing is actually going to be in the site folder that's gonna be our content for food in etc the source folder is gonna have your CSS your JavaScript images and the the main video that you see on the back of the home page that's gonna be living here images are ready to be set up here and for the most part the CSS is a right delft or already done for you so you don't need to actually do any CSS in this tutorial so the config tamil is a place to tap into the menu system that we want to add to now if you're unfamiliar tamil tamil stands for Tom's obvious markup language it was created by the creator of jekyll another static site generator that's very useful all you need to know is that our menu is gonna be updated here so what I want to do is create a new route so I'm just gonna copy exactly what we already have here and I'm gonna go ahead and make sure that this weight is too so that way I'll have the about link but also have a link for our food route since I have this live updating in the background we can now see that we have food working as a route but when I go to this route nothing renders and the problem is we don't have anything in the food content structure so if I go back to our code I'll need to actually go into our site directory and I'll need to go into content and then here we'll need to create one folder and may call it food so I am personally using vim so I can do this straight from my VIP meta if you're using atom or sublime or something similar like Visual Studio code just go ahead and create a folder and this directory called food now that I have a food directory I can now create my first food item now each item in the in the the content structure is gonna be a markdown file and there's this concept within set excite generation which is called front manner and in this front manner we can actually denote details like date different things like categories which I want to distinguish this to be lunch and also have different types like roles all this information is gonna be available to you in the the actual description of the video so if you do want to copy and paste that feel free if you want to switch things up also feel free to do that but I'm gonna go ahead and save our content as is just by filling out this frontmatter and between the the triple dashes we should be good to go to see our first food item available for us to view so if I now click food I realize I still don't see anything and that's because I'll need to update our static site generator to understand that there's some changes available so I just went ahead and killed a server and I'm gonna restart that for us so we can now see our first food item available for us now go ahead and go back through this and see if you can now add a couple more food items so instead of just lunch I would go ahead and add some dinner items as well in addition you could also create some different unique choices and descriptions and pricing so take a crack at it at that and I will show you how to make this process of adding new food items much easier using a content management system which is going to be our CMS in our next video so adding the ability to update food on the menu dynamically was pretty straightforward but maintaining updates to the menu probably get pretty tedious as you probably have discovered first hand so thinking of a head chef or a kitchen manager and it needs to make updates under the menu on a daily basis they would need to either clone the repository locally or login to github to make changes and chances of that actually happening on a customer's end is properly pretty slim so with the current state of the project all changes have to grow through a web developer so there's a lot of solutions to handle management of contents and since we're already on the net laughs I trained and deploying our site there I'm going to recommend us use identify CMS to get to CMS connected you'll have to do just a couple things inside your project folder really need to go to site and then the static folder and inside here you'll need to add a new folder which we'll call be called admin once you create a new admin folder you want to create two new files and that'll be the kick fig gamal which is gonna be different than our config that Tamil file for Hugo this config that ya Milles gonna be very specific to the CMS and then you also want to add an index.html the contents of the config dot yeah Mel and the index.html are both available here under the net off ID documentation under the QuickStart tab and then under configuration now that we have the index.html I want you to first copy over the contents from the documentation into here so that way it looks for like so I'm back in the config that um I'll break the sound line by a line so this llamo file actually look very similar than what's in the example and the documentation with some changes but why my line I'm gonna break it down like so here is a section that's to tell us what back in we want to use by default Delphi CMS works with github out-of-the-box we're actively working in other solutions but for now we're gonna use github and I'm gonna point it to my repository which is gonna be my name slash the name of my repo it also wants to know what the base branch is gonna be now the CMS will work on any branch that you choose here so you would you want to check to see you whatever branch you want your live code to go to so this could be any like demo or staging my preferences master I'm gonna set this to be master here now the media folder we're gonna use for a future video but we're gonna set this now just in preparation because the CMS requires you set a meter folder for any images that you want to save through the CMS and since I already know I may use that I'm gonna set it for that and then finally we're gonna add collections now each collection is actually separated with this - and so I can have future collections hinton we could also have like a drink menu or we can have some sort of dessert menu as well but for now we're gonna have a all food menu and we're gonna set these labels now these labels are not gonna be set outside of the CMS you won't see the item you won't see the label food item outside the CMS but this is for the CMS to be able to present it visually and if you also know site content food is where we saved all our previous food items with their detailed frontmatter and this gives us rights to be able to save and then finally looking here these fields here all mimic exactly what we have in our front manner so these fields are looking directly at that front of matter and being able to save and one thing to note as well is that for supported meals we've got two default options one being lunch the other one being dinner and this is gonna be based on a widget so widgets are something you can look up and that will actually get in more detailed in a future video but this note that widgets are different types so we do have a widget for string list and text so those are the three ones we're to be using for now so I'm gonna show you exactly what the frontmatter looks like today which here for our oysters we do have date which we're actually ignoring in the CMS though it is something that does get saved every time I markdown file gets saved but you can also note that we do have categories for lunch and dinner we do have types which type is here but the label is here and I'll show you what that looks like in a moment but for now go ahead and commit your changes to CMS so go ahead and pause the video make sure you have you config that matches pretty close to what I have here and commit that to your master branch and I'll meet you back in a few seconds at the net nullify dashboard now back at my net will fly dashboard I can now visit the access tab to add an install provider we can do that from our github profile by going to our profile picture up there clicking settings and down here it says ooo applications you want to register a new application now I already done so here which is providing me a client ID and a secret a client secret now be careful not to share these secrets but go ahead and take that client ID and bring that back to nullify now back at the dashboard I can now install my provider based on my client ID in my secret and now back on my live site instead of adding all my content locally within my text editor I can actually now go to slash admin log in via github and I can view my CMS a CMS to be able to edit the food menu is great but it's almost pretty limited to only have a food menu now based on everything we've done so far adding the food menu to the CMS I want you to go ahead do the same thing by adding a collection to your config that yamo as well as adding a new link for drinks and I want you to add all this content dynamically through just using the CMS now if you get stuck on doing this feel free to look back at your config that ya mole in your CMS but also leveraged the net lo-fi CMS get our community who are ready and willing to help anybody who's looking for help with the CMS once you figure that I'll see you in the next video and we'll look at the code now you should have your CMS that looks like this it has food arms but also drink items available to look at and edit and if you took some time to add some different drink items you would have them look like this which is very much similar to what we have already in our CMS now you config that yeah mol would only need one more collection that copies exactly what we have in our food structure in addition that you did want to go I didn't go to your site and you can fig that top tunnel to make sure you added drinks to the menu so that way you actually do see it any menu when you go to your site live that's it hopefully you were able to get through that if you weren't let us know if there's anything edge cases also continue to hang out in the Gator community for any questions and concerns and help of your project so when looking for a restaurant to eat at it's always nice to look at pictures of food as well as what the place actually looks like to get kind of a sense of quality and if you can't even like it so having some images somewhere is actually ideal for our restaurant site and which is what I have here so as you can see so as you can see I have a carousel that I can cycle through and see different images of the restaurant and food and then it cycles back to the front and I also want to point out in the layouts folder we've already been using a structure to render our content but I didn't really talk too much about how this works and what didn't you go we do have a base layout that loads our index page and this is where we see our video but we also have a default layout structure which lists all of our content so in he go they have the idea of categories and each of these categories are separated by sections as well now consider sections being what we how we outlined our content and the config that yamo so each section being food drinks and also one that we haven't talked about yet which is the about page each one of these sections are being separated by a conditional so if we happen to be on that that particular conditional that is the section that we'll be displaying and we're doing this logic by just doing this here this conditional within this block so Hugo uses a go template rendering engine is which is what we see within these handlebars or if you may the curly braces now I wanted to point that out because we're doing one more thing for images which we actually I already give you the code here so you don't have to actually add the carousel directly the page when we add our first image it will actually automatically do this but I don't want this to seem like magic so I just wanted to point this out here's how images are being displayed on the page and above is how food and drinks are being stencil it on the page so if you have any questions about how this works or how Hugo renders templates please check out the Hugo documentation on taxonomy x' as well as listing and displaying data with that being said what's going to add some images first thing we want to do is go ahead and add a folder within our content structure called gallery now if you remember we have the config Gamal as well within the CMS architecture and here we can actually add another collection called gallery and here we'll have a label called Geller image and it'll make sure the look in the folder site content galleries so everything pretty much is straightforward as we've done before except for one thing if you check out here and our our field type we're using a widget called image and this is because we're no longer just gonna have static text to add to upload an image we're actually gonna upload an image in the CMS using their CMS image widget and since we've added a gallery to our CMS you can now see that we have a new item in our sidebar called gallery images and here you could either use the file uploader to upload image or you can drag the image directly onto the image widget and now you have an image and now I can click Save and see that wive on my say my site so now when I visit tasty Delphi comm I'm able to visit my gallery and see that my image is already there so does one more thing we haven't done yet to make this restaurant app fully functional to the way I think it should be and that's actually adding reservations now we created this form or I provided this form rather as part of the template so I should be able to submit my name my email and when I would like to show up at a restaurant from my reservation and because it's a slash contact I already know that in slash contact there's going to be a route ready and available for me which is why I'm going to the pages and then contact a folder so that I'm in the contact fault the contact markdown file I now notice that I have a regular HTML form ready for me to update it's also got some of the same markdown that we see on the page as well now you can see the only thing I've added is the net off ID tag name all I need to do now is save that push that back up to github which will then trigger a new deploy on notify and I'll be right at this submit forms so now once I go ahead and fill out my information and hit submit it's back on my dashboard I'll go back to the site dashboard for form handling now this feature is incredibly useful but it can actually be even more useful if you check out the notified documentation that will fire also has a cool feature which adds notifications to form interactions so every time a form submission happens you can send an email notification as well or you can send a slack of notification and if you already have some sort of web hook existing you could also add a web hook to either notify through a database or through some sort of lambda function as well so spend some time seeing how to integrate your form notifications with the form that we've just created totally hope you enjoyed going through this little project of mine creating this restaurant app I encourage you to take this same template and see if you can build another restaurant app build of different CSS our different styling go to restaurants in the area and see if you can apply the same sort of template to local restaurants and see if they can use a modern site without the native servers and be able to host that for free using a tool like nullify

Channel: freeCodeCamp.org

Views: 44,900

Rating: 4.8824811 out of 5

Keywords: jamstack turorial, netlify, hugo, jamstack, what is jamstack, jamstack tutorial for beginners, html, javascript, css, netlify tutorial, hugo tutorial, jamstack for beginners, jamstack course, freecodecamp

Id: NSts93C9UeE

Length: 29min 51sec (1791 seconds)

Published: Fri Sep 22 2017