By
Flotiq Gatsby
Gatsby blog starter for creating a modern blog with Flotiq headless CMS
Blog starter designed and managed by Flotiq
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
Lighthouse report
This project use:
- Flotiq - Headless CMS for string your data (create account for free)
- 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 i –g flotiq-cli
flotiq start flotiq-gatsby-blog-1 https://github.com/flotiq/flotiq-gatsby-blog-1.git [flotiqApiKey]- 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 template using Gatsby CLI
gatsby new my-hello-world-starter https://github.com/flotiq/flotiq-gatsby-blog-1.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-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.
