Payload CMS & Astro
Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
PayloadCMS is a headless open-source content management system that can be used to provide content for your Astro project.
Integrating with AstroSection titled Integrating with Astro
PrerequisitesSection titled Prerequisites
- An Astro project - If you don’t have an Astro project yet, our Installation guide will get you up and running in no time.
- A MongoDB database - PayloadCMS will ask you for a MongoDB connection string when creating a new project. You can set one up locally or use MongoDBAtlas to host a database on the web for free.
- A PayloadCMS REST API - Create a PayloadCMS project and connect it to your MongoDB database during the setup.
Configuring Astro for your PayloadCMS collectionSection titled Configuring Astro for your PayloadCMS collection
Your Payload project template will contain a file called Posts.ts in
src/collections/. If you did not choose a template during installation that created a content collection for you, you can create a new Payload CMS Collection by adding this configuration file manually. The example below shows this file for a collection called
posts that requires
Import and add both
Users(available in all PayloadCMS projects) and any other collections (e.g.
Posts) to the available collections in the
This will make a new collection called “Posts” appear in your PayloadCMS Dashboard next to the “Users” collection.
Enter the “Posts” collection and create a new post. After saving it, you will notice the API URL appear in the bottom right corner.
With the dev server running, open
http://localhost:4321/api/postsin your browser. You should see a JSON file containing the post you have created as an object.
Fetching DataSection titled Fetching Data
Fetch your PayloadCMS data through your site’s unique REST API URL and the route for your content. (By default, PayloadCMS will mount all routes through
/api.) Then, you can render your data properties using Astro’s
Together with your post, PayloadCMS will return some top-level metadata. The actual documents are nested within the
For example, to display a list of post titles and their content:
Building a blog with PayloadCMS and AstroSection titled Building a blog with PayloadCMS and Astro
Create a blog index page
src/pages/index.astro to list each of your posts with a link to its own page.
Fetching via the API returns an array of objects (posts) that include, among others, the following properties:
Using the PayloadCMS API to generate pagesSection titled Using the PayloadCMS API to generate pages
Create a page
src/pages/posts/[slug].astro to dynamically generate a page for each post.
Publishing your siteSection titled Publishing your site
To deploy your site visit our deployment guide and follow the instructions for your preferred hosting provider.
Community ResourcesSection titled Community Resources
- Try this Payload CMS & Astro Template.
- Check out Astroad for easy development and VPS deployment with Docker.