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

Fibery Showcase
2

Here is how I setup this with gatsby-starter-blog (elaboration on step 1 and 2):

npm update
npm install -g gatsby-cli
npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog
cd gatsby-starter-blog

Create .env on root:

FIBERY_AS_CMS = true
FIBERY_HOST = https://xxxxx.fibery.io
FIBERY_TOKEN = xxxxx
FIBERY_ARTICLE_DATABASE = Articles
FIBERY_ARTICLE_SPACE = Blog

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.

If you have time, I recommend take a look at Getting Started | Gatsby to learn more

2 Likes