Build a Blog With Next.js & Ghost

[Music] hey everyone my name is mahul and in this video we'll be taking a look at how we can build a complete but simple headless blog for your own website for your own personal websites or your production websites using nextgs as the front and go cms as the back end technology i also run a code damn youtube channel and codedown.com as a platform feel free to give it a spin you would be able to find all the links in the description let's get started with our project in this whole one hour we'll be covering how we can approach that and to complete this project deploy it on versal finally let's get into it all right so before actually starting let's just take a look at a very quick practical use of what we are going to build um i actually use it myself on codedam.com but you as an individual can use it pretty much anywhere where you want to have a unified experience in terms of blog and in terms of your main website as well so so as to speak if you are building your whole website with next js for example and you're deploying it on versailles you don't have the luxury to you know just deploy a different server on a different path you can either deploy it on blog.website.com or maybe you know you have to shift from versailles and deploy it on your own custom server which is not really recommended because it's a huge pain then so what you can do instead is you can make use of coast as the back end for your blog that means you're going to write all the blog articles all the user management all the tags and pages stuff would go in here and the next chase is going to act as your regular website number one which is you know was the default thing plus it could also act as a blog front for your um main website that is what which what you wanted right so in a nutshell if i show you an example this is a website developed with nexus and if you go to the dev news this slash news section is actually next chase as well but this is running ghost behind the scenes so i can actually go ahead and edit these articles without actually going into the code itself so this is one of the advantages you can mix next js the core next year's technology plus have a ghost based um cms on your website in terms of a blog or news or whatever you are doing so that that that actually is nice to people who are browsing your website and just want to just take a look at your blog as well so it's not a breaking experience for them anyway let's get started and let's start with the new project very soon all right so let's start with a little bit of code in this video um i'm assuming that you have a little bit of experience with react because next yes is basically 90 react and 10 percent the next year's actual framework so if not then i would say just study a little bit about react first and then we can go ahead and just start the project so so as to speak let's start with the create next app which is a sort of a boiler plate which next year's ships and it is very simple to get started with so you're gonna write npx create next app and oops next app and hit enter it's an interactive tool so it's going to ask you for your project name and stuff like that so in this i'll just i'll just name it like um ghost cms nexus something like that you can name it anything you like it's going to install um all the dependencies require dependencies and things if you are using npm you might see npm here but for the most part npm and yarn are the same things right so you can go ahead and follow along this whole series with npm as well this whole video so once you have that ready you're gonna see that you have a bunch of files let's just hop into vs code again i'll be using vs code in this video but if you have a different preference that is absolutely fine as well all right so here is our basic file structure for next js the first thing i want to do is actually convert this into a typescript project because um honestly typescript brings a lot of benefits when you're working with it even if you don't you know use typescript to its full benefit still you get stuff like autocomplete and auto imports out of the box refactoring all that stuff and thankfully next year it is very very simple to convert a project to typescript what you have to do is just go ahead npm guys have to write npm install yarn guys have to just write yarn add type script type script types uh yeah types node and types react and just save them as developer dependencies what is this is going to do is enable your nextjs to use typescript to convert your ts files into um the regular javascript files right once you do that you should be good to go just go ahead and rename the things appropriately i'm gonna rename the files which includes some dsx jsx2.dsx the files which only include javascript can remain just dot ts it's fine right and yep that's it also we might just go ahead and switch to sas so because it just allows some of the nice features of css i mean just the extended features so again typescript uh the nexus framework actually ships with very good support for sas so that should not be a problem and once we do that what we need to do is just write yandev in npm case it would be npm run dev which is going to pretty much just go ahead and fire this command right here which says next step and you can see that on your first run um the next js will actually detect that you're using typescript and it will automatically create a ts config file which is very very convenient again and you don't really have to touch this file for the most part another thing which typescript uh and nextgs is saying to us is that we need sas installed so let's just go ahead and do that so i'm gonna use yarn add sass because i'm using yarn but if you're using npm just go ahead and use that and they do not really explicitly say here that this should be a developer dependency but you can go ahead and put a dev flag here because you don't really need sas on production on production you will be shipping the css bundles so if even if you write dev here that is perfectly fine once you do that instead of restarting your vs code just go ahead press command p on mac or i don't know about windows it should be control p technically or ctrl shift p but just get to this panel and write the typescript restart server which should um just restart the vs code typescript server so that it detects the ts config json file you know in the right way and does not complain about anything once you do that you can go ahead and run yandev now or npm run dev whatever and you can go ahead and visit this url right here with you and only if my mac could afford two tabs of chrome at the same time but yeah not a problem here we go so once you do that you're gonna see that you arrive at the welcome to next chase regular page that is fine so yeah i mean we have just started with our project in this one and uh let's continue on building on to this next shares project all right so we just set up our nexus blog next year's website whatever we have done so far it's time to actually set up ghost cms now because at the end of the day we are actually going to query that cms that software which is sitting somewhere else so we need to deploy it somewhere now the question is what should we do to do that now there are multiple approaches you can take at this point first thing you can do is go ahead and sign up for digitalocean or aws and deploy a simple server and install ghost on it yourself and you know just get started another thing which i recommend is going off with something simpler like hiroku now what you can do is you can deploy a simple you know not so powerful hiroku dyno using ghost cms and the reason this would actually not be a problem at any scale whether you are having a small blog or a very popular blog receiving millions of hits this is because your front the front at which people would be actually using the website is going to be next js right and next js is not going to send the traffic all the time to the ghost cms it's going to you know just hit your backend server once cache the result that is use the result already there and maybe just expire it after five six hours and then hit your go cms again so essentially all the bullets all the traffic would be handled by next shares your ghost cms this dino is only going to be your end your personal end for you know just just using the admin side of the panel so you could find this link in the description which is a one one-click deploy of ghost on hiroku which enables us to you know just sit back and relax about the ghost part at least and focus only on the nexus deployment apart from this just like i said you can also go ahead and deploy a simple you know ghost server on a t2 nano or t2 micro or maybe a five dollar digital ocean instance if you want but this is the simplest the hiroku one so i'm just gonna click on deploy on hiroku and this should take us to the heroku dashboard where we can create a simple you know heroku is free that is also one advantage that you get a single dino free on hiroku so that's that's an advantage so once you have that in place what i'm going to do is just just name it something like ghost cms um i don't know next year's backend anything like that right so this this needs to be unique that's all this could be anywhere and you know you're going to get all of this automatically then the next thing is that the public url is we're just going to keep it the same because i'm going to delete it anyway so that does not matter if you want to use s3 for ghost that is fine you can go ahead and enter your credentials here actually i would actually recommend that but for the sake of this video i'm just going to go with this cloudinerry which is another solution which just comes bundled for free at least the starter back is free with the hiroku system which allows you to upload files so this is fine this is everything is fine and i wouldn't really touch anything else and i'll just click on deploy app so once you click on deploy app it's going to take a couple of minutes and it's going to deploy the backend server of the host cms remember this is the ghost cms we are talking so this is 50 of the work right we still have to build the whole next chase front by creating the ghost cms apis so yeah it's just going to take some time and i'll be back when it's done all right so once you do that you should get a message like this and once you get that if you click on the view you're going to see that it takes you to go cms next year's backend in your case could be different and this is the first time look for ghost right now again remember we are working with the cms right now not the next js so i'm just gonna you know just set up this real quick blog uh nothing special to be honest because we are not going to be using this front at all like ever because this would be only for the editing and everything part not really for people so right now you see that we have a typical ghost website on heroku which is not very powerful or would not be able to receive a lot of traffic but this would do our job so we have a bunch of posts with us already so i'm not really going to edit that because you know that should be fine at least for now so this is our simple ghost setup right now what we want is we want to have this next share setup integrated tightly with this coast set up so that whatever content we are writing on our ghost platform can be used on the next chase front as well and because we are now interacting with the help of apis and everything you can actually design your own blog from the very scratch as well that is also a neat advantage where ghost could take care of you know heavy lifting of these features like post editor and you know all that tags and everything and you can focus more on the designing aspect how the things should look like and feel like to the user so yeah that's pretty much it and let's just get started with the next year's part now okay first things first now that we have ghost cms with us number one you can actually just forget about hiroku now because you don't really need it as long as you know you are in the free trial and with a single instance you'll always be in a free trial so that's not a problem so we have a single instance of ghost running with us now and we have nexus ready to be you know just have some great code so what we want is we want a way to connect our next js application with the ghost back-end that is done with the content api which is a restful content api from the ghost cms right so to start what we need to do is we need to actually create a custom application that is a custom integration inside the go cms platform which will actually enable us to query for that particular thing so first thing is what i'm going to do is go to the integration section in the go cms and i'm going to add a custom integration right and i'm going to say this is next shares you get an admin api key and you get a content api key which would enable you to extract out the post and you know the post and the titles images stuff like that without actually scraping the page because we don't really want to scrape our own website right what's the point in that so that is all well and good but one more thing i would recommend is that just go to labs and just click on uh let's see maybe it's not in labs it's in general yeah just click on this make this site private now why you want to do that um you can just choose any password one two three four five in this case choose a better one but why you won't do that is you don't really want people to figure out your back end url and then access the content that way now that is also fine if people figure it out but where it might hurt you is that if google figure it's out because then in that case what would happen is that google might mark your content as duplicate on the other websites so you want this site to be not decide to be non indexable and you know just not being just keeping it out of reach for from the people from the google and the people so once that is done and you have your api keys with you oops let's just save the settings first so once that is done we have the api keys let's start with the next js setup now all right so now let's just go ahead and set up the infrastructure we will need to extract outpost and articles from the ghost cms so what i'm going to do is just show you the file structure which it looks like i just removed the api folder for now and just trim down some of the files not really much but yes here we are and what we want to do next is we want to set up some code which enables us to use the content api key that is our this key right here because this would be used for extracting out the content so i'm just gonna say content api key right here technically this would go into environment variables so when you're pushing to production or when we'll be pushing to production i'll just shift this to the environment variables thing but i'm just going to keep it here for now so so as to just you know we don't waste a lot of time on configuration stuff so once we have that in place what we want to do is we want to have some way to actually extract out the content from our api from our go cms api so for that number one thing is that we need to have a static props function in our next js implementation now this is because what we want to really do is we want to get the post before we actually show the user this content right so we will have a static props which is going to dynamically fetch the latest post that is the home page how it should look like and it's going to inject that as props in our main component where we can map over those posts and then display them one by one inside a block right let's just go ahead and remove this for the time being because we don't really need this at all and what we want to do is we want to somehow get the post here so i'm gonna say const post is await get post which is a function which we can just create in a moment and then what we want to determine is as props i want to return posts as the as the one of the props right so that we can and actually we want the props to have a post key so when we receive our props here but what i can say is that um actually let's just go ahead and change this a little bit so i'm gonna say home is a functional component which brings in the props of post which is of type post something like this if it does not make sense just give me a second i'll just clean up things here real quick this props and it is a arrow function and we want to export default this home component all right so this is a type post which could be pretty much how our post is going to look like now i have tried to look up for the official you know some sort of ghost api thing but there's not really a very good solution to that so that's why we are just going all the way from scratch for retrieving the content so that should not be a problem but anyway let's just go ahead and see what this get post function should look like right first of all because we want this to be this would be fetching post over the network so we'll just make it asynchronous with that being done what we want to do is we also want to have our blog url in place in our case it is going to be uh nope this one right so we have deployed it on the go cms so this is what it's going to be so this is our blog url and now we need to make fetch request to get the post for this blog right so if we take a look at the ghost api for this you're gonna see that we actually get all the post using the get content slash post endpoint right but this endpoint is actually the full endpoint is something like this which involves ghost api version 3 and then content so let's just go ahead and copy this example and right here i'm just going to paste it as a comment because we don't really want to use this as it is but what i'm going to say is i'm going to say result is await fetch now we don't really need to install isomorphic fetch or anything like that because next chase automatically gives it to us in the environment both on server side and on client side so once we have fetch we're gonna have pretty much a very simple get request with us just that we're gonna replace this whole thing right here with our blog url number one then ghost api version three content is fine number two this is also fine we want to get all the post and the key is going to be content api key right so once we have the result i want to convert that result to json and because we have a single promise in place we should be good to go right so if i go ahead and console.log this thing what's going to happen is we're going to see whatever ghost actually returns us from this endpoint this whole endpoint so we are calling get posts and get static props and then we are finally getting passing it as the props um we already are console logging it here so we don't really need to console.log inside the component so we can just go ahead and say hello just like that so now if we go ahead and take a look at the next year's blog we see that we have some errors because i guess we are not returning the result but that is just fine because we are not really using it as well but where we really want to take a look is the next js server right so you can see in the next year's console where the nexus was running we have some json let's just go ahead and actually i messed up my shortcuts for vs code sometime back so anyway let's just go ahead and start this over again because why the hell not and once we reload the page you're gonna see that obviously we get the hello but we also get a json payload showing us the amount of blog post which we have so far right so we have these many blog posts right now at the moment and we have all the information for for the for those blog posts as well so once we have that what we want is let's just go ahead and take out only the titles for the blog post because that is essentially what you will want on the home page honestly so i'm going to just say because you see post is an array right of objects so i'm just going to map over to a single post and i'm going to extract post or title and that is what i'm going to return right oops this should be titles and we have titles and titles like that right once we have that in place we can actually now go ahead and take a look what's happening with our console refresh let me just go ahead and place it actually closer to the code and we get res is not a function so let's just console.log and see what's really going on here so we see that res is actually an object not a function really and i'm telling you this is actually killing me it's an object with a post key so make sense so you're gonna have rest.post right here and we're gonna map over oops we're gonna map over that actually let me just go ahead and shift this to a real terminal because at least i can just command k and clear the whole thing so anyway let's just refresh it one more time we see we get hello and we see we get all the post titles as well for us now we are getting that titles in terms of posts so we can also go ahead and rename that and i can just say that this instead of being a post it's just a string for now and i can say my posts are inside the props and finally i can say hello to my blog and i can just go ahead and say it's an unordered list we can obviously improve that but i'm gonna say post dot map post return ally inside a post right and just to give it a key we can have an index here because we'll not be sorting or reordering it right now so that's fine and once we do that you can see we get a nice little interface which says hello to my blog and with a bunch of titles for the post right so that would be all and let's just go ahead for the titles and let's just go ahead and link them to individual posts so that we can actually open them and browse around as well all right let's just go ahead and start with our individual blog post but before that let's just do a quick little optimization that is just returning the fields which we want on the index page because you can see right now we are returning basically everything if i can just show you the output now if we go ahead and take a look at you know just console.log the result what you're gonna see is that we actually return everything including the html of the post as well which is not really required on the home page right at max we might just need custom excerpt right not more than that so let's just go ahead and limit that so you can go ahead and use the ghost api again to make use of the fields as the query parameter to limit the things and we can just say we want title we want the url obviously because that would be required let's see what else we want technically we don't really want the url we want the slug because our url would be different so i'm going to make use of url there then we also want the let's see do we want the excerpt yes maybe we want that and maybe you also want the reading time if you are trying to you know just show how much time the article would take on average to complete so you know you can do that you can also take out the featured image if you want to display image but i'm just going to leave that for now so that's pretty much it what you what we want for the home page if we go ahead and refresh it now you're going to see that we have a much much smaller payload with us and yeah the output is still the same so with the slug we have what we can do is turn this li or maybe not really turn but just make use of link inside this li and link is a next js element it's going to be a link well autocompletes not very helpful right now so you're going to import it manually with the next link but what this would allow us is to send the person to a post with a slug right which would be something like post and the post dot slack time to rename this this would be title uh string and slug as string and then we're gonna make sure that we are returning a post as well from here and finally we don't really want the post title we just want the posts to be returned because we are doing the filtering right here right on this on this point so yep i think this should be oops yeah this should be fine let's just rename this to pose this one too and uh i think we did not get the excerpt right because that was custom exert all right let's just see if we get it now reactor children only expected to receive a chill single element okay let's see yeah we want an anchor tag because link needs an anchor tag for that and we also need a title here our key could now be a slug and yeah we are good to go so now if we take a look you're going to see we get still these tags still these list items but now they are actual links but obviously you can see that if i click on any one of them that is a 404 page because we don't really have anything to serve that so let's just go ahead and create an individual post page for individual posts right okay so once we are on this point what we can do is go ahead and make use of the nexus dynamic routes functionality which essentially mean that we can just create a folder called post because that's what we are linking on and i can just go ahead and create a file called slug.tsx now make sure you make use of these brackets inside of the name because that is how nexus actually knows that this is a dynamic url not a static one so once we have that what we can do is first of all let's just go ahead and create const post is a react functional component right we're gonna receive some props but for the time being i'm just going to return hello again and let's just export default our post right nothing exciting so far but this should at least get us started with 404 thing so now we can just go ahead maybe even throw in a backlink link from next link and my blog post once you do that you can just say link hrev this go back and inside an a tag because the previous practice has been deprecated so you can just click on go back click on another post go back click on another post and mind you this is this seems slow in the development but this would be super fast in the production because next years will actually pre-render these all these blog posts and pages so anyway let's just populate this blog post now how we can get that so gonna have a bunch of things again actually it would be a good time to actually move it to environment now so i'm gonna have an enb dot env file only i think next year supports the dot env file out of the box but i'm not really sure about the name um nope nope that was introduced in next year's 9.4 and yes dot env is supported okay so let's just go ahead and take out both of them content api key is this and the blog url well technically you don't really need to have blog url environment but it's fine so now you can just go ahead and say content api key both are from process dot env right similar thing here as well now we want to have a function get post where we'll have a slug that is the slug of this particular this particular post that is what we will receive from next js and what we want is that we want to have the same api more or less we'll just take a look at what is going to happen so for now let's just go ahead and take a look at the content api again and take a look at what happens if we try to get a post by the slug right because that is what we want so we had the api of get slash content slash post slash slug so again it would just return us pretty much what um was being returned earlier but this time with only a single element in the post array that's fine so let's just go ahead and make this request so we want post slug and then the actual slug right the key is same the fields this time would be title slug not really custom excerpt but i'll want the html of the post is that right yes that is right so we have the html this time and yeah you can just grab out the created updated ad as well if you want to show dates you can grab out feature images again depends on how deep you want to create how deep you are willing to go but for now i'm just going to leave it right here so this should be fine once we have the get post again we're going to just make use of the get static props here with then with the difference that because we are using get static props in a dynamic file we also need to implement the the paths where it could um actually fire this get static props i'll just uh tell you about that in a minute but right now we want params.lug patterns is basically you know contains all the dynamic parts of the url and params.slug would be automatically populated by shares to include the whatever slug which we are visiting right so post it is number one we have the post we just saw that the rest api for this single post is going to still return post but this time i just want the first one because there would be an only a single one if there's a post for that slug so once we have that we can pretty much go ahead and maybe this console log it here so that at least we can just view it in the browser terminal because if we do a console log here or here it will just appear in the node terminal so once you refresh this all the absolute urls are supported very well and yeah that this is because if you set the env file you have to actually restart the server and our server is running right here so it's just a one time thing if you are running emv you can see that it loads it before the check it actually starts the server so that's why but anyway once you do that click on this link and we're gonna see an error that is exactly uh what we'll expect because we do not have get static parts yet defined for our code now get static paths is actually going to limit what um ul's what slugs which we can visit but don't let it fool you into um you know some sort of restriction for this let's see what do i mean by that so what we're gonna do here is we're just gonna return an object which says that paths is empty number one number two is we're gonna say fallback is true now what do i mean by that um well you could just go ahead and look it up in the next year stocks but i'll be just quick here so the parts array would contain um you know the slugs which are allowed right and in our case i just say that no slug is allowed which is not exactly what we want hence the option fallback now fallback means that if something is not present in the parts by default do not really discard that as 404 but just just hold on and try to fire get static props for that particular function right try to fire get static props for that particular function and see that if we can extract some valuable data if not then obviously 404 but if yes then go ahead and show that let's just take a look at what that creates what that effect creates for us so now you can see that the error is gone uh the error is no longer here but you can see that in the console after a little while we get um this post so if you were just a little observant you can see we do not have post yet our content is rendered but our post arrives a little bit late so what's happening well you can see that when you use fallback true next year says that okay i'm gonna give get static props a chance to actually update the component but meanwhile i'm not gonna let the user wait for any content so i'm gonna go ahead and just throw this page to the user just make sure that you're showing some sort of loading component or anything and i'll dynamically load the props all right so how do we fix that to fix that we're just gonna grab the router from nextgs and i have no idea why uh next router anything is not working at all and i think this is a single import yep so now i can just say if router is oops router is and this is router not route brought ur is fallback whenever this property is true i'm gonna just return loading because at this point what's happening is that server is actually executing this method on the server side and the client is waiting for the post to arrive now mind you that in the development time it would happen on every request right but on the production when this is deployed this function this this thing would happen only once per production deployment right because the next subsequent times nextgs is going to save this page it's going to save this page literally on the file system it's not going to cache it it's going to save it on the system so that whenever you arrive at the same slug again it just delivers that page without actually hitting the server that is our ghost cms so our ghost cms request is made inside get static props right for example if you are on hello world on production what's going to happen on first request ghost is go cms is made go cms call is made but on for hello world on other requests go cms is not made instead the file system is called right because we have the um you know file already saved so one call for the ghost cms and a million calls for you know your visitors of blog so this is how this is why essentially you don't really need a very powerful go cms on the back end that is why i was saying that anyway once you have this set up with us if we go ahead and refresh now what you're going to see is we get loading as long as we do not see this post and once we have that post with us bingo that's that's it so well for the first time fetching we can obviously have this because when you are creating new articles on your back end with ghost cms people are going to see this or not really people but a single person is going to see this and from that point onwards you can just you know go ahead and use it as a regular static page but once we have done that at this point you're gonna see that we have the post we have the slug html and title so let's just go ahead and actually i'm just curious if i can just go ahead and use the whole module only inside this right so we're just gonna say class name is style start container that's that's what it was i believe yes so we have this again with us and now what i can do is go ahead and just say div and here's a little um i would say a place where some people might get uncomfortable but what we are going to do is we are going to inject the html using dangerously set inner html right here and i'll just tell you why this is not exactly a problem because yeah let me just go ahead and explain myself once i set this up so yeah post is another post for us and this time our post type could be title string html string and slug string i hope that's right yeah so we can just go ahead and say post.html alright so the reason i believe this is not wrong honestly because this html on the end which is coming is 100 percent controllable by you right the reason dangerously set inner html is bad is because this might be controlled sometimes this might be controlled by attackers or sometimes this might be controlled by users right in this situation 100 of the time this post.html is coming from your backend on your go cms platform which is owned by you so this is not a problem as per say but again it might make some people uncomfortable um but go cms as far as i know don't doesn't does not have any options for markdown or stuff like that so this is this is the approach which we can take at the moment so we don't really see anything just yet let's see why is that we have our post with us from the props and post.html is in fact just a valid thing so let's see all right okay so yeah i just figured out that this is a responsiveness problem we have way too many large images so let's just make sure we have a little bit of global styles in place which could just take care of that so i'm just gonna say maximum weight hundred percent and that should just take care of that right anyway so this is our blog post which looks like this at the moment right all this content is fetched by nextgs we can just throw in an img of height auto so that these images are not really stretched that much but you know you get the idea so if you go back and click on publishing options you're gonna get something like this again we can just go ahead and replace the my blog post with an actual post.title right so that it makes more sense so now if we take a look go back and welcome to ghost you're gonna see that we get a nice little post for ourselves and you can actually go ahead and you know go to the post section welcome to ghost and you can edit this thing as this update the article go back to next.js refresh and boom that is updated so you manage your articles with a great backend and you show them to the users with a great front end so this is the combination i was talking about anyway once we are done with this article let's just go back style this a little bit and add a little bit of comments magic as well to our section okay everyone so just made a quick little changes just give it a you know some space to breathe and if you take a look at individual posts just made sure that go back is now on left that's how it was intended to right so anyway we can just go ahead and take a look at what's up with these large aligned pictures and obviously you know just take a look what really the coast actual post look like and remove that delete that stuff like that but anyway what we want to do eventually in this article in this in this video is add comments to our blog post right because just like i said without comments the blog looks dull so let's just go ahead and do that with discus now discuss is a very popular commenting system and because we really want to avoid all the costs that is the database cost for hosting and storing commands as well as the infrastructure cost for hosting that api the whole thing so we can make use of discus it's it has a very generous free tire as well which should get you just started so i'm gonna say i want to install discus on my website after visiting discuss.com and what it's going to do is take me through a quick little wizard so i'm just going to say this would be let's say graph not really graphql this would be ghost cms and what's the next thing next js right select any category does not really matter a lot and once you create the website what we need to do is just go ahead and subscribe to the basic plan for the moment and let's just see with the universal code because we are integrating it ourselves so what we want is we want the following thing to go but you know if you want you can't restrict it to the point when somebody clicks on the commands to load then only they load right so we're gonna do exactly that we're not just going to just force discuss on their faces they can just go ahead and say that they want to load the comment and then they can you know load the commands so i'm going to just go with the go back styles only because it has that left aligned with itself and i'm gonna say not really link just a simple anchor or maybe not really a simple anchor as well we don't really need that also so yeah i mean we can go ahead and keep that not a problem or yeah i'm actually confused so let's just go ahead and move that anyway so what we want is just say load commence here and whenever somebody clicks on this on click what should happen is load commands should fire right and what this load comment is is a function which is going to load discuss right and our discus code is right here which is what we copied from from the website so it's not very elegant right and let's see all right so first thing which we see here is we need a place for disqus to load so that's not really a problem let's just throw that right here right number two is let's see uh the beautiful comments is actually screwing up the text which we need to read so let's just go ahead and comment that out so number two is we need to have a discuss configuration in place so this is our discus configuration let's just make it a const uh this dot page url is going to be our pages canonical variable right so our page scan canonical variable could be pretty much you can just go ahead and use window dot dot if you want or you can construct it using this the slug which we have right that is also fine the page identifier could definitely be our um you know post dot slug right and this is our discus config done and dusted then after this we need to fire this function which is basically doing nothing but inserting a script tag with this src right so let's just simplify this a little bit because we don't really want too much of this complication here so let's just say our script is document.createelement script script dot src is this thing right and then it wants a set attribute as well like this script dot set attribute and it's going to complain next is going to complaint yep so instead of this we can just use state dot now as well not to string because you know essentially if you take a look at new date it's going to return you the string if you forcefully try to convert it into integer it's going to return you this udc timestamp and date not now is basically the same thing right so instead of using this hack we can also use date not now and dot two string actually converts it into a string so that we can use it inside an attribute as a value and typescript does not complain not a lot of things going on here but yeah i hope that was uh something you understood and yeah once we did that i think there's nothing more to do here and that should be it so once we actually fire this actually what's going to happen is that this disqus config is defined with a var keyword so probably this script is going to look for the window that discuss config so we probably want this as you know on the window object so that it can initialize it all right so once we have that in place this should be working fine let's just go ahead and click on this load commence and wait for a while and let's hope the discus loads checking the console we don't have a lot of things but yeah let's just refresh it once and see if it works then go down click on load commands inside networks we don't have any activity to be honest and nope nothing's happening oh because we are not document.body.child script yeah that's the last missing piece and one last thing which you want to do is you want to enable load commands set enabled load commands to be only present for the first time and this should be rather true right so you want to have this link on the page only the first time right once you click on this you want to set enable load commands to false so that you are not able to click it multiple times and one last thing which i really want to do is just make sure that this go back is actually having a cursor of pointer so once we have that in place let's just go ahead and click on this it automatically goes away just like we expect and we get a nice little uh commenting section for us but why is it so small i have no idea for that so let's just go ahead and take a look and let's see not really helping so i'm just going to zoom out a little don't mind me and where's our iframe this is discus thread we can go ahead and give it a width of 100 right yep so let's just go ahead and give the discus thread a little bit of styling this curse thread with hundred percent margin 20 pixel zero this should just give it a little bit of space as well and one more thing which you can really do which is going to enhance your experience which i just found and the discus is that um you know you can just go ahead and only if i can just take a look you can just go ahead and actually i'm lost let me just go ahead and go to settings and yeah inside the reactions yes enable the reactions once you enable the reactions you get this nice little feature which is people can now actually react on your things so if you load commands it's going to load it and looks like it's not really enabled yet i'm not really sure you don't really have to do a lot of things once that is enabled it works automatically but yeah if you load the commands go down yeah there you see so now people can actually leave reactions and it's it's a pretty decent thing right which ships would discuss out of the box i i actually like it so anyway you have added discuss that is the commenting on your website next with next chase as well which is obviously dynamically loading so as to not really disturb any person who does not really want unnecessary scripts loading on the page and still maintains that fast experience of a blog so yeah that's pretty much it and for the disc for the comments part and let's just now see how we can really deploy this on the versailles okay so before actually deploying on versailles one very important part of the equation is to have the revalidate parameter in place why is that because you want to revalidate the page generation to pick up changes or if you know anything is changed so what you want to do is with props here you want to pass in a re validate parameter and set it to something like you know 10 seconds or 50 seconds or 60 seconds whatever it whatever you think is right you can also set it to a few minutes or you know if you're somebody who makes changes rarely to any block you can also set it to a few hours what this revalidated parameter would essentially do is after this after this much amount at least after this much amount if there's a visit next chase would try to fetch the new thing that is you know it would try to run the get static props in the background at least once um at most once in this duration so if you have 10 nexus would run at most one request to the ghost cms in the back end right that means it will still fetch it will still respond with the correct blog html but if it anything is changed it would reflect in at most 10 seconds right not in in not really at most 10 seconds but the fastest it could reflect that is in 10 seconds right so this allows you to not really put a lot of pressure on the back end as well because now you are keeping it in cash for some time similar thing for the index page as well we want to revalidate this one as well so i'm going to say revalidate this every 10 seconds again and that should be it so we are ready to rock and roll it on the production now to deploy it on versailles we're going to need warsaw cli choose your package manager npm on yarn and go ahead and install versal now once you do versal installation what would really happen is that inside your terminal inside your cli let me just go ahead and use this one instead you're gonna access you can accent versal as versailles or worsel as vc as well so this support is provided by default right so what you really want to do is once you are done once you are at this particular stage you just want to hit vc and hit enter what's going to happen is versailles is now going to take you through the process of deploying it on the versa and it's also going to deploy it in the staging right now it's not going to deploy to the production and yeah set up and deploy go cms yes we want to which scope you want to and actually one more thing you might actually need to log in first with versa and how you're going to log in is by writing uh this command right here that is vc login right and once you do that you have to enter your email then warsaw would send you a secret code on the email you have to confirm that and you would be logged into versal cli once you have done the login part then you can simply write vc nothing else in the project root and you're gonna be you know on a similar screen which i am on so yeah i want to deploy it on my hobby account i do not want to link it to an existing project this is a new one so it would be just course cms on next.js and this is the root directory in which our code is located pretty simple warsaw takes care of all the nexus building and everything it's going to take some time in building the project you can see that if you go to versal.com project would be building that is you know go cms on xjs if you go to the deployments you could see that it is actually building right now you can follow along the logs as well and it's actually done because we are not really doing a lot of things honestly so that's why it was so quick but nonetheless once it's done it's ready to visit when you click on wizard you're going to see that you have go cms on next year's versa and you pretty much have the same look on our blog now if i click on you know welcome to ghost you can see it immediately clicks on that and you know loads accordingly go back writing post with ghost immediate loading super quick super easy publishing again comments would also work just fine if you click on load commands this would just work fine if you love give it a lovely action and if you reload you're gonna see your reaction actually stays right there stored go back and basically you can go back to the ghost cms with our blog well here it is and i can just go ahead and create a new post new new post and i can just you know throw in some emoji uh let's see bold not really bolt electric power okay i'm bad at that but anyway this would just work fine this is my new new post with next shares as front and ghost as back right go ahead hit publish now you might see that it's not immediately live on not really on localhost on your ghost blog but you can see after a bunch of refreshes within 10 seconds we get our new new post right and again if you try to edit this update this nexus is going to update this automatically because we have a revalidate parameter in the background and you can see it just happens just like that you can load commands you can go back basically you have your own personal blog which is super fast which is super nice to look which feels super great without spending anything at all so yeah i mean that's pretty much it that's what was the motivation for this video hopefully you were able to follow along and complete this

Channel: Traversy Media

Views: 68,172

Keywords: nextjs, next.js, javascript blog, ghost cms, headless cms, headless blog, codedamn

Id: 1SYU1GorO6Y

Length: 61min 55sec (3715 seconds)

Published: Mon Oct 05 2020