Fibery as a CMS: how we automatically publish posts from Fibery to our Gatsby blog

Fibery as a CMS is an interesting idea to explore. We run our Fibery blog in Gatsby with static .md files, but Fibery can produce content in Markdown format. We decided to automate blog posts publishing and integrated Fibery with Gatsby.

Blog space structure

We created Blog Space in our Fibery account (you can install it into your workspace using this template link). Blog space has three databases:

From the user perspective everything is easy: you just create new Article entity, and write a text. Here is the list of Articles in Blog Space with one article opened on the right:

Tech details

The article database has “Publish” Action Button. This button triggers the blog CI pipeline. The CI pipeline fetches data content using a JavaScript script from Fibery and writes the markdown file to the file system. Then, it triggers the Gatsby build and pushes the new blog to the production cluster.

Here is the article in our real blog, and here is the article in Blog Space (pay attention to some fields on the right that we use to add tags, date and other meta to the blog post):

The main idea behind the script is to traverse a Fibery document, fetch images from Fibery, save them to the file system, replace the Fibery link with the local file link, and transform the document into a specific format that a blogging system can use as a source for an article.

This script implemented naive approach for fetching data and doesn’t handle rate limit api error. This script needs improvements such adding cache for already fetched images and adding API request limit to fibery.

Quote from Michael, who writes a lot:

Now I can write and update articles really fast without any special knowledge. While I enjoyed VSCode and Markdown, Fibery text editor is much more pleasant experience. You can add images faster, don’t think how to format this and that, use AI right here to make proofreading and corrections. It really saves time and removes a barrier for blog posting.

Setup

  1. Install Blog Space from Blog template
  2. You should have Gatsby blog and some pipeline in GitLab that updates it on commit.
  3. Create The CI pipeline that fetches data content using a JavaScript script from Fibery and writes the markdown file to the file system. Then, it triggers the Gatsby build and pushes the new blog to the production cluster.
  4. The article database has an automation button. This button triggers the blog CI pipeline, here is the Script that you should put into button Action (provide correct pipeline trigger URL)
// HTTP allows to send requests to external services
const http = context.getService('http');
const date = +(new Date());

await http.postAsync(`https://gitlab.com/api/v4/projects/191.../ref/master/trigger/pipeline?token=glptt-798f7....&variables[BLOG_VERSION]=${date}`);
  1. Create new article and publish it via a button click.
10 Likes