I've been working on a search solution for my Astro blog, and building search on top of static site generators is always tricky.
My general idea would be to do it almost the same as my Eleventy search.
Creating a JSON page in Astro
However, I quickly realized Astro doesn't have a neat permalink structure by default.
Trying out some things, I learned that we could create pages like search.json.astro.
These will render as http://yoursite.com/search.json
But let's see how we can render a JSON response of all our blog posts in there.
Astro has the cool built-in fetch method for internal pages so let's use that first.
const allPosts = Astro.fetchContent('./posts/*.md');
In the next step, I'd like to map these to the output that I can use, which only needs the following three elements.
- title
- description
- slug
Let's see how that would look:
allPosts.map((p) => {
return {
title: p.title,
description: p.description,
slug: p.url,
};
});
However, let's create a variable from this, and JSON stringify the output.
const json = JSON.stringify(
allPosts.map((p) => {
return {
title: p.title,
description: p.description,
slug: p.url,
};
})
);
Now all that's left is to render the JSON output on the page.
// All our code
---
{json}
And that's it. We can now leverage a simple JSON file for our search to use.
You can find my example code on the following file.
Or see the end JSON file here.
Note: This process might change if Astro will support this eventually, but for now, this seems like an excellent approach.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Top comments (4)
I love rendering out a bunch of content with a map. Is it really this easy in astro? The last SSG I used was gatsby, and graphql always felt like it made it harder for me.
This looks so easy
Yep!
For me that's a really powerful concept from Astro!
However 11ty for instance also has a similar easy approach.
Thanks for your post, however, Astro doesn't render an actual JSON file, but an HTML file like:
It was to nice to be true :D
Yep aware of it, that's why this is the hacky version of it.
They are working on a more permanent solution for different file extensions.