Background image of hungvu.tech - Enjoy technology in the starry night.
Hung Vu

Headless CMS features comparison

Let's discuss the concept of headless CMS, the features to consider, and which headless CMS is a suitable choice for your portfolio and blog.

Why do I want to find a headless content management system (headless CMS) to build my website for portfolio and blogging purposes? The blogging platforms like Hashnode, Dev, Hackernoon are certainly great places to start. They helped me write and published articles in minutes. That said, I would like to own my data and further, customize the website completely. This is only achievable by creating everything from the ground up, and it would be a fun side project for me so why not!

I started blogging as a hobby, but over time, I realized owning a website is a great way to showcase my experience and opinions. This allows me to further my reach, establish a firm digital presence, and open a gateway to more opportunities. Depending on your niches, there are blogging platforms that help you bootstrap a blogging profile and bring you closers to the audience.

With that said, this article presents my research on headless CMSs and my assessment of available solutions on the market with a focus on support for a blog and portfolio website. Via this article, you can learn about the concept of headless CMS, aspects to consider when choosing a headless CMS, feature comparisons between available CMSs on the market, and what are suitable solutions. This overview includes 12 different headless CMSs, both open-source and proprietary: Strapi, Directus, Sanity, Hygraph (previously named GraphCMS), Prismic, Ghost, Storyblok, Webiny, Contember, Payload, KeystoneJS, and Contentful. I am, by no means an expert in the world of headless CMSs, but hopefully, this is a decent starting point for you.

Also, the follow-up article is available at Strapi vs Directus vs Payload, Headless CMS Comparison.

What is a CMS?

In software development, we can generally say there are three main components: a front end, a back end, and a database. The front end is a presentation layer so clients can interact with an application server, in other words, it is the user interface (e.g., static web page, mobile application interface). Meanwhile, business logic is processed on the back end (server), and the database is used to hold user data.

Traditional CMSs usually use a monolithic architecture, hence it contains all these three components, and the front end is considered the head of CMS. Instead of building your product, traditional CMSs take care of everything for you. They provide pre-defined templates, from the presentation layer to security, data storage, user transactions, and many more. From social media, employee management, and whatnot, there is a pre-built CMS that serves your use cases.

What are the categories of CMSs?

Generally, there are four different categories of CMSs:

  1. Web-based CMSs (traditional CMSs)
  2. Web-based CMSs (but in a decoupled state)
  3. Pure headless CMSs
  4. Customized MACH-based CMSs

Catergories of content management systems.
Catergories of content management systems.

Each category offers self-host, managed-host, and software as a service (SaaS) approaches, but user-friendly solutions towards the right in the diagram are mainly SaaS and vice versa. However, the current trend of the market seems to move toward the middle (grey area), and hence a blurry line is there. The next-gen headless CMSs offer a better user experience and become more focused on a certain vertical, while still maintaining their scalability, open, and developer-friendly nature. On the other hand, traditional monolithic CMSs are trying to be more modular and decoupled as a way to mitigate their downsides and attract a new wave of customers.

As a web developer myself, a headless CMS would be a perfect choice for building a portfolio and blogging site. There is no need to create an extreme MACH-based CMS for such a small website. Besides, the further my website grows, the more advantages I can benefit from the headless CMS due to its customizability and developer-friendly nature.

Headless CMSs and decoupled CMSs are not entirely the same

Headless may sound decoupled to you, and indeed it is, but a headless CMS is more of a subset of the decoupled system. Traditional CMSs can be used in a decoupled manner. For instance, WordPress can operate without the front end, or "headless", but there are two key distinctions:

  1. The decoupled CMS itself has a built-in presentation layer by design, so since its inception, WordPress has assumed principles for designing the front end and what it can work with.
  2. The decoupled CMS itself has pre-defined business logic, object definition, and architecture. They are not supposed to be changed or are relatively unintuitive to modify.

