Gatsby Book Launch

“The missing guide to the modern web” launches on Thursday, Sep 29th: Modular: The Web’s New Architecture

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Gatsby blog theme for Fireblog CMS with PWA support

Combine Gatbsy (a modern static site generator ideal for JAMstack architectures) and Fireblog CMS to create a new blog experience: a super fast and simple back-office with a super fast and modern front-end!

Fireblog (https://fireblogcms.com) is a new headless CMS dedicated to blogging, with a very simple but powerful writing interface. Try it for free (one month trial): https://app.fireblogcms.com.

Features

  • Fast and SEO friendly
  • Offline mode
  • Images optimization with Fireblog API
  • Responsive
  • Pagination
  • Easy to customize with Sass & Bulma (https://bulma.io). See section “Customize theme for your brand”
  • Google Analytics

Installation

Requirements

node.js >= 12.00 is required. Make sure you have a compatible version running node -v command in your terminal.

If you have to install node, you might be interested in using nvm to install and switch easily between any node version.

For a new site

If you’re creating a new site and want to use the blog theme, you can use the blog theme starter. This will generate a new site that pre-configures use of the blog theme.

gatsby new my-themed-fireblog https://github.com/fireblogcms/gatsby-starter-fireblog-basic
cd my-themed-fireblog

Create a .env file copied from the .env.template file and set your environment variables

cp .env.template .env

For an existing site

If you already have a site you’d like to add the blog theme to, you can manually configure it.

  1. Install the blog theme
npm install gatsby-theme-fireblog-basic
  1. Add the configuration to your gatsby-config.js file
// gatsby-config.js
require('dotenv').config();

module.exports = {
  siteMetadata: {
    siteUrl: process.env.GATSBY_SITE_URL,
  },
  plugins: [
    {
      resolve: `gatsby-theme-fireblog-basic`,
      options: {
        graphqlEndpoint: process.env.GATSBY_FIREBLOG_GRAPHQL_ENDPOINT, // required
        blogId: process.env.GATSBY_BLOG_ID, // required
        analyticsTrackingId: process.env.GATSBY_GOOGLE_ANALYTICS_TRACKING_ID, // optinonal
      },
    },
  ],
};
  1. Run your site using gatsby develop and navigate to your blog posts. If you used the above configuration, your URL will be http://localhost:8000/

Usage

Theme options

Key Default value Description
graphqlEndpoint '' Endpoint to your graphql account (see https://fireblogcms) => required
blogId '' Blog id to publich => required
analyticsTrackingId '' Google Analytics Tracking ID (UA-xxxx) => optional
blogPath '/' Blog index path => optional
manifestOptions {} PWA manifest customization from “gatsby-plugin-manifest” (example bellow) => optionnal

Example configuration

// gatsby-config.js
require('dotenv').config();

module.exports = {
  siteMetadata: {
    siteUrl: process.env.GATSBY_SITE_URL,
  },
  plugins: [
    {
      resolve: `gatsby-theme-fireblog-basic`,
      options: {
        graphqlEndpoint: process.env.GATSBY_FIREBLOG_GRAPHQL_ENDPOINT, // required
        blogId: process.env.GATSBY_BLOG_ID, // required
        analyticsTrackingId: process.env.GATSBY_GOOGLE_ANALYTICS_TRACKING_ID, // optinonal
      },
    },
  ],
};

Customize theme for your brand

Brand

  • Put your own logo to static/images/logo.png
  • Configure top menu links, Progressive Web App name, and more by editing ./gatsby-config.js file
// gatsby-config.js
require('dotenv').config();

module.exports = {
  siteMetadata: {
    // absolute url of your site, e.g https://example.com. Required
    // to build some absolute links.
    siteUrl: process.env.GATSBY_SITE_URL,
    // default language of your site, also used as a html attribute
    lang: 'en',
    // how many posts are display per page on post list page
    postsPerPage: 20,
    // links for the top menu
    menuLinks: [
      {
        title: 'Home',
        props: {
          to: '/',
        },
      },
      {
        title: 'Back to site',
        props: {
          to: 'https://fireblogcms.com',
          target: '_blank',
          id: 'back-to-site',
        },
      },
    ],
    readMoreText: 'Read more',
    followUsText: 'Follow us',
    recentPostsText: 'Latest posts',

    // links to your social accounts.
    // @see components/socials.js
    // Use an empty string as value to disable a specific social network
    socials: {
      linkedin: 'https://www.linkedin.com/',
      instagram: 'https://www.instagram.com/',
      twitter: 'https://twitter.com/',
      facebook: 'https://www.facebook.com/',
      youtube: 'https://www.youtube.com/',
    },
  },
  plugins: [
    {
      resolve: `gatsby-theme-fireblog-basic`,
      options: {
        graphqlEndpoint: process.env.GATSBY_FIREBLOG_GRAPHQL_ENDPOINT, // required
        blogId: process.env.GATSBY_BLOG_ID, // required
        analyticsTrackingId: process.env.GATSBY_GOOGLE_ANALYTICS_TRACKING_ID, // optinonal
        blogPath: '/',
        manifestOptions: {
          icon: `static/images/logo.png`,
          // name of the application when site
          // is installed as an application (PWA)
          name: 'Coolest Fireblog',
          short_name: 'Fireblog',
          start_url: `/`,
          background_color: `#ffffff`,
          theme_color: `#663399`,
          display: `minimal-ui`,
        },
      },
    },
  ],
};

CSS

To customize scss you have to override gatsby-browser.js and make sure you import your own files (an example is given in starter https://github.com/fireblogcms/gatsby-starter-fireblog-basic)

  • Override style variables from src/scss/_variables.scss file
  • Override css theme by editing src/scss/_theme.scss
© 2022 Gatsby, Inc.