Build A Blog with SvelteKit and Headless Ghost CMS

okay so i've done a whole bunch of svelte kit tutorial videos and you're probably thinking okay how do i put all these together and actually build a project with them well today we're gonna build a blog in sveltkit hello hello youtube my name is braden gerard and today we're gonna build a blog inspect kit we're going to use felt kit along with ghost as a content management system to provide us a headless api to our blog posts and a very nice authoring experience but that can then be statically generated inside of our sveltkit project and hosted with a static host such as netlify so we're going to dive into sveltkit today i'm not going to be touching too much on how to get your ghost content management system set up i will have a future video on setting up a ghost development environment but today we're just going to look at sveltkit and how we can put all the pieces that we've been learning over the last couple of months in sveltkit together to build an actual blog we're going to look at stuff like fetching our blog posts we're going to look at stuff like dynamic routing so that we can create our individual post pages we're going to look at layouts and how we can use layouts in folders to change the layout as well as of course building svelte components in sveltkit so let's dive into the code and take a look at how we can build a blog in spell kit okay so the first thing we're going to do is create a news felt kit project for our blog so we'll make a directory called blog dash svelt kit dash new we'll go into that directory and we will do an npm init spelt at next all right do i want to use typescript no or just regular css perfect do an npm install and now we have a brand new felt kit project so let's open that up here blogspot kit new okay let's add that to our workspace and we will first create our index page for our blog so we go into our routes index and there's some stuff in here some hello world stuff let's just run this dash open and if we go over to our browser now localhost 3000 we should have 3 thousand brand newest file kit project okay so this is going to be our hello world blog so let's leave the hello world in there and we will remove everything else we will since we've removed this counter component we can get rid of it up here we're going to make a very basic blog this tutorial is not going to be on how to create a nice css or extra functionality we're just going to do a very bare-bones blog so excuse the styling all right so we'll actually completely remove all of this we will keep the h1 styles sure but we can get rid of we'll keep the fonts and this is okay the text line center so we'll keep that for now inside of here so if we go back what do we have now we have hello world perfect so now we also have a localhost ghost installation running okay and this is just the default template for ghost we're not going to use the ghost template at all we're going to create our own felt kit template for ghost and we're going to pull from our ghost cli so one thing that we do have to do is go to this local instance of ghost that i have running and log in to the admin and then we need to go over to our general and scroll down here we're going to say make this site private that'll basically remove it from search engine optimization and put a password on the front end so that if anybody ever got to our uh api or our headless content management system they're not going to see anything uh let's just see it asking them for a password and also won't index this site because we want our ghost blog to be the one that's being indexed so we turn that on and then we go over to integrations what's that going to save the settings we'll go over to integrations and we're going to say add a custom integration this is where we're going to get our api key for our blog post or for our sveltkit blog to pull from so we're going to give this integration a name and we'll just call it svelt kit blog and we'll create it and then there we now get our content api key and our uh api url so these are the two things that you're going to need to set up your ghost javascript client okay so if we go back to our felt kit blog here open up the code we will want to pull in all of the posts into this home page so that we can list them out okay so we'll do that inside of our script tag here using the ghost javascript module so first we need to install that module so let's install that by doing an npm install and we're going to save it so dash save and it's going to be at try ghost forward slash content dash api perfect so we've installed that and now we can import that inside of our home page here we can say import ghost content api from and then at try ghost forward slash content dash api and now we have the javascript module for interacting with our ghost content api and we can do some very easy api manipulation with that okay so let's pause there let's go and start setting up sort of the structure of our blog so let's create a layout inside of our routes folder so we'll make a new layout starting with the dollar sign layout.felt and we will inside of there we'll put our main block here okay and we will also put our css for main in there as well as our root css there we go so that's good and now we have our layout that everything should get wrapped inside of here and go inside where this slot is now we want to have a nav and a footer on each of our pages just so we can get back to our homepage and we'll just add a footer to put say a copyright in for now i mean you can also add lots of other stuff there but that's not the point of this tutorial so we're going to have a nav component here sorry autocomplete so everything nav and then we're going to also have a footer right here okay and then our content will go between the nav and the footer so if we go over to our components folder we'll make a new component one called nav dots felt and one called footer and we will in our nav we'll just say nav and then we'll do an a href equals and we'll just say home and we'll call that home so that's all our nav's gonna have in it and then we'll create in our footer just a some text that is going to say copyright 2021 braid good enough and we go back to our layout we've imported both of those so we need to or we've put both those in our markup so we need to import them so let's do the import import nav from dollar sign components forward slash nav dot spelt and we also want to import footer from components or slash footer that's felt all right let's see how our site is looking now so let's run this again and go back to our browser and we've got our nav and we've got our footer okay and then our hello world and our blog posts we are going to put here perfect so let's go back to our code and let's create a new route so we'll make a new folder here called posts and inside of there we'll make a new file and it's going to have the slug slug dot spelt okay so that'll allow us to have our blog posts at forward slash post and then whatever the slug is okay and inside of this sluggles felt is where we are going to show the content of our actual post so let's go back to our index dot svelt and we will actually start pulling in our posts here so we're going to use that ghost javascript api client and we're going to say const api equals new ghost content api and then we're going to give it the url which is the url that we got from our integration here so our local host url and then we're going to give it the key which again is over here in our integration and then we're going to give it a version so v3 is the current version so we'll stick with v3 and now we can use this api to fetch content now we're not going to want to do these imports inside of a regular script here we're going to actually want to change this to be a script that runs when the page is loaded so that we can load in those blog posts ahead of time so we're going to actually change this to say script context equals module so that everything that we export here will be available as a props and then we will say export async function load and then in there we will initialize our api and we will say try hopefully we want to make sure that this will succeed if for some reason our api is down const result is equal to a weight and then we want to grab our actual blog post so api dot posts dot browse and then we pass it an object with how many we want so we'll just say we'll get five posts for now and then let's include what we want to include let's include the tags on the posts as well as the authors so this is coming from the ghost documentation for their content api so if you want to know what else you can do here you can always look there okay and then we will take our result and we will get the json out of it so we'll say const json posts is equal to await result dot json and then down here we are going to catch in case there's an error on either one of those we'll just log out the air for now now if we get the posts we want to actually return those posts from this function so that we can import them as props so we're going to say return and then the props object with our posts inside of it so let's say posts and the json posts sorry that should be a colon and our json post so now inside of our script for our home page we can say export let posts and that will be populated when our page loads with this data and then we can go over here to the page and we do a svelt for loop so we say for each post posts as post and then we will do a list here so let's start the list here close the list after our each and we close our each and then inside of our loop we say list item and we'll just do an a href equals we want to get the post dot slug and then we want to get the post dot title here as the actual content unlike this forward slash post dot uh post sorry uh four touch posts where it says post dot slog okay so that should create a list for each of our posts uh with a link to each post on our home page so if we save this and we go back and we reload our home page okay so we have an error here let me just go back and see where we made a mistake it can't see this as an array so oh this is probably already returning as json so we don't need this res.json here so we'll just say we'll just call this json posts and save that and if we go back there we go we have all of our posts printing out in a list okay so we have the post title with the slug if we click on it it goes to the forward slash post forward slash welcome and now we're not now we have to put our actual post content into these pages so let's go back to our uh code and we'll go to the slug does felt here and just for saving some time here we will copy this so that we can pull the post in on that page as well and here we will actually pull in one specific post not all the posts so instead of calling an api.post.browse we're going to call in api.post.read and then we are going to say that we want to get it by the slug and then the slug is going to be the slug that we pass in from the url that we've provided because we're using the slug in that url so if we want to get the slug from the url then we just have to pass that context object into our load function and then we can get the slug out of that context object so we can just say let slug equal context dot page sorry dot page dot params dot slug and now that we have that slug we can use that slug in our api request here so we can say slug we can just do that say what types of content we want back in our individual post so we could say formats as a second object here formats then an array of formats that we want our content back in i'm just going to say html so that we can get the html format this should be here so we pass in first what we're querying by so we're creating by the slug and then we pass in the options that we want here so i want the formats of html that should get us back our individual post so then we can return the props of post and here we put post now in the script for our blog post page we would simply say script export fonts post and then we would go down into our page and we do a print out of our post so first we'll do the title we'll say post dot title and then below that we would do the content so i'm just going to say at html so that it keeps my html content and then post.html and that should create the rest of our post page not constexportlet and if i go back over now we see our first blog post it's ugly there's no styling uh but it's there and if we go back to home forward slash home forward slash home is not a route so we should not have made that in our nav it should just be forward slash to go to our route if i go back to home we're on a broken page now so let's reload this did i break my whole site there we go if i go to an individual post we have the post if i go back home there we go i go to my next post we can see writing with posts and we can go to each one of our posts in our blog okay so that is a very basic blog setup with sveltkit but uh it gives you a good idea of how to create layouts and how to actually use them it allows you to see how to do dynamic routing it also shows you how we can do ajax requests using the in this case we're using the ghost javascript api but you could also do this with the fetch api if you need to use fetch you need to get fetch out of the context object on your dynamic routes so if you're going to do a fetch here you would instead say context dot fetch and then you could do just a regular fetch request if you wanted okay so that's one thing that's a little different from sapper so some people were confused with that just to pay attention to that if you were doing regular fetches and not using a uh javascript client-side api like this ghost api that we're using but that's how you'd create a blog using ghost and sveltkit so i hope that helped and yeah that's all i have for today thanks for sticking around for another one of my felt kit tutorial videos if you enjoyed this content make sure to give this video a thumbs up so that youtube knows that you really like what you're seeing here and it's going to show it to more people like yourself if you want to catch more of my felt kit tutorial videos or development videos in general i'm going to be releasing tons of content in the upcoming months so make sure to drop a subscribe on my channel so that you don't miss out thanks for hanging out and have a great day [Music] you

Channel: Brayden Girard

Views: 4,135

Rating: 5 out of 5

Keywords: web development, sveltekit, ghost

Id: z9bWFsUxSsQ

Length: 20min 36sec (1236 seconds)

Published: Wed Mar 10 2021