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 をみる

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';