+{ + articles.items.map((post) => (
• {post.title}
+ )) +}

{article.title}

{ article.content.map((content) => (

{ content.__typename === "Assets" && } { content.__typename === 'Text' &&

}

)) }

Astro + Statamic 🚀

)) } ``` #### GraphQL [Section titled “GraphQL”](#graphql) Fetch your Statamic data with your site’s GraphQL API URL. By default, it’s `https://[YOUR-SITE]/graphql/`. Then, you can render your data properties using Astro’s `set:html={}` directive. For example, to display a list of titles and their content from a selected [collection](https://statamic.dev/collections): src/pages/index.astro ```astro --- const graphqlQuery = { query: ` query Entries($page: Int, $locale: String) { entries( collection: "posts" sort: "date asc" limit: 20 page: $page filter: { locale: $locale } ) { current_page has_more_pages data { title ... on Entry_Posts_Post { content } } } } `, variables: { page: page, locale: locale, }, }; const res = await fetch("https://[YOUR-SITE]/graphql", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(graphqlQuery), }) const { data } = await res.json(); const entries = data?.entries; ---

Astro + Statamic 🚀

)) } ``` ### Publishing your site [Section titled “Publishing your site”](#publishing-your-site) To deploy your Astro site visit our [deployment guides](/en/guides/deploy/) and follow the instructions for your preferred hosting provider. ## Community Resources [Section titled “Community Resources”](#community-resources) * [How to build a static site using Statamic as headless CMS](https://buddy.works/guides/statamic-rest-api) * [Implementing Astro live previews in headless Statamic](https://maciekpalmowski.dev/implementing-live-previews-in-headless-statamic-when-using-astro/) ## Themes [Section titled “Themes”](#themes) * [ Creek](https://astro.build/themes/details/creek/) # Storyblok & Astro > Add content to your Astro project using Storyblok as a CMS [Storyblok](https://www.storyblok.com/) is a component-based headless CMS that allows you to manage your content using reusable components called Bloks. ## Integrating with Astro [Section titled “Integrating with Astro”](#integrating-with-astro) In this section, you will use the [Storyblok integration](https://github.com/storyblok/storyblok-astro) to connect Storyblok to Astro. ### Prerequisites [Section titled “Prerequisites”](#prerequisites) To get started, you will need to have the following: 1. **An Astro project** - If you don’t have an Astro project yet, our [Installation guide](/en/install-and-setup/) will get you up and running in no time. 2. **A Storyblok account and space** - If you don’t have an account yet, [sign up for free](https://app.storyblok.com/#/signup) and create a new space. 3. **Storyblok Preview token** - This token will be used to fetch drafts and published versions of your content. You can find and generate your API token in the Access Tokens tab of your Storyblok space settings. ### Setting up credentials [Section titled “Setting up credentials”](#setting-up-credentials) To add your Storyblok credentials to Astro, create a `.env` file in the root of your project with the following variable: .env ```ini STORYBLOK_TOKEN=YOUR_PREVIEW_TOKEN ``` Now, you should be able to use these environment variables in your project. Your root directory should now include this new file: * **.env** * astro.config.mjs * package.json ### Installing dependencies [Section titled “Installing dependencies”](#installing-dependencies) To connect Astro with your Storyblok space, install the official [Storyblok integration](https://github.com/storyblok/storyblok-astro) using the command below for your preferred package manager: * npm ```shell npm install @storyblok/astro vite ``` * pnpm ```shell pnpm add @storyblok/astro vite ``` * Yarn ```shell yarn add @storyblok/astro vite ``` ### Configuring Storyblok [Section titled “Configuring Storyblok”](#configuring-storyblok) Modify your Astro config file to include the Storyblok integration: astro.config.mjs ```js import { defineConfig } from 'astro/config'; import { storyblok } from '@storyblok/astro'; import { loadEnv } from 'vite'; const env = loadEnv("", process.cwd(), 'STORYBLOK'); export default defineConfig({ integrations: [ storyblok({ accessToken: env.STORYBLOK_TOKEN, components: { // Add your components here }, apiOptions: { // Choose your Storyblok space region region: 'us', // optional, or 'eu' (default) }, }) ], }); ``` The Storyblok integration requires an object with the following properties: 1. `accessToken` - This references the Storyblok API token that you added in the previous step. 2. `components` - An object that maps Storyblok component names to paths to your local components. This is required to render your Storyblok Bloks in Astro. 3. `apiOptions` - An object containing [Storyblok API options](https://github.com/storyblok/storyblok-astro#options). Caution By default, the region is `eu`. If your Storyblok space was created in the US region, you will need to set the region to `us`. ### Connecting Bloks to Astro components [Section titled “Connecting Bloks to Astro components”](#connecting-bloks-to-astro-components) To connect your Bloks to Astro, create a new folder named `storyblok` in the `src` directory. This folder will contain all the Astro components that will match your Bloks in your Storyblok Blok library. In this example, you have a `blogPost` Blok content type in your Storyblok library with the following fields: * `title` - A text field * `description` - A text field * `content` - A rich text field Our goal is to create the equivalent Astro component that will use these fields to render its content. To do this, create a new file named `BlogPost.astro` inside `src/storyblok` with the following content: src/storyblok/BlogPost.astro ```astro --- import { storyblokEditable, renderRichText } from '@storyblok/astro' const { blok } = Astro.props const content = renderRichText(blok.content) ---

{blok.title}

{blok.description}

``` The `blok` property contains the data that you will receive from Storyblok. It also contains the fields that were defined in the `blogPost` content type Blok in Storyblok. To render our content, the integration provides utility functions such as: * `storyblokEditable` - it adds the necessary attributes to the elements so that you can edit them in Storyblok. * `renderRichText` - it transforms the rich text field into HTML. Your root directory should include this new file: * .env * astro.config.mjs * package.json Finally, to connect the `blogPost` Blok to the `BlogPost` component, add a new property to your components object in your Astro config file. * The key is the name of the Blok in Storyblok. In this case, it is `blogPost`. * The value is the path to the component. In this case, it is `storyblok/BlogPost`. Caution The `key` should exactly match your Blok name in Storyblok to be referenced correctly. If these don’t match, or you’re trying to reference a component that doesn’t exist in Storyblok, you’ll get an error. astro.config.mjs ```diff import { defineConfig } from 'astro/config'; import { storyblok } from '@storyblok/astro'; import { loadEnv } from 'vite'; const env = loadEnv("", process.cwd(), 'STORYBLOK'); export default defineConfig({ integrations: [ storyblok({ accessToken: env.STORYBLOK_TOKEN, components: { + blogPost: 'storyblok/BlogPost', }, apiOptions: { region: 'us', }, }) ], }); ``` ### Fetching data [Section titled “Fetching data”](#fetching-data) To test the setup, in Storyblok create a new story with the `blogPost` content type named `test-post`. In Astro, create a new page in the `src/pages/` directory named `test-post.astro` with the following content: src/pages/test-post.astro ```astro --- import { useStoryblokApi } from '@storyblok/astro' import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro' const storyblokApi = useStoryblokApi() const { data } = await storyblokApi.get("cdn/stories/test-post", { version: import.meta.env.DEV ? "draft" : "published", }); const content = data.story.content; --- ``` To query your data, use the `useStoryblokApi` hook. This will initialize a new client instance using your integration configuration. To render your content, pass the `content` property of the Story to the `StoryblokComponent` as a `blok` prop. This component will render the Bloks that are defined inside the `content` property. In this case, it will render the `BlogPost` component. ## Making a blog with Astro and Storyblok [Section titled “Making a blog with Astro and Storyblok”](#making-a-blog-with-astro-and-storyblok) With the integration set up, you can now create a blog with Astro and Storyblok. ### Prerequisites [Section titled “Prerequisites”](#prerequisites-1) 1. **A Storyblok space** - For this tutorial, we recommend using a new space. If you already have a space with Bloks, feel free to use them, but you will need to modify the code to match the Blok names and content types. 2. **An Astro project integrated with Storyblok** - See [integrating with Astro](#integrating-with-astro) for instructions on how to set up the integration. ### Creating a blok library [Section titled “Creating a blok library”](#creating-a-blok-library) To create Bloks, go to the Storyblok app and click on the **Block Library** tab. Click on the `+ New blok` button and create the following Bloks: 1. `blogPost` - A content type Blok with the following fields: * `title` - A text field * `description` - A text field * `content` - A rich text field 2. `blogPostList` - An empty nestable Blok 3. `page` - A content type Blok with the following fields: * `body` - A nestable Blok ### Creating content [Section titled “Creating content”](#creating-content) To add new content, go to the content section by clicking on the **Content** tab. Using the Blok library that you created in the previous step, create the following stories: 1. `home` - A content type story with the `page` Blok. Inside the `body` field, add a `blogPostList` Blok. 2. `blog/no-javascript` - A story with the `blogPost` content type inside the blog folder. ```yaml title: No JavaScript description: A sample blog post content: Hi there! This blog post doesn't use JavaScript. ``` 3. `blog/astro-is-amazing` - A story with the `blogPost` content type inside the blog folder. ```yaml title: Astro is amazing description: We love Astro content: Hi there! This blog post was build with Astro. ``` Now that you have your content ready, return to your Astro project and start building your blog. ### Connecting Bloks to components [Section titled “Connecting Bloks to components”](#connecting-bloks-to-components) To connect your newly created Bloks to Astro components, create a new folder named `storyblok` in your `src` directory and add the following files: `Page.astro` is a nestable Block content type component that will recursively render all the Bloks inside the `body` property of the `page` Blok. It also adds the `storyblokEditable` attributes to the parent element which will allow us to edit the page in Storyblok. src/storyblok/Page.astro ```astro --- import { storyblokEditable } from '@storyblok/astro' import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro"; const { blok } = Astro.props ---

{ blok.body?.map((blok) => { return }) }

``` `BlogPost.astro` will render the `title`, `description` and `content` properties of the `blogPost` Blok. To transform the `content` property from a rich text field to HTML, you can use the `renderRichText` helper function. src/storyblok/BlogPost.astro ```astro --- import { storyblokEditable, renderRichText } from '@storyblok/astro' const { blok } = Astro.props const content = renderRichText(blok.content) ---

{blok.title}

{blok.description}

``` `BlogPostList.astro` is a nestable Blok content type component that will render a list of blog post previews. It uses the `useStoryblokApi` hook to fetch all the stories with the content type of `blogPost`. It uses the `version` query parameter to fetch the draft versions of the stories when in development mode and the published versions when building for production. `Astro.props` is used to set up the editor in Storyblok. Additional props can also be passed to your component here, if needed. src/storyblok/BlogPostList.astro ```astro --- import { storyblokEditable } from '@storyblok/astro' import { useStoryblokApi } from '@storyblok/astro' const storyblokApi = useStoryblokApi(); const { data } = await storyblokApi.get('cdn/stories', { version: import.meta.env.DEV ? "draft" : "published", content_type: 'blogPost', }) const posts = data.stories.map(story => { return { title: story.content.title, date: new Date(story.published_at).toLocaleDateString("en-US", {dateStyle: "full"}), description: story.content.description, slug: story.full_slug, } }) const { blok } = Astro.props ---

{posts.map(post => (
• {post.date} {post.title}

  {post.description}

))}

``` Finally, add your components to the `components` property of the `storyblok` config object in `astro.config.mjs`. The key is the name of the Blok in Storyblok, and the value is the path to the component relative to `src`. astro.config.mjs ```diff import { defineConfig } from 'astro/config'; import { storyblok } from '@storyblok/astro'; import { loadEnv } from 'vite'; const env = loadEnv("", process.cwd(), 'STORYBLOK'); export default defineConfig({ integrations: [ storyblok({ accessToken: env.STORYBLOK_TOKEN, components: { + blogPost: 'storyblok/BlogPost', + blogPostList: 'storyblok/BlogPostList', + page: 'storyblok/Page', }, apiOptions: { region: 'us', }, }) ], }); ``` ### Generating pages [Section titled “Generating pages”](#generating-pages) To create a route for a specific `page`, you can fetch its content directly from the Storyblok API and pass it to the `StoryblokComponent` component. Remember to make sure you have added the `Page` component to your astro.config.mjs. Create an `index.astro` file in `src/pages/` to render the `home` page: src/pages/index.astro ```astro --- import { useStoryblokApi } from '@storyblok/astro' import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro' import BaseLayout from '../layouts/BaseLayout.astro' const storyblokApi = useStoryblokApi(); const { data } = await storyblokApi.get('cdn/stories/home', { version: import.meta.env.DEV ? "draft" : "published", }); const content = data.story.content; --- ``` To generate pages for all of your blog posts, create a `.astro` page that will create dynamic routes. This approach varies depending on whether your routes are prerendered (the default in Astro) or [rendered on demand](/en/guides/on-demand-rendering/). #### Static site generation [Section titled “Static site generation”](#static-site-generation) If you are using Astro’s default static site generation, you will use [dynamic routes](/en/guides/routing/#dynamic-routes) and the `getStaticPaths` function to generate your project pages. Create a new directory `src/pages/blog/` and add a new file called `[...slug].astro` with the following code: src/pages/blog/\[...slug].astro ```astro --- import { useStoryblokApi } from '@storyblok/astro' import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro' export async function getStaticPaths() { const sbApi = useStoryblokApi(); const { data } = await sbApi.get("cdn/stories", { content_type: "blogPost", version: import.meta.env.DEV ? "draft" : "published", }); const stories = Object.values(data.stories); return stories.map((story) => { return { params: { slug: story.slug }, }; }); } const sbApi = useStoryblokApi(); const { slug } = Astro.params; const { data } = await sbApi.get(`cdn/stories/blog/${slug}`, { version: import.meta.env.DEV ? "draft" : "published", }); const story = data.story; --- ``` This file will generate a page for each story, with the slug and content fetched from the Storyblok API. #### On-demand rendering [Section titled “On-demand rendering”](#on-demand-rendering) If you are [rendering your routes on demand with an adapter](/en/guides/on-demand-rendering/), you will use dynamic routes to fetch the page data from Storyblok. Create a new directory `src/pages/blog/` and add a new file called `[...slug].astro` with the following code: src/pages/blog/\[...slug].astro ```astro --- import { useStoryblokApi } from '@storyblok/astro' import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro' const storyblokApi = useStoryblokApi() const slug = Astro.params.slug; let content; try { const { data } = await storyblokApi.get(`cdn/stories/blog/${slug}`, { version: import.meta.env.DEV ? "draft" : "published", }); content = data.story.content } catch (error) { return Astro.redirect('/404') } --- ``` This file will fetch and render the page data from Storyblok that matches the dynamic `slug` parameter. Since you are using a redirect to `/404`, create a 404 page in `src/pages`: src/pages/404.astro ```astro

Sorry, this page does not exist.

``` If the story is not found, the request will be redirected to the 404 page. ### Publishing your site [Section titled “Publishing your site”](#publishing-your-site) To deploy your website, visit our [deployment guides](/en/guides/deploy/) and follow the instructions for your preferred hosting provider. #### Rebuild on Storyblok changes [Section titled “Rebuild on Storyblok changes”](#rebuild-on-storyblok-changes) If your project is using Astro’s default static mode, you will need to set up a webhook to trigger a new build when your content changes. If you are using Netlify or Vercel as your hosting provider, you can use its webhook feature to trigger a new build from Storyblok events. ##### Netlify [Section titled “Netlify”](#netlify) To set up a webhook in Netlify: 1. Go to your site dashboard and click on **Build & deploy**. 2. Under the **Continuous Deployment** tab, find the **Build hooks** section and click on **Add build hook**. 3. Provide a name for your webhook and select the branch you want to trigger the build on. Click on **Save** and copy the generated URL. ##### Vercel [Section titled “Vercel”](#vercel) To set up a webhook in Vercel: 1. Go to your project dashboard and click on **Settings**. 2. Under the **Git** tab, find the **Deploy Hooks** section. 3. Provide a name for your webhook and the branch you want to trigger the build on. Click **Add** and copy the generated URL. ##### Adding a webhook to Storyblok [Section titled “Adding a webhook to Storyblok”](#adding-a-webhook-to-storyblok) In your Storyblok space **Settings**, click on the **Webhooks** tab. Paste the webhook URL you copied in the **Story published & unpublished** field and hit `Save` to create a webhook. Now, whenever you publish a new story, a new build will be triggered and your blog will be updated. ## Official Resources [Section titled “Official Resources”](#official-resources) * Storyblok provides an [Astro Integration](https://www.storyblok.com/mp/announcing-storyblok-astro) to add Storyblok to your project. ## Community Resources [Section titled “Community Resources”](#community-resources) * [Getting the Visual Editor to work for Storyblok + Astro](https://dev.to/sandrarodgers/getting-the-visual-editor-to-work-for-storyblok-astro-2gja) by Sandra Rodgers * [Astro + Storyblok: SSR preview for instant visual editing](https://dev.to/jgierer12/astro-storyblok-ssr-preview-for-instant-visual-editing-3g9m) by Jonas Gierer * [Astro-Storyblok Previews Site with Netlify’s Branch Deploys Feature](https://dev.to/sandrarodgers/astro-storyblok-previews-site-with-netlifys-branch-deploys-feature-44dh) by Sandra Rodgers # Strapi & Astro > Add content to your Astro project using Strapi Headless CMS [Strapi](https://strapi.io/) is an open-source, customizable, headless CMS. ## Integrating with Astro [Section titled “Integrating with Astro”](#integrating-with-astro) This guide will build a wrapper function to connect Strapi with Astro. ### Prerequisites [Section titled “Prerequisites”](#prerequisites) To get started, you will need to have the following: 1. **An Astro project** - If you don’t have an Astro project yet, our [Installation guide](/en/install-and-setup/) will get you up and running in no time. 2. **A Strapi CMS server** - You can [set up a Strapi server on a local environment](https://docs.strapi.io/dev-docs/quick-start). ### Adding the Strapi URL in `.env` [Section titled “Adding the Strapi URL in .env”](#adding-the-strapi-url-in-env) To add your Strapi URL to Astro, create a `.env` file in the root of your project (if one does not already exist) and add the following variable: .env ```ini STRAPI_URL="http://127.0.0.1:1337" # or use your IP address ``` Restart the dev server to use this environment variable in your Astro project. If you would like to have IntelliSense for your environment variable, you can create a `env.d.ts` file in the `src/` directory and configure `ImportMetaEnv` like this: src/env.d.ts ```ts interface ImportMetaEnv { readonly STRAPI_URL: string; } ``` Your root directory should now include the new file(s): * **.env** * astro.config.mjs * package.json ### Creating the API wrapper [Section titled “Creating the API wrapper”](#creating-the-api-wrapper) Create a new file at `src/lib/strapi.ts` and add the following wrapper function to interact with the Strapi API: src/lib/strapi.ts ```ts interface Props { endpoint: string; query?: Record; wrappedByKey?: string; wrappedByList?: boolean; } /** * Fetches data from the Strapi API * @param endpoint - The endpoint to fetch from * @param query - The query parameters to add to the url * @param wrappedByKey - The key to unwrap the response from * @param wrappedByList - If the response is a list, unwrap it * @returns */ export default async function fetchApi({ endpoint, query, wrappedByKey, wrappedByList, }: Props): Promise { if (endpoint.startsWith('/')) { endpoint = endpoint.slice(1); } const url = new URL(`${import.meta.env.STRAPI_URL}/api/${endpoint}`); if (query) { Object.entries(query).forEach(([key, value]) => { url.searchParams.append(key, value); }); } const res = await fetch(url.toString()); let data = await res.json(); if (wrappedByKey) { data = data[wrappedByKey]; } if (wrappedByList) { data = data[0]; } return data as T; } ``` This function requires an object with the following properties: 1. `endpoint` - The endpoint you are fetching. 2. `query` - The query parameters to add to the end of URL 3. `wrappedByKey` - The `data` key in the object that wraps your `Response`. 4. `wrappedByList` - A parameter to “unwrap” the list returned by Strapi, and return only the first item. ### Optional: Creating the Article interface [Section titled “Optional: Creating the Article interface”](#optional-creating-the-article-interface) If you are using TypeScript, create the following Article interface to correspond to the Strapi content types at `src/interfaces/article.ts`: src/interfaces/article.ts ```ts export default interface Article { documentId: number; title: string; description: string; content: string; slug: string; createdAt: string; updatedAt: string; publishedAt: string; } ``` * .env * astro.config.mjs * package.json ### Displaying a list of articles [Section titled “Displaying a list of articles”](#displaying-a-list-of-articles) 1. Update your home page `src/pages/index.astro` to display a list of blog posts, each with a description and a link to its own page. 2. Import the wrapper function and the interface. Add the following API call to fetch your articles and return a list: src/pages/index.astro ```astro --- import fetchApi from '../lib/strapi'; import type Article from '../interfaces/article'; const articles = await fetchApi({ endpoint: 'articles', // the content type to fetch wrappedByKey: 'data', // the key to unwrap the response }); --- ``` The API call requests data from `http://localhost:1337/api/articles` and returns `articles`: an array of json objects representing your data: ```json [ { documentId: 1, title: "What's inside a Black Hole", description: "Maybe the answer is in this article, or not...", content: "Well, we don't know yet...", slug: "what-s-inside-a-black-hole", createdAt: "2023-05-28T13:19:46.421Z", updatedAt: "2023-05-28T13:19:46.421Z", publishedAt: "2023-05-28T13:19:45.826Z" }, // ... ] ``` 3. Using data from the `articles` array returned by the API, display your Strapi blog posts in a list. These posts will link to their own individual pages, which you will create in the next step. src/pages/index.astro ```astro --- import fetchApi from '../lib/strapi'; import type Article from '../interfaces/article'; const articles = await fetchApi({ endpoint: 'articles?populate=image', wrappedByKey: 'data', }); ---

{ articles.map((article) => (
• {article.title}
)) }

``` ### Generating article pages [Section titled “Generating article pages”](#generating-article-pages) Create the file `src/pages/blog/[slug].astro` to [dynamically generate a page](/en/guides/routing/#dynamic-routes) for each article. * .env * astro.config.mjs * package.json #### Static site generation [Section titled “Static site generation”](#static-site-generation) In Astro’s default static mode (SSG), use [`getStaticPaths()`](/en/reference/routing-reference/#getstaticpaths) to fetch your list of articles from Strapi. src/pages/blog/\[slug].astro ```astro --- import fetchApi from '../../lib/strapi'; import type Article from '../../interfaces/article'; export async function getStaticPaths() { const articles = await fetchApi({ endpoint: 'articles', wrappedByKey: 'data', }); return articles.map((article) => ({ params: { slug: article.slug }, props: article, })); } type Props = Article; const article = Astro.props; --- ``` Create the template for each page using the properties of each post object. src/pages/blog/\[slug].astro ```diff --- import fetchApi from '../../lib/strapi'; import type Article from '../../interfaces/article'; export async function getStaticPaths() { const articles = await fetchApi({ endpoint: 'articles', wrappedByKey: 'data', }); return articles.map((article) => ({ params: { slug: article.slug }, props: article, })); } type Props = Article; const article = Astro.props; --- +

{article.title}

+

{article.content}

+ + +{article.content} + + +

``` #### On-demand rendering [Section titled “On-demand rendering”](#on-demand-rendering) If you’ve [opted into on-demand rendering with an adapter](/en/guides/on-demand-rendering/), [generate your dynamic routes](/en/guides/routing/#on-demand-dynamic-routes) using the following code: Create the `src/pages/blog/[slug].astro` file: src/pages/blog/\[slug].astro ```astro --- import fetchApi from '../../../lib/strapi'; import type Article from '../../../interfaces/article'; const { slug } = Astro.params; let article: Article; try { article = await fetchApi

({ endpoint: 'articles', wrappedByKey: 'data', wrappedByList: true, query: { 'filters[slug][$eq]': slug || '', }, }); } catch (error) { return Astro.redirect('/404'); } ---

{article.title}

{article.content}

{article.content}

``` This file will fetch and render the page data from Strapi that matches the dynamic `slug` parameter. Since you are using a redirect to `/404`, create a 404 page in `src/pages`: src/pages/404.astro ```astro

Sorry, this page does not exist.

``` If the article is not found, the user will be redirected to this 404 page and be greeted by a lovely cat. ### Publishing your site [Section titled “Publishing your site”](#publishing-your-site) To deploy your website, visit our [deployment guides](/en/guides/deploy/) and follow the instructions for your preferred hosting provider. #### Rebuild on changes [Section titled “Rebuild on changes”](#rebuild-on-changes) If your project is using Astro’s default static mode, you will need to set up a webhook to trigger a new build when your content changes. If you are using Netlify or Vercel as your hosting provider, you can use its webhook feature to trigger a new build from Strapi. ##### Netlify [Section titled “Netlify”](#netlify) To set up a webhook in Netlify: 1. Go to your site dashboard and click on **Build & deploy**. 2. Under the **Continuous Deployment** tab, find the **Build hooks** section and click on **Add build hook**. 3. Provide a name for your webhook and select the branch you want to trigger the build on. Click on **Save** and copy the generated URL. ##### Vercel [Section titled “Vercel”](#vercel) To set up a webhook in Vercel: 1. Go to your project dashboard and click on **Settings**. 2. Under the **Git** tab, find the **Deploy Hooks** section. 3. Provide a name for your webhook and the branch you want to trigger the build on. Click **Add** and copy the generated URL. ##### Adding a webhook to Strapi [Section titled “Adding a webhook to Strapi”](#adding-a-webhook-to-strapi) Follow [the Strapi webhooks guide](https://strapi.io/blog/webhooks) to create a webhook in your Strapi admin panel. ## Official Resources [Section titled “Official Resources”](#official-resources) * [Strapi Blog Guide For React](https://strapi.io/blog/build-a-blog-with-next-react-js-strapi) by Strapi # StudioCMS & Astro > Build and manage content for your Astro project using StudioCMS, a headless CMS designed specifically for Astro. [StudioCMS](https://studiocms.dev/) is a headless CMS for Astro, built with Astro, that provides a user-friendly and configurable dashboard for content management as well as a custom rendering system to display your Astro components. ## Official resources [Section titled “Official resources”](#official-resources) * [StudioCMS documentation](https://docs.studiocms.dev/) * [StudioCMS GitHub repository](https://github.com/withstudiocms/studiocms) * [StudioCMS Discord community](https://chat.studiocms.dev) # Tina CMS & Astro > Add content to your Astro project using Tina as a CMS [Tina CMS](https://tina.io/) is a Git-backed headless content management system. ## Integrating with Astro [Section titled “Integrating with Astro”](#integrating-with-astro) To get started, you’ll need an existing Astro project. 1. Run the following command to install Tina into your Astro project. * npm ```shell npx @tinacms/cli@latest init ``` * pnpm ```shell pnpm dlx @tinacms/cli@latest init ``` * Yarn ```shell yarn dlx @tinacms/cli@latest init ``` - When prompted for a Cloud ID, press `Enter` to skip. You’ll generate one later if you want to use Tina Cloud. - When prompted “What framework are you using”, choose **Other**. - When asked where public assets are stored, press `Enter`. After this has finished, you should now have a `.tina` folder in the root of your project and a generated `hello-world.md` file at `content/posts`. 2. Change the `dev` script in `package.json`: * npm package.json ```diff { "scripts": { -"dev": "astro dev", +"dev": "tinacms dev -c \"astro dev\"" } } ``` * pnpm package.json ```diff { "scripts": { -"dev": "astro dev", +"dev": "tinacms dev -c \"astro dev\"" } } ``` * Yarn package.json ```diff { "scripts": { -"dev": "astro dev", +"dev": "tinacms dev -c \"astro dev\"" } } ``` 3. TinaCMS is now set up in local mode. Test this by running the `dev` script, then navigating to `/admin/index.html#/collections/post`. Editing the “Hello, World!” post will update the `content/posts/hello-world.md` file in your project directory. 4. Set up your Tina collections by editing the `schema.collections` property in `.tina/config.ts`. For example, you can add a required “date posted” frontmatter property to our posts: .tina/config.ts ```diff import { defineConfig } from "tinacms"; // Your hosting provider likely exposes this as an environment variable const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main"; export default defineConfig({ branch, clientId: null, // Get this from tina.io token: null, // Get this from tina.io build: { outputFolder: "admin", publicFolder: "public", }, media: { tina: { mediaRoot: "images", publicFolder: "public", }, }, schema: { collections: [ { name: "posts", label: "Posts", path: "src/content/posts", format: 'mdx', fields: [ { type: "string", name: "title", label: "Title", isTitle: true, required: true, }, + { + type: "datetime", + name: "posted", + label: "Date Posted", + required: true, + }, { type: "rich-text", name: "body", label: "Body", isBody: true, }, ], }, ], }, }); ``` Learn more about Tina collections [in the Tina docs](https://tina.io/docs/reference/collections/). 5. In production, TinaCMS can commit changes directly to your GitHub repository. To set up TinaCMS for production, you can choose to use [Tina Cloud](https://tina.io/docs/tina-cloud/) or self-host the [Tina Data Layer](https://tina.io/docs/self-hosted/overview/). You can [read more about registering for Tina Cloud](https://app.tina.io/register) in the Tina Docs. ## Official Resources [Section titled “Official Resources”](#official-resources) * [TinaCMS Astro integration guide](https://tina.io/docs/frameworks/astro/). ## Community Resources [Section titled “Community Resources”](#community-resources) * [Astro Tina Starter with visual editing](https://github.com/dawaltconley/tina-astro) by Jeff See + Dylan Awalt-Conley * [Astro Tina Starter with basic editing](https://github.com/tombennet/astro-tina-starter/tree/main) by Tom Bennet * [Using Astro’s Image Optimization with Tina](https://joschua.io/posts/2023/08/16/how-to-use-astro-assets-with-tina-cms/) ## Themes [Section titled “Themes”](#themes) * [ Resume01](https://astro.build/themes/details/resume01/) * [ Qurno Blog](https://astro.build/themes/details/qurno-astro/) # Umbraco & Astro > Add content to your Astro project using Umbraco as a CMS [Umbraco CMS](https://umbraco.com/) is an open-source ASP.NET Core CMS. By default, Umbraco uses Razor pages for its front-end, but can be used as a headless CMS. ## Integrating with Astro [Section titled “Integrating with Astro”](#integrating-with-astro) In this section you will use Umbraco’s native [Content Delivery API](https://docs.umbraco.com/umbraco-cms/reference/content-delivery-api) to provide content to your Astro project. ### Prerequisites [Section titled “Prerequisites”](#prerequisites) To get started, you will need to have the following: 1. **An Astro project** - If you don’t have an Astro project yet, our [Installation guide](/en/install-and-setup/) will get you up and running in no time. 2. **An Umbraco (v12+) project** - If you don’t have an Umbraco project yet, please see this [Installation guide](https://docs.umbraco.com/umbraco-cms/fundamentals/setup/install/). ### Setting up the Content Delivery API [Section titled “Setting up the Content Delivery API”](#setting-up-the-content-delivery-api) To enable the Content Delivery API, update your Umbraco project’s `appsettings.json` file: appsettings.json ```json { "Umbraco": { "CMS": { "DeliveryApi": { "Enabled": true, "PublicAccess": true } } } } ``` You can configure additional options as needed such as public access, API keys, allowed content types, membership authorisation, and more. See the [Umbraco Content Delivery API documentation](https://docs.umbraco.com/umbraco-cms/reference/content-delivery-api) for more information. ### Fetching Data [Section titled “Fetching Data”](#fetching-data) Use a `fetch()` call to the Content Delivery API to access your content and make it available to your Astro components. The following example displays a list of fetched articles, including properties such as the article date and content. src/pages/index.astro ```astro --- const res = await fetch('http://localhost/umbraco/delivery/api/v2/content?filter=contentType:article'); const articles = await res.json(); ---

Astro + Umbraco 🚀

{ articles.items.map((article) => (

{article.name}

{article.properties.articleDate}

)) } ``` Read more about [data fetching in Astro](/en/guides/data-fetching/). ## Building a blog with Umbraco and Astro [Section titled “Building a blog with Umbraco and Astro”](#building-a-blog-with-umbraco-and-astro) ### Prerequisites [Section titled “Prerequisites”](#prerequisites-1) * **An Astro project** - If you don’t have an Astro project yet, our [Installation guide](/en/install-and-setup/) will get you up and running in no time. * **An Umbraco project (v12+)** with the Content Delivery API enabled - Follow this [Installation guide](https://docs.umbraco.com/umbraco-cms/fundamentals/setup/install/) to create a new project. ### Creating blog posts in Umbraco [Section titled “Creating blog posts in Umbraco”](#creating-blog-posts-in-umbraco) From the [Umbraco backoffice](https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice), create a Document Type for a simple blog article called ‘Article’. 1. Configure your ‘Article’ Document Type with the following properties: * Title (DataType: Textstring) * Article Date (DataType: Date Picker) * Content (DataType: Richtext Editor) 2. Toggle “Allow as root” to `true` on the ‘Article’ document type. 3. From the “Content” section in the Umbraco backoffice, [create and publish your first blog post](https://docs.umbraco.com/umbraco-cms/fundamentals/data/defining-content). Repeat the process as many times as you like. For more information, watch a [video guide on creating Document Types](https://www.youtube.com/watch?v=otRuIkN80qM). ### Displaying a list of blog posts in Astro [Section titled “Displaying a list of blog posts in Astro”](#displaying-a-list-of-blog-posts-in-astro) Create a `src/layouts/` folder, then add a new file `Layout.astro` with the following code: src/layouts/Layout.astro ```astro --- ---

``` Your project should now contain the following files: To create a list of blog posts, first `fetch` to call the Content Delivery API `content` endpoint and filter by contentType of ‘article’. The article objects will include the properties and content set in the CMS. You can then loop through the articles and display a each title with a link to its article. Replace the default contents of `index.astro` with the following code: src/pages/index.astro ```astro --- import Layout from '../layouts/Layout.astro'; const res = await fetch('http://localhost/umbraco/delivery/api/v2/content?filter=contentType:article'); const articles = await res.json(); ---

Blog Articles

{ articles.items.map((article: any) => (

{article.properties.title}

{article.properties.articleDate}

Read more

)) } ``` ### Generating individual blog posts [Section titled “Generating individual blog posts”](#generating-individual-blog-posts) Create the file `[...slug].astro` at the root of the `/pages/` directory. This file will be used to [generate the individual blog pages dynamically](/en/guides/routing/#dynamic-routes). Note that the `params` property, which generates the URL path of the page, contains `article.route.path` from the API fetch. Similarly, the `props` property must include the entire `article` itself so that you can access all the information in your CMS entry. Add the following code to `[...slug].astro` which will create your individual blog post pages: \[...slug].astro ```astro --- import Layout from '../layouts/Layout.astro'; export async function getStaticPaths() { let data = await fetch("http://localhost/umbraco/delivery/api/v2/content?filter=contentType:article"); let articles = await data.json(); return articles.items.map((article: any) => ({ params: { slug: article.route.path }, props: { article: article }, })); } const { article } = Astro.props; ---

{article.properties.title}

{article.properties.articleDate}

``` Your project should now contain the following files: With the dev server running, you should now be able to view your Umbraco-created content in your browser preview of your Astro project. Congratulations! 🚀 ## Publishing your site [Section titled “Publishing your site”](#publishing-your-site) To deploy your site visit our [deployment guides](/en/guides/deploy/) and follow the instructions for your preferred hosting provider. ## Local dev, HTTPS and self-signed SSL certificates [Section titled “Local dev, HTTPS and self-signed SSL certificates”](#local-dev-https-and-self-signed-ssl-certificates) If you are using the Umbraco HTTPS endpoint locally, any `fetch` queries will result in `fetch failed` with code `DEPTH_ZERO_SELF_SIGNED_CERT`. This is because Node (upon which Astro is built) won’t accept self-signed certificates by default. To avoid this, use the Umbraco HTTP endpoint for local dev. Alternatively, you can set `NODE_TLS_REJECT_UNAUTHORIZED=0` in an `env.development` file and update `astro.config.js` as shown: .env.development ```ini NODE_TLS_REJECT_UNAUTHORIZED=0 ``` astro.config.mjs ```js import { defineConfig } from 'astro/config'; import { loadEnv } from "vite"; const { NODE_TLS_REJECT_UNAUTHORIZED } = loadEnv(process.env.NODE_ENV, process.cwd(), ""); process.env.NODE_TLS_REJECT_UNAUTHORIZED = NODE_TLS_REJECT_UNAUTHORIZED; // https://astro.build/config export default defineConfig({}); ``` This method is described in more detail in this [blog post showing how to configure your project for self-signed certificates](https://kjac.dev/posts/jamstack-for-free-with-azure-and-cloudflare/), with an [accompanying repo](https://github.com/kjac/UmbracoAzureCloudflare). ## Official Documentation [Section titled “Official Documentation”](#official-documentation) * [Content Delivery API - Umbraco Documentation](https://docs.umbraco.com/umbraco-cms/reference/content-delivery-api) ## Community Resources [Section titled “Community Resources”](#community-resources) * [Astro-nomically Performant Websites using the Content Delivery API - Louis Richardson](https://24days.in/umbraco-cms/2023/sustainable-performant/astronomically-performant/) * [Generating a TypeScript OpenAPI client from Umbraco’s Content Delivery API - Rick Butterfield](https://rickbutterfield.dev/blog/typescript-openapi-umbraco-content-delivery/) * [Jamstack For Free With Azure And CloudFlare - Kenn Jacobsen](https://kjac.dev/posts/jamstack-for-free-with-azure-and-cloudflare/) * [Quick n’ dirty blog with Astro and Umbraco - Kenn Jacobsen](https://kjac.dev/posts/quick-n-dirty-blog-with-astro-and-umbraco/) * [Talk: Bake, Don’t Fry - Astro & The Content Delivery API - Adam Prendergast](https://www.youtube.com/watch?v=zNxqI25dtx4) # Headless WordPress & Astro > Add content to your Astro project using WordPress as a CMS [WordPress](https://wordpress.org/) is a content management system that includes its own frontend, but can also be used as a headless CMS to provide content to your Astro project. ## Integrating with Astro [Section titled “Integrating with Astro”](#integrating-with-astro) WordPress comes with a built-in [WordPress REST API](https://developer.wordpress.org/rest-api/) to connect your WordPress data to Astro. You can optionally install [WPGraphQL](https://wordpress.org/plugins/wp-graphql/) or [Gato GraphQL](https://wordpress.org/plugins/gatographql/) on your site to use GraphQL. ### Prerequisites [Section titled “Prerequisites”](#prerequisites) To get started, you will need to have the following: 1. **An Astro project** - If you don’t have an Astro project yet, our [Installation guide](/en/install-and-setup/) will get you up and running in no time. 2. **A WordPress site** - Your site’s REST API is `[YOUR_SITE]/wp-json/wp/v2/` and is available by default with any WordPress site. It is also possible to [set up WordPress on a local environment](https://wordpress.org/support/article/installing-wordpress-on-your-own-computer/). ### Setting up Credentials [Section titled “Setting up Credentials”](#setting-up-credentials) Your WordPress REST API is available to external requests for data fetching without authentication by default. This does not allow users to modify your data or site settings and allows you to use your data in your Astro project without any credentials. You may choose to [require authentication](https://developer.wordpress.org/rest-api/frequently-asked-questions/#require-authentication-for-all-requests) if necessary. ### Fetching Data [Section titled “Fetching Data”](#fetching-data) Fetch your WordPress data through your site’s unique REST API URL and the route for your content. (For a blog, this will commonly be `posts`.) Then, you can render your data properties using Astro’s `set:html={}` directive. For example, to display a list of post titles and their content: src/pages/index.astro ```astro --- const res = await fetch("https://[YOUR-SITE]/wp-json/wp/v2/posts"); const posts = await res.json(); ---

Astro + WordPress 🚀

{ posts.map((post) => (

)) } ``` The WordPress REST API includes [global parameters](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/) such as `_fields` and `_embed`. A large quantity of data is available to you via this API, so you may wish to only fetch certain fields. You can restrict your response by adding the [`_fields`](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/#_fields) parameter to the API URL, for example: `[YOUR-SITE]/wp/v2/posts?_fields=author,id,excerpt,title,link` The API can also return content related to your post, such as a link to the parent post, or to comments on the post. You can add the [`_embed`](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/#_embed) parameter to the API URL (e.g. `[YOUR-SITE]/wp/v2/posts?_embed`) to indicate to the server that the response should include these embedded resources. ## Building a blog with WordPress and Astro [Section titled “Building a blog with WordPress and Astro”](#building-a-blog-with-wordpress-and-astro) This example fetches data from the public WordPress API of . This WordPress site stores information about individual dinosaurs under the `dinos` route, just as a blog would store individual blog posts under the `posts` route. This example shows how to reproduce this site structure in Astro: an index page that lists dinosaurs with links to dynamically-generated individual dinosaur pages. ### Displaying a list of WordPress posts [Section titled “Displaying a list of WordPress posts”](#displaying-a-list-of-wordpress-posts) The page `src/pages/index.astro` lists each dinosaur, with a description and link to its own page. * astro.config.mjs * package.json Fetching via the API returns an object that includes the properties: * `title.rendered` - Contains the HTML rendering of the title of the post. * `content.rendered` - Contains the HTML rendering of the content of the post. * `slug` - Contains the slug of the post. (This provides the link to the dynamically-generated individual dinosaur pages.) /src/pages/index.astro ```astro --- import Layout from "../layouts/Layout.astro"; let res = await fetch("https://norian.studio/wp-json/wp/v2/dinos"); let posts = await res.json(); ---

List of Dinosaurs

{ posts.map((post) => (

)) }

``` ### Using the WordPress API to generate pages [Section titled “Using the WordPress API to generate pages”](#using-the-wordpress-api-to-generate-pages) The page `src/pages/dinos/[slug].astro` [dynamically generates a page](/en/guides/routing/#dynamic-routes) for each dinosaur. /src/pages/dinos/\[slug].astro ```astro --- import Layout from '../../layouts/Layout.astro'; const { slug } = Astro.params; let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}`); let [post] = await res.json(); // The getStaticPaths() is required for static Astro sites. // If using SSR, you will not need this function. export async function getStaticPaths() { let data = await fetch("https://norian.studio/wp-json/wp/v2/dinos"); let posts = await data.json(); return posts.map((post) => ({ params: { slug: post.slug }, props: { post: post }, })); } ---

``` ### Returning embedded resources [Section titled “Returning embedded resources”](#returning-embedded-resources) The `_embed` query parameter instructs the server to return related (embedded) resources. src/pages/dinos/\[slug].astro ```astro --- const { slug } = Astro.params; let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}&_embed`); let [post] = await res.json(); --- ``` The `_embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url` property is returned, and can be used to display the featured image on each dinosaur page. (Replace `medium` with your desired image size.) /src/pages/dinos/\[slug].astro ```astro

``` ### Publishing your site [Section titled “Publishing your site”](#publishing-your-site) To deploy your site visit our [deployment guides](/en/guides/deploy/) and follow the instructions for your preferred hosting provider. ## Community Resources [Section titled “Community Resources”](#community-resources) * [Building An Astro Website With WordPress As A Headless CMS](https://blog.openreplay.com/building-an-astro-website-with-wordpress-as-a-headless-cms/) by Chris Bongers. * [Building with Astro x WordPress](https://www.youtube.com/watch?v=Jstqgklvfnc) on Ben Holmes’s stream. * [Building a Headless WordPress Site with Astro](https://developers.wpengine.com/blog/building-a-headless-wordpress-site-with-astro) by Jeff Everhart. * [Astro and WordPress as an API](https://darko.io/posts/wp-as-an-api/) by Darko Bozhinovski. ## Production Sites [Section titled “Production Sites”](#production-sites) The following sites use Astro + WordPress in production: * [Dinos!](https://wc-dinos.netlify.app/) by Anindo Neel Dutta — [source code on GitHub](https://github.com/leen-neel/astro-wordpress) ## Themes [Section titled “Themes”](#themes) * [ Astro WordPress Starter](https://astro.build/themes/details/astro-wordpress-starter/) ## Community Resources [Section titled “Community Resources”](#community-resources-1) [Introduction to Astro + WordPress ](https://dev.to/bngmnn/leveraging-wordpress-as-a-headless-cms-for-your-astro-website-a-comprehensive-guide-a4d) [Astro + WPGraphQL for more secure WordPress sites ](https://www.youtube.com/watch?v=fWxn-r83ygQ) [Shattering Headless WordPress Build Times with Astro's Content Layer API ](https://andrewkepson.com/blog/headless-wordpress/build-time-astro-content-layer-api/) [How to Set Up a Headless WordPress Site with Astro ](https://dev.to/mathiasahlgren/how-to-set-up-a-headless-wordpress-site-with-astro-3a2h) [Build a static site with WordPress and Astro ](https://kinsta.com/blog/wordpress-astro/) [Going Headless WordPress with Astro ](https://www.youtube.com/watch?v=MP2TR6Z_YTc) [Leveraging WordPress as a Headless CMS for Your Astro Website: API Configuration & Data Fetching ](https://medium.com/@bangemann.dev/configure-wordpress-rest-api-setup-data-fetching-4af5161095f6) [WordPress Headless with Astro - Installing Astro and Fetching posts with WP-GraphQL ](https://www.youtube.com/watch?v=2PSqABrME28) [Make a Headless WordPress Site with Astro ](https://www.youtube.com/watch?v=54U7dVmhyxE) [WPEngine Astro Headless WordPress Starter Demo ](https://www.youtube.com/watch?v=BcoxZZIfESI) [Headless WordPress with Astro – Build a Simple Blog from Scratch with Tailwind CSS ](https://fullstackdigital.io/blog/headless-wordpress-with-astro-build-a-simple-blog/) [Building an E-commerce Website with Headless WordPress and Astro ](https://shaxadd.medium.com/building-an-e-commerce-website-with-headless-wordpress-and-astro-2712d8c8b735) [Building a Headless WordPress Site with Astro ](https://wpengine.com/builders/building-headless-wordpress-site-astro/) [Building an Astro Website with WordPress as a Headless CMS ](https://blog.openreplay.com/building-an-astro-website-with-wordpress-as-a-headless-cms/)