Contentful Gatsby Starter Blogを使うときの注意点

■今やっていること

Gatsby + ContentfulのJAMstackなブログサイトを構築しています。

■使っているスターターキット

Gatsbyには素早くデプロイできるようにスターターキットがいっぱい用意されています。好みのものを採用してみてください。

Starter Library

Gatsby Starters: Library

Gatsby

今回はcontentfulが提供しているキットを採用しています。

GitHub - contentful/starter-gatsby-blog: Gatsby starter for a Contentful project from the community.

Gatsby starter for a Contentful project from the community. - GitHub - contentful/starter-gatsby-blog: Gatsby starter for a Contentful project from the community.

GitHubcontentful

■注意点

/src/pages/index.js

の11行目で

const siteTitle = get(this, ‘props.data.site.siteMetadata.title’)

としていますが、41行目のHomeQueryでこのデータを取ってきてないので、そのままの状態だとundefinedになります。

なので下記のようにQueryを足してあげましょう。

site {
    siteMetadata {
        defaultTitle: title
        titleTemplate
        defaultDescription: description
        siteUrl: url
        defaultImage: image
        twitterUsername
    }
}

ユーザーコミュニティでは指摘があって反映されていますが、公式はまだ対応していないみたいでハマりました。

GitHub - contentful-userland/about: Organization mission statement and contribution guidelines

Organization mission statement and contribution guidelines - GitHub - contentful-userland/about: Organization mission statement and contribution guidelines

GitHubcontentful-userland

結構細かいところで直しが多いのでブログの公開はもう1週間くらい必要そうです。

頑張ります！