Gridsome - Static Site Generator for Vue

what's up guys Andre here and today I'd like to take a look at building static sites with grid 'some and view if you're familiar with cats before react grid some takes heavy inspiration from the Gatsby project what separates prism from other static site generators is its graph QL data layer which pulls information from any data source whether it's an external API a database or a file system all your pages and components can access this data source which then eventually gets converted to static files so check out this diagram here in the how work section if you want a diagram of what I just explained here are our data sources which can be CMS's local files or api's and you can do that with just like say standard Axios or you can use plugins which we'll take a look at later in this video this gets pulled into a graph QL data layer which is available in our app here and then eventually it gets generated to static HTML so this will become more clear as I go through examples in this video okay so let's get started and let's see what we need here we need to install the quiz some CLI tool which I already have just do this and then we can start off by doing grids and create and I'm gonna do this and let's do this and I'm gonna call it grid some example ok that's done let's go into it and it's run great some develop actually let me open up in my editor first and now I'll run get some develop okay so here's the boilerplate we have a home page in the about page and that's basically it and two external links and an image okay so let's take a look at the default file structure here so we have some configuration which we'll take a look at when we install some plugins and we have a server here which we'll also take a look at to load external data through an API we have this source folder and this should feel very familiar if you use Knox or even just a few so I have a components folder where all your reusable components go you have a layouts page which pages can extend from and we have a default layout here and here's the default one which has these links and we have our pages here again we have two index and about and we also have this meta info which changes the title when you go to this page so about us is about us and index is hello world I think yeah hello world so hello world and it should be about us cool the quiz some config also has a site name for your entire site which you can change if you want okay so as you expect as we make a new page let me just duplicate the about one say team and we'll do a team here sorry team here and this should add a new route or new page for team and their lives and we can add it to our default layout if you want and we use G link to add router links so if you use view Roberts rather link if you used NOx it's not linked and in grid some it's G link so this is team team okay so there you go cool ok now let's take a look at layouts we have this default layout but you can have multiple layouts so I'm gonna make a new one here because we're gonna make use of another one later on let me do it the blog so I'm gonna call this blog and let's leave everything here will change later on we need it but just to show you how to extend this new layout I'm gonna add an extra link here just to show you working and for the team page I want this new layout so when I go to team it should have two links because it's extending from this layout so let's go to team and instead of layout we can make use of this new one that we created so we have to import that support it import let's call it blog layout from and then I get it from here this is source and components sorry no components layouts blog and it's at a component key let's add blog layout in there and now we should be able to use it so blog layout and add a comma and this should work so there your team has you can see that has to because we're extending from that layout so cool so yeah well make use of this later on actually let me show you global layouts so if you're reusing this across several pages then you probably don't want to do this for every page so there's a way to define it globally which is in here Minges you can actually see the default layout is being called globally being used look globally so let me just do this log delt so the blog and then we can add a new one for blog layout the log layout and now it is global it's like a team some of this let's remove this and that should still work and it does cool okay so with that knowledge we can make a simple blog so let's go back here and let's just add a new folder here so I'm gonna call it blog HTML because later on you want to use markdown so long HTML and let's just add a new file here called blog post one top view and I should just copied something from here we describe this so this is using the default layout and what everyone here blog post one and you change this blog post one and now if we go to blog HTML so this is gonna be converted to kebab case or - case so blog - HTML blog post one same with this blog HTML blog post one sorry did I name it Oh Andy yeah I did okay there you go you can also add images if you like let me just put in an image here okay so I just pasted this random image in the same folder as blog so let's go ahead and add that so let's put it right here just do image dot slash random JPEG log image that should work there it is you can change the styling so it doesn't span across this too far and obviously you can make more which I'll do here okay so I added two more and obviously you can go to them okay but now I want a blog role in the main page here so we can do that as well back to our index page we can add web site in an unordered list and we can do oh sorry I should be using G link Soji link to equals slash log HTML slash blog post one safe blog post one we can do the same for two and three okay and this should successfully linked to those blog posts and they do cool okay now this is perfectly fine if you want to do things manually but I want to take a look at issue more things so number one I want to be able to do this in markdown and we can take a look at some plugins to accomplish that and more importantly I want to take a look at the central data store with graph QL so if you don't know much about graph QL I have an entire series on it but even if you don't watch that you can follow along here and it will be pretty straightforward in my opinion so if you look at our development here a development server you'll see you can explore graph QL data at this URL so let's hit that and we have this graph QL playground and it really has all my queries from before so don't look at this start from scratch so like I said you have access to all of your data in this graph QL central store so for example if I do a query and I just want the meta data to do that and then I can query the site name and the site URL and this should work and there it is and this corresponds to this config so if I change this the graph QL will change so let me show you one more query just so you can have a better understanding so another query ever allows you to grab all the pages so if you go to all page and we can grab the information that we want so say for example the ID let's look the type and a path 3 to that there's all the pages so we just added those blog posts and we have the team index and the about cool so what I want to do is extend our blog to be able to use markdown and I also want that to be dynamic by dynamic I mean I want to be able to add just a markdown file and I want the blog role to automatically detect that so it's our blog role here automatically detected and added here without have to manually do it so we can do that by adding a few plugins and one of them is to go to the website one of them is the source file system which allows you to read files on your file system obviously and that's going to be able to read our markdown files so this will populate our graph QL store with the markdown files in our system and then we need this one too so we can transform markdown into HTML so to install them we can just do this something to this let me just stop this and I also want great some transformer remark okay okay that's done let's take a look at how to use it actually if you go in here I think there's an example of how to use both of them together okay so let's grab this everything here let's go into our config and let's replace this actually let's riad the site name grid some after cuz it's it's not there anymore so here we add that okay so we don't need this cuz empty and this is okay as default but what's important to us is this I think I need this remark as empty so let's just leave it here so the path is gonna be where our markdown files for our blog lives so we have to create this blog folder in the root directory and stick all our markdown files in there and we also have to define a new graph QL type called post which we will do and we have to add a template for it in our template folder over here so let's go ahead and do those things let's add a blog folder first here so I add a new folder let's call it blog and it's put some markdown in here it's a new file and I'm gonna name it the same thing as the other ones but now markdown blog post one MD and I'm gonna paste in some markdown which has different markdown elements in here so start off we need this llamo frontmatter which allows us to set certain variables for this specific blog post right now I only have title but you can add other things like an excerpt or a summary whatever you want to call it you can also add images in here like the cover image but we can just stick with title to keep it simple and everything else in here is just marked down just to see if it renders correctly or if it renders the correct HTML at least so I'm gonna save that and the save the config as well and it's gonna add two more just so we have a few to work with okay so now that we have this in our blog folder and the config setup this should now appear in our crafty well store so if i refresh this actually I have to restart my server which I stopped and now if i refresh this and if you look in the dark section you'll see a new one for all posts which allows us to grab all the posts in our file system so let's go ahead and do that and do all post sorry bear with me my computer is really slow right now I just want to get this part done and I'll cut it and try to make it faster so I'll post and then we have to do edges and nodes so edges is the array of data coming back and the node is each item in the array so this in this case it'll be each post so this will be a post title and that title is coming from that frontmatter yam oh we have even do other things like path and content so content will be the rendered HTML source to the path okay so let's try this okay so there we go this is information for all our posts in our blog folder so we have three one three right now it's in descending order by date I think too so yeah you can see we have all three there cool okay now let me show you how to get one post so I'm gonna leave this here and I'll just do one post up here so query and we want one post so there is a query for just one post and the parameter takes is the path and that path is just the slash blog and this the names of blog post one okay and we can retrieve whatever we want title and content okay so there it is so now back to our code we want to be able to render this graph QL type so we have to make a template like I said earlier so the templates folder here let's make a new one for post so as to be the same name as the type names of artists post sorry guys this graph QL Explorer graphical playground the when the browser at least is really slowing down my computer so what I did was take a screenshot of this I have this copied and we'll just go back to this whenever I need it so I'm gonna close this right now because I can't work like this and now my computer is magically faster okay so back here and let me just put that in here cuz we're gonna need that and let's leave there there for now and I have a screenshot just in case we need to reference that right here okay so we need a template and this is gonna extend our blog layout like we did earlier it's put a div in here and I'm gonna use the V HTML directive and just do page that post that content so this page that post is gonna be available to us when we make a graph QL query so this content is just gonna be this stuff returning so it's just HTML so yeah this is just gonna be in here it's just gonna be that rendered HTML like you see in here right here and I'll show you how to do the graph QL query in a second let me just self close that and for the script let me just and we'd have to do this but let's just make a consistent or everything else let's do just change the title the title is gonna be this page title so title in the browser here is going to be the title of the blog post and now to get that information from our graph key well query so this is the query and we want this information in our post view component here we can make use of something called a page query so usually in the component II of template script and style we have a new one called page query and here we can make our query so whenever I have in here grab this so remember this returns one post and we have to make a few changes here for the most part it's the same which we don't have to name it but let's name it and we have to give it a path variable and it's a string and it's required and now post is the variable I want available in this component so we're using it here and we're using it oh that's the only place were using it and post path and stead of hard-coding it we're gonna pass it in and that's gonna come from the URL and we want the title and the content sorry this is post okay so now if I hit the URL so in our case it's just blog blog post one this should be rendered out with the appropriate content so it's gonna have our blog layout and then it's just gonna render out this markdown in HTML and we should that we should have that set up in our plugins okay so let's hit it manually log blog post one and there we go you can see the markdown rendering correctly and you can see there's two teams here so there are I mean it's extending from the correct and layout and the same works for two and three to three okay so this is rendering correctly but there's no styles and it doesn't want that load yeah it's still a bit buggy so if it doesn't load on you just restart the server okay so I just want some Styles here so I did it I did this in my next video and it's going to use a library that it's CSS for github flavored markdown and we just have to we can use npm install' but the CDN is much easier so just go here and then you can grab let's grab the minified version and then in our blog layout we can import that in our style right here so we need to import it's at import I think yeah and do that anywhere else we want to add this so let's grab this CSS let's put it in this style section so let's put it down here and then we want to make sure you see that that I want make sure to wrap it in a markdown body class so everything we want markdown everywhere is going everywhere everywhere where we want markdown we want to wrap it in markdown body ok so go back to our code so you can see that it makes use of a slot here and then it goes to our post template and in here is where we can add that so right here as equals worked on body and now hopefully this is styled there you go so there's some nice default styles here cool okay now I want to make the blogroll dynamic so before we had this and we had to add a new blog post manually every time we made a new file but now since everything is in our craft key well it's a bit more dynamic and we can do it automatically okay so let me just bring back my graph QL Explorer it's gonna slow down my computer but just to show you the query that I need I really need a new computer ok so I just want the one that returns all the posts and we can use that in our index view so I'll post and then you know what we want edges for the array node for the actual item and then we want the ID the title and the path so ID title so this should return everything so like I said earlier this returns it in reverse chronological order which is what we want for blog posts but if you want to change the order you totally can you can see that there's a sort by argument here and you can do title and this should now be in alphabetical order so it is but it's in Reverse alphabetical order so you can change that by doing order ASC so that's ascending now it should be o th TW and that is the correct alphabetical order but we'll just leave it since this is what we want for a block reverse chronological order and that's the default so I'm going to grab this query and I'm gonna close this so it's not slowing down my computer and now let's go back to our code and it's go to index view and just like we did in post we can add this page query I'm not sure if there's AVS code extension that colors this it makes the syntax colored if you know let me know okay so index split here page query space that in and we can name it we don't have to but let's just name it posts and the important thing here is we add a variable here this is what we can reference it by so we can reference what we need by this post variable and now this is manual but the one underneath is gonna be automatic so I'm gonna do ul let's put an li in here and I'm gonna iterate over what we have so we have that post variable 3 for post in to grab that we can just do page that posts not edges like I said edges is the actual collection coming back or the array and I grab the ID so I grab the ID so I can use it as a key and then we can do a G linked to equals post node path and then and here we can just do post that node at that title okay let's see if this works we should have two lists now there we go so this is the original one and this is the new one and this should work there we go cool it just adds some h2s here to separate them manual and this is automatic say blogroll the one word I don't know log roll okay cool so just to prove to you that it's automatic let me add one more in here let me just duplicate this and say blog post four four four I should have just did multiple cursors but oh well four and now there you go there it is awesome okay just to drill this into your head I'm gonna do one more example where we grab data from an external source and then use that in our graph QL central data store so again you can use this using plugins there are several plugins and it's growing by the week or you can just do it manually and grab it from any external API which is what we'll do here so if you go into the docs I think there's a section here first server yeah server api i think and this only runs once when you build your project so the data we get from an external source in this case i'm going to use the reddit API it's not going to be dynamic every time you reload the page it's just gonna grab it at the time of building the project so keep that in mind so the first thing I'm going to do is install Axios because that's what we're gonna use let me stop this okay so let's run my store again and now if we go back into the docs if you scroll all the way down I actually know it's in this data store API Docs let's go there and here I think it's at the bottom here so yeah this is what I'm gonna copy and change up so let's put this into our server file slow down here grid some server I'm just gonna paste everything in here so we're requiring in axials with to make HTTP calls and now we're gonna get in some data from an external API so here is any API you want in this case I'm gonna use the reddit API because I've done that several times on my channel if you're not familiar just go to any subreddit in our case we're gonna go to all and add JSON to the end and then you look at the raw JSON coming back we can make use of that so www you ready comm slash are slash Oh JSON and we also have to add there's a query string to make it work properly so that's being saved in this variable and this needs a comma and this is doing the same thing as here when we want to add a new type to our graph QL datastore in this case it was posts in this case I want to call it a reddit post and the route in this case it was blog ID or blog and in the file name in this case I wanted to be reddit and then let's just say the ID okay so this just makes a type now we have to populate this type with actual data so as you can see this is iterating over the data coming back from the reddit API so I think by default it loads 25 posts so this will add 25 posts to this graph QL type so ID title and path I think the only one that's required is a title and for any custom fields you want and in our case we do sorry I'm going a bit quick here just cuz I want this video to be too long and I've already worked with the reddit API several times in previous videos but just look at the JSON coming back this and you'll get a better understanding of what I'm doing or at least for the reddit API part so yeah we have to populate types and only one is required this title but I'm going to add the ID and the tea path as well and custom fields I want a thumbnail okay one thing before we continue this data has to be an actual array but that is not the array I want to iterate over after I'd do structure it here the array I want to iterate over is again just look at the data coming back it's gonna be theta theta about children so if you look here data is the one going back data again and children is the array you can see here or you can actually destructor it some more using nested destructuring but I actually think that's a bit messy and I think this is a bit cleaner okay so I'm now okay let's do this first so this is gonna be post doc data no don't change my the thing I'm typing vs code so please post data ID there's gonna be post data title this is gonna be path like I said above I want it to be slash reddit / post that data that ID and the custom fields I want is post without data thumbnail and let's call it image or IMG post data preview images first one source URL okay so now if I save that and I'm gonna restart my server post is not defined yes that should be post right here okay okay so now if I did this correctly all of the reddit posters should be available in our craft well I mean just comment this out again it's gonna slow down the computer it's time for a new one and if you look here there it is so let's do already post and leave you want edges node and this will have so the title let's try title and it's just to title and ID we can also do the thumbnail or I'll just go for the image actually there you go this is the ID which we'll use in the URL and this is all of the posts current posts in reddit or that JSON okay so let me just show you the one where we do we just query one post because I'm gonna make use of that why don't you want to select okay so it's ready to post I believe yep and we want a path and that path is gonna be think slash reddit slash ID so let's grab this ID it should be reddit meet Tony and we can grab whatever we want so title and the path and the image let's work there we go cool so let's grab this lets close this because going down the computer let's make a new template in here where's my templates here let's call it reddit post that view you know I'm just gonna paste it in to save time this videos getting quite long I don't need this don't need this okay so we're just extending from the default layout and we are showing what we get back from this query which is what I just showed you the post for this specific reddit post and the path is coming in from the URL and we're changing the title as well so if I save this and if we go to a page so it was slash reddit slash ID and I think I have the ID in my clipboard okay I think that was it see if this works okay there we go and there is a huge image and you can you can set the max width on it but that shows you it works cool and now just want to quickly add what we did here so back to index view all we have to do is add a query that perhaps all the reddit posts instead of just the normal posts and we can totally do that but now we have posts here and we just want to add a new one called the reddit posts I'm gonna paste that in to save some time and this is the new variable available to us it's getting what we need here and then now let's just add the same thing we did here let's put it underneath this I'm gonna log roll I already have it copied yeah I'm gonna paste it in and it's exactly the same thing as we did up here iterating over this new variable we just got from the graph QL store and that should show all of the reddit posts and there we go and as we click on them if it is correctly it works awesome so I hope you have a better idea of how powerful the graph QL data store can be again this is not gonna be dynamic meaning if you refresh this new data is not gonna come in it only pulls it at the time of building the project so you can still make it sort of dynamic if you build like once a day or something and there's also a weight so that you can actually have this as I did dynamic view component so it does update every time we refresh it but at that point you probably want to be making a traditional dynamic web app instead of instead of a static site and yeah you can also you can also add a thumbnail here but I'm not gonna do that okay let's quickly deploy this onto net worth I so let me stop this and I think I have to make it a git repo okay example complete and I'm gonna use the github CLI so hub create and then get push origin master and the command to build it instead of quit some developer for development is just quit some build I can do that locally but you'll see it in action when I actually put it on a server so let me just login okay so let's have a new site to forget github and I'm gonna look for a quit some and it's this one as you can see I tried it already for my example project and the build command is great some build and the publish directory is dist and that should be it this should build in a minute or so a few moments later and now we can visit it and this hopefully should work and it does so here is different pages I forgot to take this extra team out but that's okay and we have our manual blogroll which just uses HTML and that so works and we have our automatic blogroll which makes use of the file system and markdown and that works and we have our reddit API which pulls from the reddit API also one more thing I want to show you is this with some starter blog which was just released a few days ago and it's an example blog which is pretty much what we built here but more polished and more features but if you go here here's the demo URL and it's very nice because he has a few blogs and also have support for tags if you click on it there it is and it's also this nice feature where you click on it and there's dark mode but I take a look at that and you'll see a lot of the things we learned in this video so there you have it guys we've managed to take a look at the basics of chrism to build our static site definitely a really cool project which has a ton of potential to become the go-to static site generator in view just like how Gatsby is in react please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one okay thanks bye [Music]

Channel: Andre Madarang

Views: 32,845

Rating: 4.9400001 out of 5

Keywords: gridsome, gridsome vue, vue gridsome, gridsome vue js, gridsome tutorial, gridsome static site, vue static site, static site generator vue, andre madarang, drehimself, vue js gridsome, gridsome vs gatsby, gridsome vs nuxt, gridsome vs vuepress, gridsome graphql, gridsome axios, gridsome vue graphql, vue graphql

Id: uF3K3IpRfhE

Length: 45min 26sec (2726 seconds)

Published: Mon Mar 04 2019