Flotiq Starter — Gatsby Blog

Gatsby blog starter for creating a modern blog with Flotiq headless CMS

Blog starter designed and managed by Flotiq

Gradient blog is a modern headless CMS blog starter for businesses, freelancers or for personal uses. It was created to display the content in a clear and creative manner. It will fascinate your audience and provide them with a unique time.

Whether it is Design, Product, Corporate, Engineering, or anything else you can imagine, it will show in a purposeful layout.

Features

  • Responsive design using UI kit
  • Responsive navigation
  • Rich media
  • Contact Form created with Flotiq Forms
  • Easy to deploy
  • Maximised page speed score
  • SEO friendly
  • Web fonts — built using fonts from Google Fonts
Lighthouse report

This project use:

Quick start

1. Start the project from the template using Flotiq CLI

npm i –g flotiq-cli 
flotiq start [flotiqReadWriteApiKey] flotiq-gatsby-blog-1 https://github.com/flotiq/flotiq-gatsby-blog-1.git
  • \flotiqApiKey\ — Read and write API key to your Flotiq account
  • \projectName\ — project name or project path (if you wish to start a project in or import data from the current directory — use \.\)

2. You can also start the project from the template using Gatsby CLI

gatsby new my-hello-world-starter https://github.com/flotiq/flotiq-gatsby-blog-1.git

3. Configure the 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-1/ 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.

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

6. Manage your content using Flotiq editor

You can now easily manage your content using Flotiq editor

Made with love & passion by Flotiq.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A good case for Eval in JavaScript

FAQ In Tailwind CSS and JavaScript

How Puppeteer and Headless Chrome are Used for AngularJS Website Data Scraping?

Uber Like Taxi App — How Uber’s Support to New Ride-Sharing Ventures?

Some interview questions in JavaScript and React

TypeScript Cheatsheet

How to Build a Real-Time Chat web app using Node + Reactjs + Socket.io having E2E Encryption

Some webpack summary )

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Flotiq

Flotiq

More from Medium

Progressive Web Apps (PWA): All You Need to Know [in 2022]

Implementing Firebase Auth SSO with Google in Chrome Extensions with Manifest V3 and React.js

How to load GitHub projects with GraphQL in Gatsby

Alt

Creating and Using TomTom Geofences with React