Create a blog with Astro, Contentful & Host with Vercel (All Free)
by Anas Niazi
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.
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.
Consume vercel webhook in Contentful
Now whenever you add a new post in contentful your vercel build will trigger and the new content will be served as static site.
Code is available at github, and live demo can be seen here
Keep building!
Liked this tutorial? You can show Support by giving onetime payment on patreon