Gatsbyを使ってみる

作成日:2022-03-18 ・更新日:2023-02-01

Gatsbyを使って一から作ってみました。

Gatsbyが何も分からなかったので使って見た。

gatsby一から初めて見る経緯

テンプレートをそのまま使用するのはデザインも洗練されていて良いのだが、どうしても追加したい機能やどうしても変えたいデザインがありましたが。しかしどこを変えれば変わるのかが、全く分からないので一から作って理解しながらやっていこうと決意しました。
正直starter-defaultのテンプレートから始める方がいいです。

始めました

ど素人なので言われるがままにやっていきます

公式サイトを参考その通りにやってみる。

公式通り実行してみる

1.initする

npm init gatsby

色々と聞いてくるので入力していく 2. testのサイトを作成 ->testのフォルダーを作成

3. CMSは何もしないので　NO(or I`LL add it later) ->Emotionを選択

4. 色々入れてほしいので4つを選択「responsive images」,「React Helmet」,「sitemap」,「manifest」 ->実行を許可「y」を入力

5. 色々とダウンロード、実行しているので待機 ->処理が終わったみたい

6. 10フォルダーに移動して実行　「cd test」,「npm run develop」 ->ビルドが走ります

7. ラウザーで表示ができるかを確認「localhost:8000」->無事に表示できました。

起動テスト

テストは適宜やっておきましょう。

gatsby develop

emotion,tailwindcss

emotion,tailwindcssを使うのが便利といわれたのでとりあえず入れて見ることにしました。当時はわけがわからなくて大変でしたが今は入れて正解でした。cssの管理が段違いで良くなります。同じようなものでbootstrapがありますがbootstrapは正直使うべきではないと思います。 bootstrapだけでは結局できないことが多発し、最終的に見たくないコードになってしまいます。 emotion,tailwindcssはその点問題なくカスタムもし簡単にできるので。今ではこれが無いと生きていけません。

tailwindcssの追加

追加方法が分からなかったけどemotionはすでに入ってたためこれだけで十分らしい。「公式通り実行してみる」のところでemotionを選択していたみたい。

npm install --save twin.macro

ノーマルのtailwindcssを使う

そのほかにHTMLの直にクラスを追加して使用する事はないであろうということで通常のtailwindcssは追加しないことにしたのだが、追加方法も簡単だったのでとりあえず入れてみた。

npm install -D tailwindcss

npx tailwindcss init

tailwind.config.js

npx tailwindcss init

tailwind.config.jsを追加するとtailwindのカスタマイズができるので初めの頃は不要だが、慣れてきたらとても便利です。 tailwindcss initをするとtailwind.config.jsが生成されるため公式通り追加した。公式サイトを参考

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js}"], //<--これ重要
  theme: {
    extend: {},
  },
  plugins: [],
}

インストールが終わりました。

emotionプラグインの追加

gatsby-config.jsのPluginのところに追加するみたいだが？？？初めは追加するのも一苦労。最終行に公式通り plugins: [`gatsby-plugin-emotion]を追加してみたができない（笑）。最終的に\gatsby-transformer-sharp`の次に入れました。

gatsby-config.js

//省略.....
    `gatsby-transformer-sharp`,
    `gatsby-plugin-emotion`,//<--------ここに入れた。
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        // This will impact how browsers show your PWA/website
        // https://css-tricks.com/meta-theme-color-and-trickery/
        // theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-postcss`//<-------------ついでにtailwindcssも追加
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],//省略......
}

テストしてみる

ここまでやって起動して特に問題なければとりあえず大丈夫。エラーが起きた場合はpluginのgatsby-plugin-emotionの追加場所が違うかもしれません。

gatsby develop

追加方法

pluginsという配列になっているのでその中に追加するのが正解らしい。

gatsby-config.js

plugins: [
 `gatsby-transformer-sharp`,
    `gatsby-plugin-emotion`,<---------これ
{
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        // This will impact how browsers show your PWA/website
        // https://css-tricks.com/meta-theme-color-and-trickery/
        // theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
]

また、オプションなどがある場合は{resolve: hogehoge}とオブジェクト形式で追加すればいいらしい。

gatsby-config.js

plugins: [
,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
]