···9292 {i === 0 && <hr />}
9393 <hgroup>
9494 <h2>
9595- <a href={`/blog/posts/${p.slug}`}>{p.data.title}</a>
9595+ <a href={`/blog/posts/${p.id}`}>{p.data.title}</a>
9696 </h2>
9797 <h3>
9898 {p.data.date.toLocaleDateString("en-us", {
···104104 </h3>
105105 </hgroup>
106106 <p>
107107- {p.data.summary} <a href={`/blog/posts/${p.slug}`}>Read More</a>
107107+ {p.data.summary} <a href={`/blog/posts/${p.id}`}>Read More</a>
108108 </p>
109109 <hr />
110110 </>
···114114```
115115116116Great! I'll probably fiddle with it in the future but it's a good start. Now we need to make a page for each post.
117117-To make my URLs look nice I'm going to create a subfolder within `blog` called `posts` and then place a `[...slug].astro` in there.
117117+To make my URLs look nice I'm going to create a subfolder within `blog` called `posts` and then place a `[...id].astro` in there.
118118This will allow me to use `getStaticPaths()` to define the paths for each post.
119119120120```astro
···124124export const getStaticPaths = async () => {
125125 const posts = await getCollection("posts");
126126 return posts.map((entry) => ({
127127- params: { slug: entry.slug },
127127+ params: { slug: entry.id },
128128 props: { entry }
129129 }));
130130};
···171171 {
172172 headings.map((h) => (
173173 <li>
174174- <a href={`#${h.slug}`}>{h.text}</a>
174174+ <a href={`#${h.id}`}>{h.text}</a>
175175 </li>
176176 ))
177177 }