How to set your Astro blog listing as the homepage

Understanding Astro’s File-Based Routing

Astro uses file-based routing, where the structure of your src/pages directory defines the routes of your website. For example, a file at src/pages/index.astro will render your site’s homepage, while a file at src/pages/blog/[...page].astro will handle the blog listing page, accessible at /blog. The [...page].astro filename is significant because it represents a Dynamic Route that can match multiple pages, making it possible to create paginated blog lists.

Steps to Set the Blog Listing Page the Homepage

I built this blog based on the Dante theme. These instructions represent my changes on Dante, but they can be easily adapted for other themes as well.

1. Move the Blog Listing Page

Move src/pages/blog/[...page].astro to src/pages/[...page].astro to make the blog listing accessible at the root URL (/).

mv src/pages/blog/[...page].astro src/pages/[...page].astro

2. Remove the Existing Homepage

Since the blog listing will now serve as the homepage, you can remove the existing index.astro file.

rm src/pages/index.astro

3. Adjust Blog Post Routes

Move the individual blog post template from src/pages/blog/[id].astro to src/pages/[id].astro. This change will make each blog post accessible at the root URL, such as /post-title instead of /blog/post-title.

mv src/pages/blog/[id].astro src/pages/[id].astro

4. Update Links to Blog Posts

Update the href value of the blog listing item link to remove the blog/ prefix. This ensures that the links in your blog listing page point to the correct post URLs. In case of Dante this has to be done in src/components/PostPreview.astro.

- <a href={`/blog/${post.id}`}>{post.title}/</a>
+ <a href={`/${post.id}`}>{post.title}/</a>

5. Clean Up

Finally, you can remove the now-empty src/pages/blog/ directory, as it’s no longer needed.

rm -r src/pages/blog/

Wrapping Up

I hope you like this little guide! You can see the result visiting my home page. 😊

Happy blogging!