joco-sveltekit
joco-sveltekit copied to clipboard
josh-collinsworth
blog/build-static-sveltekit-markdown-blog
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
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.
What's the advantage of using a JSON endpoint over creating a helper function that returns the post metadata?
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.
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?
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()
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.
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
One thing I'll add is that I did run across this error message when I tried using the
pageparam forload. 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.
This post is incredible!!
A note from the https://kit.svelte.dev/docs#routing-endpoints docs — fetch is now supported in endpoints, and everywhere!
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
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).
Great blog Josh, wish I had come across it a couple of months ago - looks like I have some refactoring to do :-)
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. 🙏
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.
This is one of the best tech tutorials I've ever completed - it is clear, concise, error-free, and very well illustrated. Thank you!
After feeling very lost trying to get started with svelte-kit, I stumbled across your excellent tutorial, and now I see the light. Thanks so much for your clear and thorough explanations. I feel like this should be a required tutorial for anyone starting out with svelte-kit. I'm definitely buying you a coffee!
Josh, thanks for writing this, it is very helpful. I have been investigating SvelteKit for creating an app, but have been pondering whether to also adopt it for an SSG. I prefer to not use a bunch of different tools if one will cover all the use-cases...
However, reading this, it seems like SvelteKit adds a lot of extra work compared to something like 11ty or Astro. (I'm very familiar with 11ty, but looking at Astro for its ability to easily integrate Svelte components.) There's a lot of boilerplate required to do something like set up and retrieve a collection, for instance. Am I getting an accurate picture, or am I missing something?
@bnonn I think your picture is accurate. As mentioned in the intro, SvelteKit definitely isn't the simplest thing you could use for a static site generator. It's more powerful and free-form, which also makes it more complex. 11ty and Astro are both great choices for pure static sites.
Hello. Thank you very much for this great tutorial. A few months ago I made one of WebJeda and now I update and optimize it following yours.
Everything works fine and now my code looks much more readable.
I just wanted to tell you about a problem that is happening to me after I updated SvelteKit yesterday. When you interact with the web from the links everything works fine, but for some reason if I copy the link from some post... and paste it into a new browser window, the url throws a 404 error.
The application is compiled as static and hosted on an apache server, in previous versions it worked.
Again thank you very much for the tutorial.
@ajbajbajb I get part of the object with html visible in there if I console.log it, but then it crashes halfway through with the error: Cannot read properties of undefined (reading 'data').
I suspect there's something in the .md files that breaks it, maybe because inside that .md file I fetch an endpoint? Anyone has an idea?
I just wanted to tell you about a problem that is happening to me after I updated SvelteKit yesterday. When you interact with the web from the links everything works fine, but for some reason if I copy the link from some post... and paste it into a new browser window, the url throws a 404 error.
Sorry, @JappIC, I'm not able to replicate this. Maybe it's a version issue? If you run npm update, does it still happen? And if so, if you could link to a repo where the issue can be seen, I'll take a look.
Lo siento, @JappIC , no puedo replicar esto. ¿Quizás es un problema de versión? Si corres
npm update, ¿todavía sucede? Y si es así, si pudiera vincular a un repositorio donde se puede ver el problema, le echaré un vistazo.
Yes, I updated to the latest version of Svelte and added...:
prerender: { default: true, },
...as requested now.
I realized that if I add .html at the end of the url it works. I sent you access to my repository
Thank you very much for your attention
@JappIC I'll take a look. One thought: this may be an issue with the host's web server configuration. Where is it hosted currently?
On Netlify, Vercel, etc., a route like /post-title should automatically fall back and load the /post-title.html route behind the scenes. Maybe this host is not set up to do that?
PS the site looks great! 👏
[EDIT]: I also wonder if maybe the deploy configuration mentioned in this issue might help.
PS the site looks great! 👏
Thank you very much!!!
It's an apache server "banahosting", that's why I want it to be static. I also have my website hosted with an older version of svelte and it works. However, the application to which I gave access is updated to the latest version of svelte and generate this problem.
The 404 error is generated by the server, not the application.
I don't think the problem comes from what I learned from you in this post, which helped me a lot to improve the code. I think it's something from svete
I can't figure out how you're dynamically getting a single post, like here:
const post = await import(`../../../lib/posts/${params.post}.md`);
Sveltekit is complaining about SSR / not being able to dynamically import a module. Alternatively, usingimport.meta.glob can't handle variables inside the string literal.
I resorted to just getting all the posts and then filter out the single post.
Are there some additional settings to allow for the code in [post].svelte to work?
Great write up, Josh! Big SvelteKit fan myself and was currently looking for some supplemental examples for how folks like to handle markdown with SvelteKit and you didn’t disappoint. Well done and thanks for all the effort!
OMG this post is all I needed to start my SvelteKit + MD project.. thank you so much Josh!
I have only one question.. do you have any experience of using this stack + internationalization???
This is really a great article! As SvelteKit's official docs are still somewhat lean, your article is very helpful. Thanks a lot!
One question, though: I wonder if in my adapter-static-configured project, if I can have routes built with Vite. In your example it's the routes for /api/posts.json and /rss.xml.
To reproduce my use case:
- Use Node v16.15.0
- clone your project
- run
npm run build - Run this in nginx:
docker run -v $(pwd)/build:/app -p 3000:8080 bitnami/nginx:latest - open
http://localhost:3000/rss.xml. - Returns 404
If I run npm run dev, I can open the route and get some nice RSS data.
Did you ever have this working on a statically built site? Any idea if this is supported by SvelteKit?
