Create a blog with Astro, Contentful & Host with Vercel (All Free)

4 min readJan 22, 2023

Note: most of the description is generated via chatgpt as I am exploring it how much it is helpful in writing blogs, so if something don’t look right do check the official documentation attached in the descriptions.

What is Astro?

Astro.build is a tool for building and deploying web projects built with the Astro template language. It converts the source code written in Astro into HTML, CSS and JavaScript and can also perform tasks such as minifying code and optimizing images. It’s CLI allows developers to configure project settings and run commands to build, test and deploy the project.

What is Contentful?

Contentful is a cloud-based content management system (CMS) that enables users to create, manage, and distribute content across multiple platforms and devices. It provides a web-based interface for content editors and a powerful API for developers to easily retrieve and display the content in their own applications. It allows for decoupling the content management from the presentation layer, it’s widely used by companies of all sizes across various industries.

Tech stack used in this project

Astro (Static Site Generator)
Tailwind (For styling)
Gsap (Animation)
Contentful ( CMS)
Vercel (Hosting)
Github (Hosting Source Code)

What we are building in this project?

Setting up Contentful to use it as a cms
Setting up astro project
Styling via tailwind and some minimal animations via gsap.
Hosting the website on vercel
Keep the vercel website upto date whenever you add a new post in contentful.

All source code is available at github, check it out.

Setting up Contentful

Astro.build did a great job describing how to setup contentful for astro or in general so check it out and setup contentful in their article.

Make sure your fields in contentful matches with below, otherwise project may break.

Title
Blog Content
Blog Post Image
Tags
Date
slug
Meta Title
Meta Description
Og Image

The content model name is ‘Blog post’ so make sure its the same name.

Note: in development mode the unpublished content from contentful will be rendered but in build process only published content will be output to your dist directory.

Setting up Astro

Fork/download the github project and add the credentials for contentful in a .env file you got from above contentful article.

Setting up Vercel

Create a free vercel account and you can actually create the website from the vercel dashboard but there is a easier way to do it by a chrome extension which provides 1 click setup via github repo , install the extension from here (This is a official vercel chrome extension)

After Adding your repo, don’t forget to add the environment variables which is not in your github repo, we need these to rebuild the project once you have new posts or an update to a post.

Project -> Settings -> Environment Variables

Now your project is live but there is no way your blog will remain in sync with your contentful posts, so in order to do that we will add some triggers so once it hits your project in vercel build itself and new blog posts will be statically generated to view.

Create webhook in vercel

Create a hook from your vercel project, give it a name and the branch name you want to trigger build for, in this case we want to run build process on our ‘master’ branch.