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.
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:
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.
You should have Gatsby blog and some pipeline in GitLab that updates it on commit.
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.
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}`);
Create new article and publish it via a button click.
Save my modified script as read-content-from-fibery.mjs on root. Note that the import section needs to be like this:
import "dotenv/config"
import got from "got"
import process from "node:process"
import { extname, basename } from "node:path"
import unified from "unified"
import remarkParse from "remark-parse"
import visit from "unist-util-visit"
import { pipeline as streamPipeline } from "node:stream/promises"
import { createWriteStream } from "node:fs"
import { mkdir, writeFile, readdir } from "node:fs/promises"
import toMarkdown from "mdast-util-to-markdown"
and line 259 should be:
const articleDir = `content/blog/${article.slug}`
Create .gitlab-ci.yml on root:
image: node:latest
cache:
paths:
- node_modules/
# Enables git-lab CI caching. Both .cache and public must be cached, otherwise builds will fail.
- .cache/
- public/
pages:
script:
- yarn install
- yarn add react-scripts
- node read-content-from-fibery.mjs
- ./node_modules/.bin/gatsby build --prefix-paths
artifacts:
paths:
- public
only:
- main
Test:
node read-content-from-fibery.mjs
npm run develop
You should see new articles getting fetched to content\blog folder, and your result is now ready in http://localhost:8000/. If everything works, then delete the articles you just download, and you can now push your repo to Gitlab.
We started using Gatsby in 2020. Gatsby was the most popular static blog system at that time. The default template used JavaScript as the main language. We don’t see any advantage in migrating our blog to TypeScript, maybe in the future.
Typescript will not significantly improve our blog, but we will need to invest time in transitioning to it. However, most of Fibery services use Typescript, and we begin new services with Typescript.
The current button let us immediately trigger data from fibery to gitlab.
So about {Date} field, Do we have any way to set auto schedule for publishing. I wanna set an automation for this On exactly date field on time
