This tutorial will teach you what content collections are and how they work in Astro 2.0.
After creating a new Astro 2.0 project from scratch, we will create a content collection for blog posts. We will also define a collection schema that will validate the Frontmatter of our blog posts, making it typesafe. Finally, we will learn how to generate dynamic routes for each post in the blog content collection.
This tutorial assumes you are already familiar with how dynamic routes work in Astro. If this concept is new to you, we highly recommend you read Astro’s official docs to familiarize yourself with them. Throughout the tutorial, we will have links to various sections of the docs and external resources where you can learn more.
We’ve got a lot to cover, so let’s get started.
Content collections are one of the latest features released in Astro 2.0. They allow you to better organize your markdown and MDX content via the new src/content directory and provide type safety for your Frontmatter and content. You can also query content collections to pull them into your templates and generate routes for each piece of content.
<aside> 💡 This may all sound a bit abstract at the moment, but don’t worry. We will cover everything in detail throughout this tutorial, and by the end, you will be ready to create content collections in your own Astro projects.
</aside>
We can create an Astro 2.0 project by entering the following into our terminal.
npm create astro@latest
When asked if you would like to install the latest Astro package, press y on your keyboard for yes.
astro-content-collections, but you can name it whatever you want. Press Enter to continue.
y to install NPM dependenciesn for no, as we won’t need it for this tutorial.