3/24/2018Time to read: 4 min
I recently moved all my blogs to Contentful. It has been a very pleasant experience migrating and writing blogs on Contentful. So I thought I would tribute a post to talk about it. (This post is not sponsored by Contentful)
Contentful is a headless CMS (content management system). Unlike traditional CMS, we either have to host it ourselves or pay to use their service. Traditional CMS usually comes with a lot of restriction on how we build our site. Contentful gives us total freedom on the data structure for our blog and the front end technology stack.
I am just writing blogs, why can't I just use static site generator? I used to use static site generator, such as Jekyll and Hexo. To create a new post, I would create a new markdown file in a specific location, and use any text editor of my choice to edit. When I finish the post, I would run a command to generate the static assets and push to Github Pages.
One thing I don't like static site generator is that they have very strict project structure. I built a personal website using whatever technology I like, then I want to add a blog to it. It turned out to be pretty hard. I have to modify my website project structure to what Jekyll or Hexo understand. Finally, I gave up and served them in two different domains.
Static site generator is very hard to customize too. To display the post into our custom format, we need to write templates. Templates contain various fields that a static site generator defines. I was too lazy to read the documentation for all those fields. So I just picked an existing theme.
I learned about Contentful when I was checking out the example for GastbyJS. Gatsby is still a static site generator. It has a relatively flexible project structure and total freedom on the look and feel of my site.
But I still don't enjoy manually creating a text file each time I start a new post.
Contentful solved this problem.
Contentful is very easy to get started with. I started by looking at a sample project, and without much effect, I understood how it works.
First, we need to define a content model. Those are the types of data we are storing in the database. I only have one type --
Post. We can add any number of fields to the type, and name our fields whatever we want.
Those fields will match the Ajax response when we query for an entry.
Writing a post is as simple as filling out a web form in Contentful. Contentful generates the form based on the content model that we defined. What's cooler is that all the contents are automatically saved, so we will never worry about not saving our post.
Adding an image is super simple too. When I was using static site generator, adding an image usually means the following steps:
With contentful, we can drag and drop local files, or import from other online storage. Contentful save the images in their database and automatically insert a link at our cursor in the post editor.
Posts published on Contentful are not available to general public (unless we want our readers to write a
curl command every time they want to read our posts. We need to provide a site that calls the Contentful endpoint to fetch our posts. Contentful provided integration for various languages and they are very easy to integrate into existing projects.
The truth is, we can use static site generators with Contentful and get the best of both worlds. Gatsby is one example. There is a Gatsby Contentful plugin that let us fetch all the posts front Contentful during build time and generates all the posts statically.
Contentful is awesome. Once I started writing posts in their interface, I never want to go back to text-editors. Although it requires some setup to integrate into existing projects, the process is very simple. You should try it out!