blog/build-static-sveltekit-markdown-blog

[utterances-bot]

Let's learn SvelteKit by building a static Markdown blog from scratch - Josh Collinsworth blog

Learn the fundamentals of SvelteKit by building a statically generated blog from scratch, with Markdown support, Sass, an API, and an RSS feed.

https://joshcollinsworth.com/blog/build-static-sveltekit-markdown-blog

[prinpadure]

For someone who starts learning SvelteKit, this tutorial is amazing!

[SILVAWesley]

Amazing job! Thank you, I was kinda lost with the amount of outdated SvelteKit tutorials, but this one suited well for me. Also, I like that it is well written.

[sgeisenh]

What's the advantage of using a JSON endpoint over creating a helper function that returns the post metadata?

[josh-collinsworth]

What's the advantage of using a JSON endpoint over creating a helper function that returns the post metadata?

Great question! If all you're planning on doing with the posts is listing them out on the blog index page, then a helper function would be just fine. I like having an API, though, because it enables you to do lots of other things down the road—for example, fetch posts for a sidebar or recent posts list, or even add a search feature to the site. Plus, you can use your content on other sites if you want to.

[spoonfulofdreams]

Under Finishing the Blog Index Page > Server-side Rendering with Load, I edited the blog/index.svelte page with the code provided but I'm told I can't use the keyword 'await' outside an async function. It's in the line: const response = await fetch('/api/posts.json')

What's gone wrong?

[sgeisenh]

Under Finishing the Blog Index Page > Server-side Rendering with Load, I edited the blog/index.svelte page with the code provided but I'm told I can't use the keyword 'await' outside an async function. It's in the line: const response = await fetch('/api/posts.json')

What's gone wrong?

The arrow function where that line appears must also be marked "async":

export const load = async ({ fetch }) => {
  const posts = await fetch('/api/posts.json')
  const allPosts = await posts.json()

[josh-collinsworth]

The arrow function where that line appears must also be marked "async":

Good eye, and thanks for the reply! I've just updated the code in the post.

[pejato]

Josh, this was a really great article. I started to make a personal blog a few months back with SvelteKit but couldn't stick with it. Most everything here just worked, which was great. Also, your website is beautiful 😎

One thing I'll add is that I did run across this error message when I tried using the page param for load. The error message is fairly self explanatory, of course.

`page` in `load` functions has been replaced by `url` and `params

[josh-collinsworth]

One thing I'll add is that I did run across this error message when I tried using the page param for load. The error message is fairly self explanatory, of course.

`page` in `load` functions has been replaced by `url` and `params

Ah, thanks for bringing that up! The hazards of blogging about a pre-1.0 technology 😅 I'll see about adding an update for that.

[janzheng]

This post is incredible!!

A note from the https://kit.svelte.dev/docs#routing-endpoints docs — fetch is now supported in endpoints, and everywhere!

[freeform99]

Hi Josh,

thanks for the great tutorial!

I noticed, however, a white flicker when scrolling this page to the top/bottom by using the Pos1/End keys. It only happens in Firefox and only in Dark Mode. (I first noticed it in my computer's dev environment but then I also noticed it here.)

I use TailwindCSS (which I guess you're not using), and I found pages that have dark mode but don't flicker (for example, https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/).

Do you see it as well? Any idea what's going on?

Gunnar

[josh-collinsworth]

Do you see it as well? Any idea what's going on?

@freeform99 Looks like it's nothing to do with SvelteKit or Tailwind; looks like Firefox's rendering engine just allows the default background to seep through for a split second when scrolling tall pages very quickly.

My current implementation of dark mode only sets the background color on the #app element, which covers the whole html body. Apparently forcing Firefox to render that much content that fast just causes a blip where the html body background shows through. Easily fixable by moving the background color to the html/body tag (probably a good idea anyway, I just wasn't always setting classes that high in the DOM).

[Wolsten]

Great blog Josh, wish I had come across it a couple of months ago - looks like I have some refactoring to do :-)

[ajbajbajb]

Josh, God bless you, this is an excellent tutorial for understanding endpoints in Svelte. You do mention extending this API to use the resolver default.render to access the .md content. How would you do this?

Please point me in the right direction if possible! I'm trying to get around the dynamic component restriction of building static sites. 🙏

[josh-collinsworth]

You do mention extending this API to use the resolver default.render to access the .md content. How would you do this?

It's similar to how the endpoint grabs the metadata from the resolver, just with an extra step (since default is a reserved keyword in JavaScript):

const post = await resolver()
const content = post.default.render()

If you run that inside the endpoint code, alongside where we get the metadata and the postPath, then you should have the HTML output of the post's content in the content variable.