Building Flotiq blog with Gatsby Starter

A flexible & minimalistic starter for personal or business purposes.  We have designed this Blog starter for people who create nonstop content but still want to give a certain dynamism illustrated by images or even videos and audio files. With a modern grid, multi layouts & columns and easily customized design. 

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. 

Live Demo

Live demo preview

Live demo preview

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 

Quick start

1. Start the project from template using Flotiq CLI 

npm install -g flotiq-cli 
flotiq start [projectName] https://github.com/flotiq/flotiq-gatsby-blog-2.git [flotiqApiKey]

• projectName - project name or project path (if you wish to start a project in or import data from the current directory - use .)
• flotiqApKey - Read and write API key to your Flotiq account

2. 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

3. 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

4. Start developing. 

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

cd flotiq-gatsby-blog-2/ gatsby develop 

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]

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. 

—

5. 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! 

Manage your content using Flotiq editor 

You can now easily manage your content using Flotiq editor. 

Made with love & passion by Flotiq.