I started using Astro in the last week of 2023, building this website. Since this site contained blogs, so I used Astro’s recommended way of using Markdown based blogs.
In this approach, a content directory is created inside src folder . In there we store the markdown files in a sub-directory like blogs, which contains file1.md, file2.md… blah-blah.
A file named config.ts is created inside the content directory, which defines the schema of the different markdown folders… like
const blogCollection = defineCollection({
type: "content",
schema: z.object({
title: z.string(),
description: z.string(),
publishDate: z.date(),
}),
});
export const collections = {
'blogs' : blogCollection,
} At the homepage of this website, I wanted a list of 5 recent blogs. So I did
const blogs = (await getCollection('blogs')).splice(0,5);You got it, right? This was how I got a list of blogs!
Everything worked great and we got a list of blogs, which were formated and displayed over the homepage. We accomplished part 1 🎉.
For the next part, I wanted to show to create a page to show a specific blog post on a page. Since the hardcoded would only work with short-term, I used a dynamic way to do so like here.
In short, we create a file named in the following [slug].astro format, here slug is the blog(name of the markdown file).
And this file contained a function getStaticPaths() which defined an array of values for which the page can be shown, else it gives page not found error.
I followed the official Astro documentation, and I could see a list of recent blogs on the homepage. I tried and tested everything was good!. So hoping everything’s working, I deployed on my vercel server.
After a few seconds, I visited my deployed site. Everything worked except the blog page. It throwed 404 page. I checked the build logs, and the build was not able to create routes for the different blogs. But on my local development server everything worked! So, I created a build locally, and found it didn’t work here too. Now I was sure that something’s wrong…
I checked it several times, but was not able find anything. I was losing hopes and thought I should raise on github and find someone who can help me with it. At the edge of it, I thought, let’s try creating a simple Astro application which has this functionality. The same thing worked very well on the new application on dev server and build, and while checking the differences in code, I saw the issue.
The issue was .splice(0,5). According to MDN docs splice is
splice()method of Array instances changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
In this case, it affected the contents of the blog collection at the runtime on build which did it on place! And since this data was also used on other pages like, blog page, we get a null there, as it was no longer there… That meant, no page will be created after parsing. And the interesting thing is - on development server, there was no impact due to this inplace change!
To resolve this, I just needed to remove the extra p in splice to make it slice, which returned a shallow copy of data we needed!
Long story short, It all happened due to the a silly typo of p in splice function 😣
You never know what’s gonna happen in a language like Javascript and even a silly typo can turn into a big mess. So its better to always have a test.