Render an Astro Blog Post Page with getStaticPaths

Now it's time to actually render the contents of our blog. To do this we need to leverage Astro's dynamic pages API because the pages that are rendered depend on what we add to our blog folder.

To do this we'll create a [slug].astro file that will handle rendering the pages. Because all pages are statically generated at build time we will tell Astro to build our pages exporting a getStaticPaths function from this file.

We will utilize getCollection again to grab all the posts in our blog.

In getStaticPaths we need to return an object that has two properties:

• params
• props

Params will be the dynamic portion of the page, in this case the slug of the post. Props will be the data that is passed to that dynamic page, we'll use post.

Each post comes with a render function so we can destructure the Content from the post that we will use in the template of the page.

Challenge

You learned how to render content onto a dynamic blog post page but it doesn't look very good. This is because there are no styles applied to your content. Your challenge is to style the blog post content to look like the screen shot down below.

You can do this by utilizing Tailwinds typography package and use it's prose class or apply your styles with your own CSS. One thing to note is that Content lives in a different scope than the page so any styles you add here will need to be marked as global for Astro to pick them up.

Additionally, blogs typically have an index page of all the blog posts they contain. Add a proper blog index page and utilize the code that we wrote on the home page in the index page. This would be a great time to extract that code into an Astro component to reuse.