DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

likayeltsova for flotiq

Posted on

Gatsby starter for blog with Flotiq Headless CMS

Kick off your project with this blog boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
Flotiq headless cms Blog Starter

Live Demo: https://flotiqgatsbyblog2.gatsbyjs.io

This project use:

  • Flotiq - Headless CMS for string your data (You can create account here)
  • Tailwind - utility-first CSS framework
  • Flotiq source plugin - connector for fetching data from Flotiq
  • Flotiq components for react - components library designed and written to work perfectly with Flotiq Content Objects and display your data beautifully

This project works on node ^14.17.0 || >=16.0.0, we do not support node 15.

Quick start

  1. Start the project from template using Flotiq CLI
npm install -g flotiq-cli
flotiq start [flotiqApiKey] [projectName] https://github.com/flotiq/flotiq-gatsby-blog-2.git
Enter fullscreen mode Exit fullscreen mode
  • flotiqApKey - Read and write API key to your Flotiq account
  • projectName - project name or project path (if you wish to start project in or import data from the current directory - use .)
  1. You can also start the project from template using Gatsby CLI
gatsby new my-hello-world-starterΒ https://github.com/flotiq/flotiq-gatsby-blog-2.git
Enter fullscreen mode Exit fullscreen mode
  1. Configure application

The next step is to configure our application to know from where it has to fetch the data.

You need to create a file called .env.development inside the root of the directory, with the following structure:

GATSBY_FLOTIQ_API_KEY=YOUR FLOTIQ API KEY
GA_TRACKING_ID=YOUR GA TRACKING KEY
Enter fullscreen mode Exit fullscreen mode
  1. Start developing.

Navigate into your new site’s directory and start it up.

cd flotiq-gatsby-blog-2/
gatsby develop
Enter fullscreen mode Exit fullscreen mode

This step is optional and is not necessary if you used flotiq-cli to start the project.

If you wish to import example data to your account, before running gatsby develop run:

flotiq import [flotiqApiKey] .
Enter fullscreen mode Exit fullscreen mode

It will add two example objects to your Flotiq account.

Note: You need to put your Read and write API key as the flotiqApiKey for import to work, You don't need any content types in your account.

  1. Open the source code and start editing!

Your site is now running at http://localhost:8000!

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby Tutorial.

Open the flotiq-gatsby-blog-2 directory in your code editor of choice and edit src/templates/index.js. Save your changes and the browser will update in real time!

  1. Manage your content using Flotiq editor

You can now easily manage your content using Flotiq editor

Top comments (0)

Dream Big


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category.

β†’ Join the Hackathon <-