Because of these, a traditional-but-decoupled CMS does not work well when you want to expand the views of your product, or migration to a different technology stack (e.g., on different operating systems). The headless CMSs solve this by:

  1. Having no assumption of the front end.
  2. Allowing developers to model their data schemas from the ground up.

With the separation of concerns, the headless CMSs can be hosted in one place while the front end resides on another server, and changes on one do not affect the other. This freedom allows developers to use a headless CMS as a single source of truth for their multi-platform application, while still being able to optimize and deliver the data in a consistent and structured manner via APIs. Inherently, headless CMSs greatly improve other aspects such as modularity via microservices, scalability, performance, and security.

What to consider when choosing a headless CMS for your portfolio and blog?

This is a contextual question as the answer varies depending on your requirements. Do you want the best performance? Do you want stricter user control? So on and so forth. From a non-expertise perspective, I would ignore most technical aspects for now. In reality, I doubt my website can push the CMS to its extreme anytime soon. Also, considering we have like millions of headless CMSs on the market, I only discuss some popular choices in the article. With that said, let's lay down some core questions to make the comparison:

  1. Does it have a free plan?
  2. Is it open-source?
  3. How can we host it?
  4. What types of content-query APIs does it support?
  5. What types of text editor does it provide by default?
  6. Does it have TypeScript support?
  7. Does it have a media library?
  8. Does it support plugins?
  9. Does it support single sign-on (SSO)?
  10. Does it support article scheduling?
  11. Does it support internationalization?
  12. Does it support any form of content backup or migration?
  13. Does it support a single type? (This feature is rather important because a portfolio is usually a one-off page.)

In the sections below, I will answer these questions in a FAQ format. The answers are based on their latest major version as of the time of writing.

Strapi

You can checkout Strapi at strapi.io.

  1. Does Strapi have a free plan?
  2. Is Strapi open-source?
  3. How can we host Strapi?
  4. What types of content-query APIs does Strapi support?
  5. What types of text editor does Strapi provide by default?
  6. Does Strapi have TypeScript support?
  7. Does Strapi have a media library?
  8. Does Strapi support plugins?
  9. Does Strapi support single sign-on (SSO)?
  10. Does Strapi support article scheduling?
  11. Does Strapi support internationalization?
  12. Does Strapi support any form of content backup or migration?
  13. Does Strapi support a single type?

Directus

You can check out Directus at directus.io.

It is more of a data platform, like database clients (not focusing on content management). Directus can be used on top of the current database and act as a headless CMS.

  1. Does Directus have a free plan?
  2. Is Directus open-source?
  3. How can we host Directus?
  4. What types of content-query APIs does Directus support?
  5. What types of text editor does Directus provide by default?
  6. Does Directus have TypeScript support?
  7. Does Directus have a media library?
  8. Does Directus support plugins?
  9. Does Directus support single sign-on (SSO)?
  10. Does Directus support article scheduling?
  11. Does Directus support internationalization?
  12. Does Directus support any form of content backup or migration?
  13. Does Directus support a single type?

Sanity

You can check out Sanity at sanity.io.

  1. Does Sanity have a free plan?
  2. Is Sanity open-source?
  3. How can we host Sanity?
  4. What types of content-query APIs does Sanity support?
  5. What types of text editor does Sanity provide by default?
  6. Does Sanity have TypeScript support?
  7. Does Sanity have a media library?
  8. Does Sanity support plugins?
  9. Does Sanity support single sign-on (SSO)?
  10. Does Sanity support article scheduling?
  11. Does Sanity support internationalization?
  12. Does Sanity support any form of content backup or migration?
  13. Does Sanity support a single type?

Hygraph (previously named GraphCMS)

