Published: 1/5/2024
Hello Astro World
This is the first post of the blog.
I have been learning Astro π and decided to build something using the Content Collections
feature of Astro.
Technology used on this blog
- Astro
- Tailwindcss installed via
npx astro add tailwind
- Tailwindβs typography via
@tailwindcss/typography
- MDX via
npx astro add mdx
- Astro Icons via
npx astro add astro-icon
Content Collections
I also used Astroβs Content Collections It allows you to setup specific directories where you can store your .md
or .mdx
files (content).
Directory setup
For the blog I used the following folder structure:
/src/
βββ content/
βββ posts/
β βββ post1.mdx
β βββ post2.mdx
β βββ etc.mdx
βββ images/
βββ image1.png
βββ image2.png
βββ etc.png
There is a bit of setup to map href
s to the right location since I wanted the main blog path to be /blog/slug, so a lot of /blog/${post.slug}
template literals work to get the links to all work like I wanted them.
All in all, I think it was a positive experience and really like Astro Hereβs to more buildingβ¦