Astro starter with Contentful

Build your first Astro website with Contentful. Combining Astro with a composable content platform like Contentful increases performance, speeds up build times, and greatly improves developer experience.
With our Astro starter, you’ll have a digital bookshelf up and running in a few clicks. The starter uses Tailwind CSS for design and the Contentful GraphQL API to fetch content.
astro logo with code icon
What is Astro?
Astro is a server-first frontend framework that, combined with Contentful, allows developers to build fast, content-rich websites, including marketing sites, blogs, documentation sites, and ecommerce sites.
1
Create an account

Sign up for a Contentful account. Once you do so, a new space will automatically be created.

2
Create a new Astro project

Run the following command in your terminal to clone the Contentful Astro starter:

Enter a name for your project.

Press Enter to install the dependencies.

Next, if you plan to use TypeScript, select Yes.

Optionally, you can initialize the project as a git repository.

Select your preferred language (TypeScript/JavaScript) and type Y to install the dependencies.

NOTE: When prompted to install dependencies, if you select No, run the npm install command. This will install the dependencies manually.

3
Set up the content model

This starter comes with a script to import the required content model and sample content into your Contentful space.

In your terminal, navigate to the newly created project. Run the following command:

When prompted, enter IDs for the following into the terminal: Space ID, Content Delivery API, and the Content Management API. This will initialize the project, create a new file with the filename .env, and store the credentials in that file. It will also create the required content models, and add sample content to the Contentful space.

4
Run the development server

To start the development server, run the following command in your terminal:

To view the portfolio, navigate to localhost:4321.

5
Push to GitHub

Create a new repository on GitHub, GitLab, or Bitbucket.

Commit the changes and push the code to the new repository.

Make sure to use the correct GitHub username and the repository name.

6
Deploy to Netlify

Create an account on Netlify.

Click Add new site or Import from Git.

Under the Connect to Git provider section, select GitHub and provide the required authorization.

If you are using GitLab or BitBucket, select that instead.

Once authorized, select your newly created GitHub repository.

To add the Contentful credentials - CONTENTFUL_SPACE_ID and CONTENTFUL_DELIVERY_TOKEN, click Show advanced. Then, click New variable and add the environment variables.

To deploy, click Deploy site.

On successful deployment, you’ll be able to view your site live!

What is Astro? All about the JS framework of all frameworks

Astro is a terrific open-source web framework for content-heavy websites like landing pages, blogs, and more. Let's take a tour of Astro and its features.

Choose your technology path with our language and framework agnostic CMS

Bundle of technologies that can be used with Contentful.
More than a CMS: The composable content platform for your tech stack.
Start building with Contentful
Curious guy
add-circle arrow-right remove style-two-pin-marker subtract-circle remove