Integrating Ghost CMS Theme gatsby-starter-ghost with an existing gatsbyJS project

Developer help Installation
1

I am trying to integrate the gatsby-starter-ghost starter template from Github into my GatsbyJS project which is a simple static website.

I have tried to add the contents of the gatsby-config.js from the gatsby-starter-ghost project to my own gatsbyJS web project which has its own gatsby-config.js.

However 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.

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: ‘info@technovature.com’,
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,

],
};

  • What browser?
    Chrome
  • 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 steps could someone else take to reproduce the issue you’re having?
    gatsby develop command…
2

The config looks ok to me. How are you creating the pages in gatsby-node.js tho? You will need to updated the used templates for each source and updated the URL’s for each page that gets created to have /blog/ prepended.

3

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.