Introduction
In my previous post, I walked through the creation of DaleyDownload.com as a static portfolio site. It was fast, it looked good, and it solved the "two-person portfolio" problem. But it had one major flaw, updates were a chore if I intended to implement a blog for my portion of the site.
To fix a typo or add a new project, I had to open VS Code, edit the source code, commit the changes to GitHub, and wait for a redeploy. That works for code and isn't too much of a hassle, but it’s terrible for content deployment. I knew that if I wanted to blog in a user-friendly manner that I needed a system that separated what I write from how the site is built.
This is where I learned of Contentful, a Headless CMS, and the magic of Vercel Deploy Hooks.
Why Headless?
For those new to the term (as I also was), a "Headless CMS" is a content management system that provides a backend for editing content but doesn't dictate how the frontend looks. Unlike similar platforms like WordPress, which gives you themes and pages, Contentful just gives you an API to post the content.
I chose this route for two main reasons:
Freedom:
I could keep my custom Next.js/Tailwind frontend without needing to re-build it on another platform and customize it more as needed.
Learning:
I wanted to gain experience working with APIs and fetching data in a React environment as my API experience until now was quite limited.
The Implementation
1. Modeling the Content
The first step happened inside Contentful. I had to define the "Shape" of a blog post. I created a Content Model with fields that mapped to what I needed in the UI:
Title: Text (Short)
Slug: Text (for the URL, e.g.,
/blog/my-post)Excerpt: Text (Long)
Content: Rich Text (The actual blog content)
Author: Reference to an Author Content Type with my Name
Published Date: Date & Time
Tags: Short Text
Featured: Boolean
2. The Next.js Connection
Connecting Next.js to Contentful was surprisingly smooth (other than some failed builds on my end, initially). I used the Contentful SDK to fetch data.
The logic works like this:
When a user visits the blog index, Next.js asks Contentful:
"Give me X amount of the most recent posts."
Contentful responds with a JSON object containing the text and image URLs.
Next.js takes that JSON and maps it into the React components I built (the cards you see on the blog page).
The trickiest part was the Rich Text. Contentful sends the blog body as a complex JSON tree, not HTML. I had to use @contentful/rich-text-react-renderer to translate that JSON into my Tailwind-styled components. This gave me total control. For example, I could tell the system, "Whenever you see a Paragraph node, style it with text-gray-700 leading-relaxed." Much of this work was greatly assisted by CoPilot for GitHub in VS Code in helping me find what did and did not work for properly displaying Rich Text.
The Automation: Webhooks & Vercel
The coolest part of this setup is the automation. I didn't want to manually trigger a build every time I wrote a post, which is where Contentful's Webhooks and Vercel Deploy Hooks come in.
The Problem
Since Next.js generates pages at build time, a new blog post wouldn't appear on the site until the site was rebuilt.
The Solution: Deploy Hooks
I utilized a feature in Vercel called Deploy Hooks. This provides a unique URL that, when "pinged," tells Vercel to rebuild the website.
I took that URL and pasted it into Contentful's Webhook settings which allowed for posts from Contentful to initiate a re-deployment of the site with the new content. The process looks something like this:
I write a post in Contentful and hit "Publish."
Contentful sends a "POST" request to the Vercel Deploy Hook.
Vercel receives the signal and starts a new build.
Within a minute, the new blog post is live on the site!
Conclusion
Integrating Contentful has helped transform what was once a static brochure into more of an actual application. It helped to bridge the gap between the need to publish content and ease of use, compared to doing the work manually.
Additionally, now I can write from anywhere and see it go live automatically. It’s a powerful stack that I highly recommend to any developer looking to build a personal portfolio.