Astro - How to Create Dynamic Pages at the Root of your website
Astro is an amazing framework for creating interactive websites by allowing developers to use their favorite framework underneath. It is an ideal solution for creating static websites, web apps and more.
Best 25 Astro Landing Pages for SaaS Startups, Freelancers, and App Developers
Astro is a fantastic framework for developing interactive web apps, static sites, and content-centric websites. It’s perfect for creating portfolios, landing pages, blogs, CMS, and documentation. Astro allows developers to code using their preferred frameworks like React, Vue, Preact, or Svelte. Additionally, it supports server-side rendering and the creation of
Hazem Abbas
If you are an astro developer, here is a quick hack in how to create dynamic pages at the root of your website, such as /about , /[page-one], /[page-two].
In the following code snippet, we will demonstrate how to achieve that.
25 Astro Template Starters for Blogs, Landing Pages, Websites, and More
What is Astro? Astro is a cutting-edge and innovative static site builder and framework that empowers developers with the ability to effortlessly create highly performant and optimized websites. By seamlessly combining the best of static and dynamic technologies, Astro enables developers to take advantage of the benefits of both worlds.
Hazem Abbas
Here, you can see that we created dynamic pages based on array selected page ID that matches the Markdown files in our content directory.
Code
---
import Site from '../site.config.json'
import { getCollection } from "astro:content";
export async function getStaticPaths() : Promise<any> {
// var pagesArr = ["about","api","goals","how-to-use","privacy-policy"]
return Site.pages.map((page)=>{
return {params: {page: page}}
})
}
const pages = await getCollection("pages");
const path: String = Astro.params["page"];
let page = pages.find((page: any) => {
if(!page || !page.data || !page.slug){
return
}
return page.slug == Astro.params["page"];
});
const { Content } = await page.render();
---
<div class="prose dark:prose-invert p-10 w-full lg:w-8/12 mx-auto">
<div class="py-4">
{Site.pages.map((page)=>(
<>
<a href={"/"+page} class="p-1x text-xs capitalizex uppercase mx-1 text-gray-500 hover:text-gray-800 ">{page}</a>
</>
)
)}
</div>
<article class="prose dark:prose-invert p-10x w-full ">
<h1 class="text-4xl">{page.data.title}</h1>
<div class="grid grid-cols-1">
<p class="text-xs">Author: {page.data.author} <br/>{page.data.date}</p>
</div>
<Content />
</article>
</div>Read more
Best 11 Open-source Astro Templates for Startups, Developers, and Agencies
Astro is a modern static site builder that allows you to build websites using any framework or none at all. It provides a developer-friendly experience by allowing you to use your favorite tools and libraries, such as React, Vue.js, or Svelte, while still delivering fast performance. What is Astro
Hazem Abbas
10 Top Open-source Free Tailwind Templates and Starters For Reactjs, Next.js, Vue and Astro to Create Stunning Landing Pages
If you’re looking for free Tailwind templates for landing pages, you’re in luck! There are many open-source options available that can help you create stunning and responsive landing pages. These templates are built using the Tailwind CSS framework, which offers a wide range of pre-designed components and utilities that make
Hazem Abbas
Take Your Astro Website to the Next Level with These 10 Open-source HTML5 Templates and Tailwind Resources
In this post, you will find the best open-source Astro templates, and Tailwind CSS snippets and resources to build an interactive website within no time. However, if you are looking for a pure Astro templates, we got you covered here, 25 Astro Template Starters for Blogs, Landing Pages, Websites, and
Hazem Abbas