[連載] ブロガー向けGatsby講座の投稿 - Crieit

GatsbyJsでSitemapを使う

2019-02-09T11:28:59+09:00

GatsbyJSでgatsby-plugin-sitemapを使う

GatsbyJSでGoogleにSiteMapを作成して登録したかったのでプラグインgatsby-plugin-sitemapを実装してみた。

GatsbyJSでgatsby-plugin-sitemapの使い方

インストール
Gatsby-config.jsのセッティング
サンプルコード

Styled Componentsのインストール

npmコマンドでインストールします。

npm install --save gatsby-plugin-sitemap

Gatsby-config.jsのセッティング

Gatsby Config.jsを以下のようにします。

module.exports = {
  siteMetadata: {
    siteUrl: `https://www.example.com`,
  },
  plugins: [`gatsby-plugin-sitemap`],
}

動作確認

gatsby build

で確認すると

Publicフォルダを確認してみるとsitemap.xmlが出来ている。

サーチコンソールからサイトマップを追加してみるとエラーゼロで完成している。

GatsbyJSでStyled Componentsを使う

2019-02-08T18:05:29+09:00

GatsbyJSでStyled Componentsを使う

GatsbyJSでCSSモジュールを用いたスタイリングもいいが、CSSinJSで書いたほうが便利そうということでStyled Componentsを使ってみた。

GatsbyJSでStyled Componentsの使い方

インストール
Gatsby-config.jsのセッティング
サンプルコード

Styled Componentsのインストール

npmコマンドでインストールします。

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

Gatsby-config.jsのセッティング

Gatsby Config.jsを以下のようにします。

module.exports = {
  plugins: [`gatsby-plugin-styled-components`],
}

書き直す

index.jsはこのように書き直せます。

import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components'

import Layout from '../components/layout'
import Image from '../components/image'

const ImgWrapper = styled.div`
  max-width: 300px;
  margin-bottom: 1.45rem;
`

const IndexPage = () => (
  
    Hi people
    Welcome to your new Gatsby site.
    Now go build something great.
    
      
    
    Go to page 2
  
)

export default IndexPage

header.jsは、このように書き直すことができます。

import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components'

const HeaderWrapper = styled.div`
  background: rebeccapurple;
  margin-bottom: 1.45rem;
`

const Headline = styled.div`
  margin: 0 auto;
  max-width: 960;
  padding: 1.45rem 1.0875rem;
  h1 {
    margin: 0;
  }
`

const StyledLink = styled(Link)`
  color: white;
  textdecoration: none;
`

const Header = ({ siteTitle }) => (
  
    
      
        {siteTitle}
      
    
  
)

export default Header

使ってみた感想

かなりStyled Components便利！一長一短ありますが、スコープ効いて名前が長くならないのはいいですね。

GatsbyJsでFontを変更するTypeface編

2019-02-05T18:18:45+09:00

GatsbyJSでFontを変更したい

以前、gatsby-plugin-typographyで対応する方法を検討した。
しかし、Noto Sans JPなどのフォントを使う時はGoogleフォントを読み込んでしまい、パフォーマンスが落ちるのが気になった。

Typefaceを使う

そこで、Gtasbyでは最近Typefaceを推奨している。
npmでインストールしてimportで読み込む仕組みでこっちのほうが早いらしい。
早速使ってみた。

Typefaceのインストール
Layout.jsにインポート
css設定

Typefaceのインストール

今回はlatoというFontをインストールしてみる。

npm install --save typeface-lato

Layout.jsにインポート

インストール出来たらLayout.jsにインポートする

import 'typeface-lato'

これだけではFontは動かないCSSの設定が必要になる。

CSSに記載

CSSに記載する。

 { font-family: Lato }

これで動く。

GatsbyJsでWebpackバンドルサイズを確認する

2019-02-04T08:55:55+09:00

GatsbyJsでWebpackバンドルサイズを確認する

当たり前だがAdSenseを入れるとサイト遅くなった。
原因を探るため我々はGatsbyJsを良い感じにしてくれているWebPackの奥地に向かった。と言えば簡単なのだが
WebPackは魔境だ。僕みたいな素人が触っても火傷するだけ。ということでパッケージを探した。

gatsby-plugin-webpack-bundle-analyzerを使う

gatsby-plugin-webpack-bundle-analyzerというプラグインが便利そうだ。
+ gatsby-plugin-webpack-bundle-analyzerのインストール
+ gatsby-config.jsの設定
+ 確認

gatsby-plugin-webpack-bundle-analyzerのインストール

npm install --save gatsby-plugin-webpack-bundle-analyzer

gatsby-config.jsの設定

gatsby-config.jsの設定を追加してやる

plugins: [
    'gatsby-plugin-webpack-bundle-analyzer',
]

確認

gatsby develop

で自動的にブラウザに表示される。
ただ、毎回起動されるのはウザいので使わないときはコメントアウト推奨。

GatsbyJSでStaticにファイルを置く

2019-01-31T16:14:42+09:00

Staticファイルを置きたい

Gatsbyはイメージファイルなどは自動で圧縮してくれるし、リサイズもしてくれるデキるやつです。
しかし、PWAにサイトをしたり、ソーシャルアイコンのイメージ画像を扱う時は/img/logo.pngなどのようにファイルを扱いたいです。そこでやり方を調べました。

GatsbyJSでStaticにファイルを置く方法

rootディリクトリにstaticフォルダーを作成
staticにファイルを置く
withPrefixを読み込むコンポーネントに記載
gatsby-config.jsに変更

import { withPrefix } from 'gatsby'

render() {
  return ;
}

gatsby-config.jsに変更

module.exports = {
  pathPrefix: `/img`,
}

注意"/img/"と記載してはいけません。

確認

できた！