Build A Blog with SvelteKit and Headless Ghost CMS

In this video we use SvelteKit to build a blog using the content API from Ghost CMS to act as a headless CMS for authoring content. SvelteKit is great for building fast and performing blogging websites and Ghost provides an excellent authorizing experience. Tune in to learn how these two web technologies can be combined to build a flexible and performant blog!

If you enjoy my content you can find me on Twitter @BraydenGirard and make sure you are subscribed on YouTube so you don't miss out on upcoming content!

[kumekster]

Henry Cavill is now programming, what a dude. Great content Brayden.

[everyhandletaken]

Another great video, thank you!
I had looked briefly at Ghost in the past, but had no real use for it at the time - but may have to revisit this.

[ChrisShawUK]

This is excellent Brayden. Exactly what I'm looking for to explore an architecture for a new project

[bmehder]

Ask, and ye shall receive. Thank you for making this!

[miba]

Great video! A second part with tailwind css integration would be awesome.

[damianicely]

Hi Brayden, Thanks so much for this amazing tutorial. Info on sveltekit is so scarce right now. It would have been great if you could have shown us how to display different content if someone enters a slug that doesn't exist. At present you get a 404 message. Must be a fairly simple method to return something more user friendly in the async function...

[brandongibbs]

2 notes on some command line stuff that will save you some keystrokes and time.

- - open instead of - - - -open

Also, - - save is no longer necessary unless you want to make something just a dev dependency, in which case you now only need -D flag instead of the old - - dev.

[Daniel-djvc]

Great!
The way You copied the <main> tag made me laugh :D

[hoijoon]

Good video, thanks! If you want to just store your blog content on MongoDB rather than on a CMS, how would you implement that? Create an API server route for Mongo? How do you do that? Thanks.

[llevwyn]

Thanks for this! I'd really like to see how to turn this into a real blog, with encrypted ghost key info and hosting on something like netlify. I tried hosting but it didn't work, and the key is exposed in github anyway. If you can't tell, I'm new to this but love Svelte 😅

[elbestione]

Could you please provide a GIT repository with the project you actually did there, so we can actually reproduce it?
Many thanks for this :)

[blankslate]

sveltekit has changed quite a bit since these tutorials. For example now $component does not work any you need to put the stuff in $lib. Please remake your tutorials if you can for a stand alone blog and cleaner code. Also make your screen smaller. Now it fills half the visible area.

[lifeisgood]

Thanks for this great video!
Ghost content api gives me ReferenceError: XMLHttpRequest is not defined
Do you have any idea why this error is generated?

[mountainslopes]

For these simple projects, you could use a classless CSS library like SimpleCSS.org which will cover all the basic element styles

[roastgg]

Great video! I get a 404 not found ( a failed get request some reason?) at the root, but if I use a link to navigate from on page back to the root, everything loads and works great! All direct links to any page that is fetching the data from ghost gives that error when trying to load without navigating from a link within the application itself. Sent a PM on twitter.

[MitchellReeves]

I'm unfortunately stuck after we at Footer and Nav.. and I also don't understand it. My Footer and Nav are not being rendered on the page, and how would they given they are being invoked in $layout.svelte, but $layout.svelte is not invoked into index.svelte or anywhere else?