Get started with Astro

Integrate your headless CMS into your Astro application.

Setup

Create a blog in your dashboard and copy your Blog ID. Add your CMS URL and Blog ID to your environment variables. You can use cms.zenex.dev (hosted) or your own deployment.

.env

# .env
PUBLIC_CMS_URL=https://cms.zenex.dev
PUBLIC_BLOG_ID=your-blog-id

src/pages/blog.astro

---
// src/pages/blog.astro
const CMS_URL = import.meta.env.PUBLIC_CMS_URL;
const BLOG_ID = import.meta.env.PUBLIC_BLOG_ID;

const res = await fetch(`${CMS_URL}/api/blogs/${BLOG_ID}/posts?status=published&page=1&limit=10`);
const { data: posts, pagination } = await res.json();
---

<div>
  {posts.map((post) => (
    <article>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
      <a href={`/blog/${post.slug}`}>Read more</a>
    </article>
  ))}
</div>

Dynamic Routes

Use Astro's dynamic routes to fetch individual posts.

src/pages/blog/[slug].astro

---
// src/pages/blog/[slug].astro
const { slug } = Astro.params;
const CMS_URL = import.meta.env.PUBLIC_CMS_URL;
const BLOG_ID = import.meta.env.PUBLIC_BLOG_ID;

const res = await fetch(`${CMS_URL}/api/blogs/${BLOG_ID}/posts/${slug}`);
const { data: post } = await res.json();
---

<article>
  <h1>{post.title}</h1>
  {post.coverImage && <img src={post.coverImage} alt={post.title} />}
  <p>{post.excerpt}</p>
</article>

Static Site Generation

Pre-render all blog posts at build time using getStaticPaths.

src/pages/blog/[slug].astro

---
// src/pages/blog/[slug].astro
export async function getStaticPaths() {
  const CMS_URL = import.meta.env.PUBLIC_CMS_URL;
  const BLOG_ID = import.meta.env.PUBLIC_BLOG_ID;
  
  const res = await fetch(`${CMS_URL}/api/blogs/${BLOG_ID}/posts?status=published&limit=100`);
  const { data: posts } = await res.json();
  
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
---

<article>
  <h1>{post.title}</h1>
  <p>{post.excerpt}</p>
</article>