RankFloRankFlo
6 min read

Build a Blog with Astro and a Headless CMS (Step-by-Step)

Astro is the fastest static site framework. Pair it with a headless CMS for a blog that scores 100 on Lighthouse every time.

R

ruben

Why Astro + Headless CMS

Astro ships zero JavaScript by default, producing the fastest possible web pages. Pair it with a headless CMS and you get a blog with perfect Lighthouse scores, instant page loads, and full content management for non-technical team members.

Step 1: Create Your Astro Project

npm create astro@latest my-blog\ncd my-blog

Step 2: Set Up Your CMS

Create a project in your headless CMS and get your API key. In RankFlo, go to Settings, then API Keys, and create a read-only key.

Step 3: Fetch Content

// src/lib/cms.ts\nconst API_URL = import.meta.env.CMS_API_URL;\nconst KEY = import.meta.env.CMS_PROJECT_KEY;\n\nexport async function getPosts() {\n  const res = await fetch(\n    `${API_URL}/api/v1/content?project_key=${KEY}&sort=newest`\n  );\n  return res.json();\n}

Step 4: Create the Blog Listing

---\n// src/pages/blog/index.astro\nimport { getPosts } from '../../lib/cms';\nconst { data: posts } = await getPosts();\n---\n<html>\n  <body>\n    {posts.map(post => (\n      <article>\n        <a href={`/blog/${post.slug}`}>{post.title}</a>\n        <p>{post.excerpt}</p>\n      </article>\n    ))}\n  </body>\n</html>

Step 5: Dynamic Post Pages

---\n// src/pages/blog/[slug].astro\nimport { getPosts } from '../../lib/cms';\nexport async function getStaticPaths() {\n  const { data } = await getPosts();\n  return data.map(post => ({ params: { slug: post.slug }, props: { post } }));\n}\nconst { post } = Astro.props;\n---\n<article set:html={post.content} />

Step 6: Deploy

Deploy to Vercel, Netlify, or Cloudflare Pages. Your blog will achieve perfect Lighthouse scores with zero JavaScript shipped to the browser.

← Back to blog