53ningen.com53ningen.com
Loading...

Gatsby.js ことはじめ

2019/05/18 06:47
2024/12/30 17:54
Programming
JavaScript
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';