menu
Channels
Team

Merging two gatsby themes

May 28, 2019 at 10:02am

Merging two gatsby themes

May 28, 2019 at 10:02am
I am basically trying to integrate the gatsby-starter-ghost blog template with another static site template called gatsby-serif-theme.
I am struggling with a few things.
  1. I want to know what is the best practices to creating a blog straight out of my existing static site (like gatsby-serif-theme for example)? And how do I go about doing that?
  2. I want to be able to integrate a blog into my existing static site both with an option to connect with an external CMS (JAMStack like Ghost, Strapi, GraphCMS etc.) or without connecting to an external CMS but be able to create, edit and delete the blogs locally on the static site using Markdown.
  3. Now with a second option approach, I want to be able to integrate an existing template like gatsby-starter-ghost with another template like gatsby-serif-theme
The challenges that I have with Option 3, is as follows..
a. How can I integrate two different gatsby-config.js files together? I am getting quite a few errors here (I have pasted the consolidated gatsby-config.js file contents below in this E-mail). b. I am able to stitch together the package.json files from both projects without much issue. c. I was also able to create a new folder called “Blog” under the src/pages folder of my existing static site for gatsby-serif-theme.
What are the various steps and best practices including the technical details in integrating two separate Gatsby starter themes together ? I am a bit lost here.
Please let me know. The detailed gatsby-config.js that borrows the configuration from both templates i.e. gatsby-serif-theme and gatsby-starter-ghost ). It is copied below.
I am facing errors while doing a “gatsby develop” in the home directory of my gatsbyJS web project. I have copied the contents of the gatsby-starter-ghost pages (index.js etc.) into a separate folder called “blog” inside my web-app src/pages folder.
• What’s your URL? This is the easiest way for others to debug your issue • What version of Ghost are you using?
https://github.com/TryGhost/gatsby-starter-ghost - I am using this version of the ghost starter for gatsbyJS



• What errors or information do you see in the console?
Upon running a ‘gatsby develop’ command, I see the below errors…
error We encountered an error while trying to load your site’s gatsby-config. TypeError: Cannot destructure property apiUrl of ‘undefined’ or ‘null’.
What configuration?
I am using the below gatsbyconfig.js
const guid = process.env.NETLIFY_GOOGLE_ANALYTICS_ID; const path = require(path)
const config = require(./src/utils/siteConfig) const generateRSSFeed = require(./src/utils/rss/generate-feed)
let ghostConfig
try { ghostConfig = require(./.ghost) } catch (e) { ghostConfig = { production: { apiUrl: process.env.GHOST_API_URL, contentApiKey: process.env.GHOST_CONTENT_API_KEY, }, } } finally { const { apiUrl, contentApiKey } = process.env.NODE_ENV === development ? ghostConfig.development : ghostConfig.production
if (!apiUrl || !contentApiKey || contentApiKey.match(/<key>/)) { throw new Error(GHOST_API_URL and GHOST_CONTENT_API_KEY are required to build. Check the README.) // eslint-disable-line }
}
module.exports = { siteMetadata: { title: ‘Technovature Software’, description: ‘Next Generation Innovation’, contact: { phone: ‘+91 7013175234’, email: ‘[email protected]’, address: ‘Hyderabad’, }, menuLinks: [ { name: ‘Services’, link: ‘/services’, }, { name: ‘OUR WORK’, link: ‘/work’, }, { name: ‘About’, link: ‘/about’, }, { name: ‘Blog’, link: ‘/blog’, }, { name: ‘Testimonials’, link: ‘/testimonials’, }, { name: ‘Contact’, link: ‘/contact’, }, ], }, plugins: [ ‘gatsby-plugin-sass’, ‘gatsby-transformer-json’, ‘gatsby-transformer-remark’, ‘gatsby-plugin-react-helmet’, { resolve: ‘gatsby-source-filesystem’, options: { path: ${dirname}/src/pages, name: ‘pages’, }, }, { resolve: ‘gatsby-source-filesystem’, options: { path: ${dirname}/src/data, name: ‘data’, }, }, { resolve: ‘gatsby-source-filesystem’, options: { path: ${__dirname}/src/images, name: ‘images’, }, }, { resolve: ‘gatsby-plugin-google-analytics’, options: { trackingId: guid ? guid : ‘UA-XXX-1’, // Puts tracking script in the head instead of the body head: false, }, }, gatsby-plugin-sharp, gatsby-transformer-sharp, { resolve: gatsby-source-ghost, options: process.env.NODE_ENV === development ? ghostConfig.development : ghostConfig.production, }, /**
  • Utility Plugins */ { resolve: gatsby-plugin-ghost-manifest, options: { short_name: config.shortTitle, start_url: /, background_color: config.backgroundColor, theme_color: config.themeColor, display: minimal-ui, icon: static/${config.siteIcon}, query: { allGhostSettings { edges { node { title description } } } }, }, }, { resolve: gatsby-plugin-feed, options: { query: { allGhostSettings { edges { node { title description } } } }, feeds: [ generateRSSFeed(config), ], }, }, { resolve: gatsby-plugin-advanced-sitemap, options: { query: { allGhostPost { edges { node { id slug updated_at created_at feature_image } } } allGhostPage { edges { node { id slug updated_at created_at feature_image } } } allGhostTag { edges { node { id slug feature_image } } } allGhostAuthor { edges { node { id slug profile_image } } } }, mapping: { allGhostPost: { sitemap: posts, }, allGhostTag: { sitemap: tags, }, allGhostAuthor: { sitemap: authors, }, allGhostPage: { sitemap: pages, }, }, exclude: [ /dev-404-page, /404, /404.html, /offline-plugin-app-shell-fallback, ], createLinkInHead: true, }, }, gatsby-plugin-force-trailing-slashes, gatsby-plugin-offline,
], };

September 3, 2019 at 1:50pm
Did you found out how to combine these two themes already? I'm having the same problem. I'm a Gatsby and Javascript noob and would like the ghost starter as blog page and the serif page as homepage.
  • reply
  • like