You can check out Hygraph at hygraph.com.

  1. Does Hygraph/GraphCMS have a free plan?
  2. Is GraphCMS open-source?
  3. How can we host Hygraph/GraphCMS?
  4. What types of content-query APIs does Hygraph/GraphCMS support?
  5. What types of text editor does Hygraph/GraphCMS provide by default?
  6. Does Hygraph/GraphCMS have TypeScript support?
  7. Does Hygraph/GraphCMS have a media library?
  8. Does Hygraph/GraphCMS support plugins?
  9. Does Hygraph/GraphCMS support single sign-on (SSO)?
  10. Does Hygraph/GraphCMS support article scheduling?
  11. Does Hygraph/GraphCMS support internationalization?
  12. Does Hygraph/GraphCMS support any form of content backup or migration?
  13. Does Hygraph/GraphCMS support a single type?

Prismic

You can check out Prismic at prismic.io.

  1. Does Prismic have a free plan?
  2. Is Prismic open-source?
  3. How can we host Prismic?
  4. What types of content-query APIs does Prismic support?
  5. What types of text editor does Prismic provide by default?
  6. Does Prismic have TypeScript support?
  7. Does Prismic have a media library?
  8. Does Prismic support plugins?
  9. Does Prismic support single sign-on (SSO)?
  10. Does Prismic support article scheduling?
  11. Does Prismic support internationalization?
  12. Does Prismic support any form of content backup or migration?
  13. Does Prismic support a single type?

Ghost

You can check out Ghost at ghost.org.

  1. Does Ghost have a free plan?
  2. Is Ghost open-source?
  3. How can we host Ghost?
  4. What types of content-query APIs does Ghost support?
  5. What types of text editor does Ghost provide by default?
  6. Does Ghost have TypeScript support?
  7. Does Ghost have a media library?
  8. Does Ghost support plugins?
  9. Does Ghost support single sign-on (SSO)?
  10. Does Ghost support article scheduling?
  11. Does Ghost support internationalization?
  12. Does Ghost support any form of content backup or migration?
  13. Does Ghost support a single type?

Storyblok

You can check out Storyblok at storyblok.com/home.

  1. Does Storyblok have a free plan?
  2. Is Storyblok open-source?
  3. How can we host Storyblok?
  4. What types of content-query APIs does Storyblok support?
  5. What types of text editor does Storyblok provide by default?
  6. Does Storyblok have TypeScript support?
  7. Does Storyblok have a media library?
  8. Does Storyblok support plugins?
  9. Does Storyblok support single sign-on (SSO)?
  10. Does Storyblok support article scheduling?
  11. Does Storyblok support internationalization?
  12. Does Storyblok support any form of content backup or migration?
  13. Does Storyblok support a single type?

Webiny

Note: The detail has been updated based on feedback from the Webiny team.

You can check out Webiny at webiny.com.

  1. Does Webiny have a free plan?
  2. Is Webiny open-source?
  3. How can we host Webiny?
  4. What types of content-query APIs does Webiny support?
  5. What types of text editor does Webiny provide by default?
  6. Does Webiny have TypeScript support?
  7. Does Webiny have a media library?
  8. Does Webiny support plugins?
  9. Does Webiny support single sign-on (SSO)?
  10. Does Webiny support article scheduling?
  11. Does Webiny support internationalization?
  12. Does Webiny support any form of content backup or migration?
  13. Does Webiny support a single type?

Contember

Note: The detail has been updated based on feedback from the Contember team.

You can check out Contember at contember.com.

  1. Does Contember have a free plan?
  2. Is Contember open-source?
  3. How can we host Contember?
  4. What types of content-query APIs does Contember support?
  5. What types of text editor does Contember provide by default?
  6. Does Contember have TypeScript support?
  7. Does Contember have a media library?
  8. Does Contember support plugins?
  9. Does Contember support single sign-on (SSO)?
  10. Does Contember support article scheduling?
  11. Does Contember support internationalization?
  12. Does Contember support any form of content backup or migration?
  13. Does Contember support a single type?

Payload CMS

