Gatsby.js ことはじめ

• 5/18 から Gatsby.js を書き始めた
• つまづいて、調べて解決した点をメモっていく
• 言語学習の過程が記録として残る
• 間違っている可能性が大いにあるので、この記事は自分向けです

導入

Quick Start | GatsbyJS を見ながら進めれば難なくできます

npm install -g gatsby-cli
gatsby new gatsby-site
cd gatsby-site

# Start development server.
gatsby develop

# Create a production build.
gatsby build

# Serve the production build locally.
gatsby serve

GitHub pages にデプロイ

How Gatsby Works with GitHub Pages | GatsbyJS を見るとわかりやすい

gh-pages をインストールする

yarn add --dev gh-pages

yarn deploy でデプロイできるように以下を追加

   {
        "scripts": {
            ...
            "deploy": "gatsby build && gh-pages -d public -b master",
        }
    }

ロゴなどを配置する

Using the Static folder | GatsbyJS をみる

• パスを固定したいものはルート直下の static に配置する
• static 直下に置いたものがホスティングの際のルートパス直下に配置される形でコピーが走る
• Twitter カード向けの画像などは現実的に static 下に置く形となりそう？

Meta タグの設定をいい感じにやりたい

Adding page metadata | GatsbyJS をみる

yarn add gatsby-plugin-react-helmet react-helmet

gatsby-config.js に以下を追加

{
  plugins: [`gatsby-plugin-react-helmet`]
}

より実践的な OGP や Twitter カードの設定などは Adding an SEO component | GatsbyJS を参照

ソーシャルメディアシェアボタンの設置

nygardk/react-share: Social media share buttons and share counts for React を使うと手軽

npm install react-share --save

コンポーネント

import {
  FacebookShareButton,
  LinkedinShareButton,
  TwitterShareButton,
  TelegramShareButton,
  WhatsappShareButton,
  PinterestShareButton,
  VKShareButton,
  OKShareButton,
  RedditShareButton,
  TumblrShareButton,
  LivejournalShareButton,
  MailruShareButton,
  ViberShareButton,
  WorkplaceShareButton,
  LineShareButton,
  PocketShareButton,
  InstapaperShareButton,
  EmailShareButton,
} from 'react-share';