— Integrating with FlexiBlog
Getting Started
With Gatsby’s theme composition feature, we can install multiple themes on a site. We’ll use this feature to install FlexiBlocks theme for site’s landing page and FlexiBlog theme for adding a blog to our site.
is a fully functional multi-purpose blog theme powered by React and Gatsby JS and packed with various page layouts.
supports Contentful, and Strapi, and Sanity, and Netlify CMS for writing your blog posts. Essential services such as Algolia search system, Mailchimp newsletter and Disqus commenting are also integrated into the theme.
In this section, we’ll cover adding FlexiBlog theme to a site built with FlexiBlocks or vice versa.
Prerequisites
FlexiBlocks v3 (March 17 2021) is compatible with FlexiBlog v3 (March 17 2021)
FlexiBlocks v2 (March 17 2021) is compatible with FlexiBlog v3 (March 17 2021)
FlexiBlocks v1 (March 01 2021) is compatible with FlexiBlog v2.10 (Feb 14 2021)
Directions
Step 1: Bootstrap your project
Before integrating the second theme with your site, you must bootstrap your site with one of the themes. Please refer to or to bootstrap your site.
Step 2: Add second theme’s packages
After bootstrapping your site, copy and overwrite the packages listed below from the second theme you want to add to your current project. The goal is to have both theme’s packages in your project.
From 💜 FlexiBlog package:
@elegantstack/packages/blog
@elegantstack/packages/flow-ui
@elegantstack/packages/plugins
@elegantstack/packages/themes
From 🖤 FlexiBlocks package:
@elegantstack/packages/blocks
@elegantstack/packages/solid-ui
@elegantstack/packages/themes
—> To project folder:
@elegantstack/packages
Step 2: Add second theme’s content files
Now we need to copy starter (sample) content files from the second theme you want to add to your current project:
From second theme’s starter content:
@elegantstack/starters/gatsby-starter-[THEME-NAME]/content
—> To site content:
@elegantstack/site/content
Step 3: Install new theme
Cd into your /site folder and install the second theme:
Installing 💜 FlexiBlog:
# Replace [THEME-NAME] with FlexiBlog theme name and version
yarn add @elegantstack/gatsby-theme-flexiblog-[THEME-NAME]@*
# EXAMPLE to install FlexiBlog Agency:
yarn add @elegantstack/gatsby-theme-flexiblog-agency@*
Installing 🖤 FlexiBlocks:
yarn add @elegantstack/gatsby-theme-flexiblocks@*
Step 4: Register second theme
Register the second theme in your site’s gatsby-config.js file:
site/gatsby-config.js
module.exports = {
plugins: [
{
resolve: '@elegantstack/gatsby-theme-flexiblocks',
options: {
createDemoPages: true
}
},
{
// ATTENTION: Match the theme name with the theme you installed
resolve: '@elegantstack/gatsby-theme-flexiblog-[THEME-NAME]',
options: {
// ATTENTION: Blog will be created on this path
basePath: '/blog/'
}
}
// Rest of your plugins...
]
// Rest of your properties...
}
⚠️ Please pay attention to the comment in the code.
Step 5: Add siteMetadata
If you’re adding FlexiBlog as the second theme to your project, please copy the siteMetadata object in one of FlexiBlog starter’s gatsby-config.js file into your site/gatsby-config.js.
Step 6: Install dependencies
Open your project’s folder in your terminal and run the below command to refresh the dependencies:
yarn install
📝 It’s safe to ignore unmet peer dependency warnings.
Step 7: Develop & Build
Once all dependencies are installed you can begin working on your site.
# Go into the Gatsby site
cd site
# Run Gatsby development site
yarn clean
yarn develop
# Build your Gatsby site for production
yarn clean
yarn build
# Serve production site
yarn serve
If you encounter any issues, please check the section and if you’re still having trouble please .
In the , we’ll connect the recent blogs block to FlexiBlog’s data layer.
