gatsbyのgatsby-starter-cafeからインスタグラム機能を削除する手順

こんにちは、最近インスタグラムのスクレイピングでハマってしまいました。

結論はgatsby-source-instagramの問題（2021.6.27現在オープンのまま）でした。

Public scraping methods fail due to login screen on Instagram on production builds #24

ローカルの開発環境ではgatsby-source-instagramを最新の0.9に更新すれば問題ないのにー従って、netlifyでデプロイを成功させるため、gatsby-source-instagramの機能を削除しました。 gatsby-source-instagramの問題が解決するといいですけどトホホ

以下のソースコードを修正します。

gatsby-config.js
src\components\instagram.js
src\pages\index.js
src\styles\styles.scss

ソースコードの修正

先のブログで作成したローカルPCの「gatsby-starter-cafe」フォルダをVisual Studio Code を起動したあと「ファイル」メニューの中の「フォルダーを開く」をクリックして開きます。

以下のソースコードをVisual Studio Codeのエクスプローラーで選択し、それぞれ編集します。🌟編集後、保存を忘れないようにビルド時、繁栄されません。

gatsby-config.js

44行目～50行目をコメントアウトします。

    ~~~ 途中省略 ~~~
    // {
    //   resolve: `gatsby-source-instagram`,
    //   options: {
    //     //username: `kelvinpocketcafe`, // Your Instagram
    //     username: `3168752739`, // Your Instagram
    //   },
    // },
    ~~~ 途中省略 ~~~

「ファイル」メニューの中の「保存」をクリックします。

src\components\instagram.js

全行をコメントアウトします。

// import React from 'react'
// import { useStaticQuery, graphql } from 'gatsby'
// import Img from 'gatsby-image';
以下、すべての行コメントアウト

「ファイル」メニューの中の「保存」をクリックします。

src\pages\index.js

37行目をコメントアウトします。

    ~~~ 途中省略 ~~~
    <div className="parallax"></div>
    <section className="container">
      <Menu />
      {/* <Instagram /> */}
    </section>
    {typeof window !== 'undefined' &&
    ~~~ 途中省略 ~~~

「ファイル」メニューの中の「保存」をクリックします。

src\styles\styles.scss

5行目をコメントアウトします。

@import './variables/variables';

@import './components/footer';
@import './components/header';
//@import './components/instagram';
@import './components/menu';
@import './components/leafletMap';

@import './pages/index';