You can check out Payload CMS at payloadcms.com.

  1. Does Payload CMS have a free plan?
  2. Is Payload CMS open-source?
  3. How can we host Payload CMS?
  4. What types of content-query APIs does Payload CMS support?
  5. What types of text editor does Payload CMS provide by default?
  6. Does Payload CMS have TypeScript support?
  7. Does Payload CMS have a media library?
  8. Does Payload CMS support plugins?
  9. Does Payload CMS support single sign-on (SSO)?
  10. Does Payload CMS support article scheduling?
  11. Does Payload CMS support internationalization?
  12. Does Payload CMS support any form of content backup or migration?
  13. Does Payload CMS support a single type?

KeystoneJS

You can check out KeystoneJS at keystonejs.com.

  1. Does KeystoneJS have a free plan?
  2. Is KeystoneJS open-source?
  3. How can we host KeystoneJS?
  4. What types of content-query APIs does KeystoneJS support?
  5. What types of text editor does KeystoneJS provide by default?
  6. Does KeystoneJS have TypeScript support?
  7. Does KeystoneJS have a media library?
  8. Does KeystoneJS support plugins?
  9. Does KeystoneJS support single sign-on (SSO)?
  10. Does KeystoneJS support article scheduling?
  11. Does KeystoneJS support internationalization?
  12. Does KeystoneJS support any form of content backup or migration?
  13. Does KeystoneJS support a single type?

Contentful

You can check out Contentful at contentful.com.

  1. Does Contentful have a free plan?
  2. Is Contentful open-source?
  3. How can we host Contentful?
  4. What types of content-query APIs does Contentful support?
  5. What types of text editor does Contentful provide by default?
  6. Does Contentful have TypeScript support?
  7. Does Contentful have a media library?
  8. Does Contentful support plugins?
  9. Does Contentful support single sign-on (SSO)?
  10. Does Contentful support article scheduling?
  11. Does Contentful support internationalization?
  12. Does Contentful support any form of content backup or migration?
  13. Does Contentful support a single type?

Which headless CMS should you choose for your portfolio and blog?

In the pictures above, you can see the summary of the feature comparison between 12 CMSs based on my research using their documents and marketing materials. Now, let's try to determine suitable CMSs for the portfolio and blog then.

  1. I prefer the CMSs that are free and offer a self-host option. GraphCMS, Prismic, Storyblok, and Contentful are proprietary SaaS. Meanwhile, Sanity stores data on their server, so they are out. SaaS and managed hosting are certainly useful, but to me, it is even better to have freedom of choice.
  2. I only have experience with REST APIs at the moment, so its support is a must. Therefore, Webiny and Contember are out. That said, I might try out GraphQL in the future, so it is great if the CMSs support both options.
  3. Media library is a huge addition for maintenance and user experience in the long run. Ghost and KeystoneJS lack this feature, so they are out.

This leaves only Strapi, Directus, and Payload left. Out of the three, it seems like only Directus has all of the checkmarks, however:

  • Directus admin UI is in Vue, while I am a React developer. This can potentially become an overhead to maintain.
  • Strapi has a much larger community.
  • Both Strapi and Payload CMS offer a React admin UI.
  • These three CMSs are fairly feature-parity.

With that said, I cannot define the winners here. For the next steps, I will download and try out all these three headless CMSs, then write down deeper pros and cons comparisons between them. After all, my observation right now is only the tip of the iceberg, so there is not enough information for a satisfactory conclusion.

Wrap up

This is my very first step in getting into the headless CMSs world. Via this article, we have discussed the role of CMSs in software development, the categories of CMSs, and what headless CMS is about. Besides, we have talked about the important features of CMSs, the comparison of available solutions on the market, and what are the suitable CMSs for your portfolio and blog. Writing everything down gives me a point of reference (like a specification document), and I wish this can give you a sense of starting point too.

Now, which CMS would be your choice for a portfolio and blog site? Please let me know in the comment section below!

Find more technology articles at my blog.

Interested in web development, GitHub Actions, and more? My other articles might be helpful to you!

Also, let's connect!