Integrating a Headless CMS in a Static Portfolio Workflow

What is a Headless CMS?

A headless CMS is a content management system that delivers content via APIs instead of rendering it directly. This makes it a great fit for Jamstack and static sites, where the frontend (like Next.js) consumes content at build time or runtime.

Benefits in a static workflow:

• Content updates without needing to redeploy the code

• Clear separation between content and presentation

• Multiple editors can update content without repo access

• Fast builds with markdown-like simplicity and dynamic flexibility

Choosing Cockpit CMS

Cockpit was chosen for its lightweight setup, RESTful API, and ease of self-hosting. It runs independently (e.g., cms.domain.com) and exposes structured content like posts or projects via clean endpoints.

Example API call:

curl -X GET "https://cockpit.tld/api/content/item/imprint" \
 -H "api-key: a2ea86ea065a6d2301a8b4a535bc"

(Available at Cockpit Documentation website.)

This setup allows the Next.js frontend to fetch content during getStaticProps or scheduled rebuilds.

Static Generation with Dynamic Content

The portfolio uses the app/ directory in Next.js and is exported with next export. Content is fetched from Cockpit during the build process, and static HTML is generated accordingly.

Key flow:

1. A new post is added in the CMS

2. A webhook triggers a rebuild on Vercel

3. Content is fetched and included in the static output

4. The updated static site is deployed automatically by Vercel

Managing Updates Efficiently

To keep the static site updated, Cockpit can trigger a webhook every time content is saved or modified. This webhook sends a request to Vercel, automatically triggering a rebuild and deployment.

This ensures that live content stays up to date without manual work.

Final Thoughts

Combining a headless CMS with a static build process gives the best of both worlds: speed and security from static sites, plus flexibility and ease of management through dynamic content.

For personal projects, freelance work, or client-facing portfolios, this architecture is scalable, maintainable, and future-ready.