最初のギャツビーウェブサイトを設定する方法

投稿日: 2022-04-20 2022-10-23
タグ: Development, GatsbyJS, javascript

序章

GatsbyはReactフレームワークであり、静的なサーバーレスアプリを作成できます。 Gatsby Webサイトは、通常コンテンツ配信ネットワーク（CDN）に展開され、コンテンツに依存しないため、従来のWebサイトとは異なります。 CDNから展開する利点は、待ち時間が短く、通常、Webサイトがクライアントに迅速に提供されることです。

Gatsbyは、コンテンツメッシュと呼ばれることがよくあります。コンテンツメッシュとは、ユーザーが WordPress サイト、CSVファイル、さまざまな外部APIなどのさまざまなソースからデータを取得できることを意味します。結果として、ギャツビーはデータに依存しません。これは、WordPressや Drupal などの従来のコンテンツ管理システム（CMS）とは異なります。このシステムでは、データは通常、単一のソース（データベース）から取得されます。 Gatsbyでアプリケーションを構築する場合、データベースの保守とプロビジョニングについて心配する必要はありません。さらに、Gatsbyを使用している場合は、その速度と柔軟性で知られているフレームワーク上に構築できます。

これらのサーバーレスWebサイトは、JAMStackとも呼ばれます。 JAMStackアーキテクチャでは、サーバーが関係していますが、開発者はサーバーをプロビジョニングまたは保守する必要はありません。一部の開発者は、アプリケーションのビジネスロジックにより多くの注意を向けることができるため、サーバーレスを望ましい機能と見なしています。たとえば、eコマースストアを作成している場合、商品の作成と販売に直接関連するコードに焦点を当てることができます。 JAMStackは、開発者が従来のCMSフレームワークよりも安全で、パフォーマンスが高く、展開が安価なWebサイトを迅速に開発するのに役立ちます。

このチュートリアルでは、次のことを行います。

GatsbyStarterのデフォルトテンプレートをインストールします。
メタデータを変更する gatsby-config.js.
開発サーバーを実行し、Gatsbyサイトをローカルで表示します。
JSXとGatsbyの画像最適化機能について簡単に紹介します。

このチュートリアルを終了すると、Gatsbyサイトを作成および変更できるようになります。このサイトはローカルマシン上に作成し、展開しないことに注意してください。

前提条件

Node.js バージョン14（またはそれ以降）がコンピューターにインストールされています。これをmacOSまたはUbuntu20.04にインストールするには、 Node.jsをインストールし、macOSまたはNodeSourcePPAを使用してAptでNode.jsをインストールする方法の手順に従います。 ] Ubuntu20.04にNode.jsをインストールする方法のセクション。
HTMLを使用したWebサイトの構築、およびCSSを使用したスタイル設定に慣れることができます。これについては、CSSシリーズを使用したHTMLのスタイル設定方法で詳しく説明しています。
JavaScriptを理解しておくと役に立ちます。 JavaScriptの詳細については、JavaScriptシリーズのコーディング方法をご覧ください。 GatsbyはReactを使用していますが、始めるためにReactを知る必要はありませんが、基本的な概念に精通していると役に立ちます。このシリーズでReactを学ぶことができます。

ステップ1—Gatsbyのインストールと新しいプロジェクトの作成

このステップでは、テンプレートから新しいGatsbyサイトをインストールします。 Gatsbyはユーザーにスターターテンプレートを提供するので、何もないところからWebサイトを構築することを心配する必要はありません。

GatsbyCLIパッケージをダウンロードします。このGatsbyコマンドラインインターフェイスを使用すると、新しいサイトを作成およびカスタマイズできます。

npm install -g gatsby-cli

The -g フラグは、Gatsbyコマンドラインインターフェイスをローカルではなくグローバルにインストールすることを意味します。これにより、任意のディレクトリでツールを使用できるようになります。

注： Ubuntu 20.04などの一部のシステムでは、npmパッケージをグローバルにインストールすると、アクセス許可エラーが発生し、インストールが中断される可能性があります。使用を避けることがセキュリティのベストプラクティスであるため sudo と npm install、代わりに、npmのデフォルトディレクトリを変更することでこれを解決できます。あなたが遭遇した場合 EACCES エラーが発生した場合は、npmの公式ドキュメントのの指示に従ってください。

入力した場合 gatsby help Gatsbyサイトの作成に使用できるいくつかのコマンドがあります。

gatsby help

これにより、次の出力が得られます。

OutputUsage: gatsby <command> [options]

Commands:
  gatsby develop                      Start development server. Watches files, rebuilds, and hot reloads if something changes
  gatsby build                        Build a Gatsby project.
  gatsby serve                        Serve previously built Gatsby site.
  gatsby info                         Get environment information for debugging and issue reporting
  gatsby clean                        Wipe the local gatsby environment including built assets and cache
  gatsby repl                         Get a node repl with context of Gatsby environment, see (https://www.gatsbyjs.com/docs/gatsby-repl/)
  gatsby recipes [recipe]             [EXPERIMENTAL] Run a recipe
  gatsby plugin <cmd> [plugins...]    Useful commands relating to Gatsby plugins
  gatsby new [rootPath] [starter]     Create new Gatsby project.
  gatsby telemetry                    Enable or disable Gatsby anonymous analytics collection.
...

このチュートリアルで最も重要なコマンドは次のとおりです。

gatsby new まったく新しいサイトを作成します。使用する場合 gatsby new それ自体で、必要最低限のサイトを取得できます。より一般的な使用方法 gatsby new これをスターターテンプレートと組み合わせることです。これは、このチュートリアルで行うことです。
gatsby develop 開発サーバーを起動します。このチュートリアル全体を通して、以下を使用します gatsby develop ポートでローカルにサイトを表示するには :8000.
gatsby build 静的ファイルとアセットをバンドルし、アプリケーションの本番ビルドを作成します。

これでGatsbyコマンドラインツールがインストールされましたが、まだサイトがありません。 Gatsbyの利点の1つは、Webサイトを最初からコーディングする必要がないことです。 Gatsbyにはいくつかのスターターテンプレートがあり、これを使用してWebサイトを稼働させることができます。そこには何百ものテンプレートがあり、これらの貢献の多くはコミュニティからのものです。このチュートリアルでは、Gatsbyの公式スターターテンプレートの1つである Gatsby StarterDefaultを使用します。

最初に行うことは、ターミナルからGatsbyスターターをインストールすることです。

gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

gatsby new 新しいサイトを作成します。このチュートリアルでは、 gatsby-starter-default テンプレートであり、テンプレートにちなんでプロジェクトに名前を付けます。

コマンドラインの次の出力は、Gatsbyスターターテンプレートが正常にインストールされたことを意味します。

Output...
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd gatsby-starter-default
  gatsby develop

gatsby-starter-default 新しいディレクトリの名前です。あなたは今に変わります gatsby-starter-default ディレクトリの内容を一覧表示します。

cd gatsby-starter-default && ls

これにより、次の出力が得られます。

OutputLICENSE    gatsby-browser.js  gatsby-node.js  node_modules       package.json
README.md  gatsby-config.js   gatsby-ssr.js   package-lock.json  src

このチュートリアルで変更する重要なファイルは次のとおりです。

gatsby-config.js：これには、サイト全体のカスタマイズが含まれます。ここで、メタデータを変更し、Gatsbyプラグインを追加します。
src：このディレクトリには、Webサイトを構成するすべてのページ、画像、およびコンポーネントが含まれています。 Reactでは、コンポーネントはWebサイトの分離された部分です。たとえば、あなたのウェブサイトでは、 index ページはで構成されています layout, image、と seo コンポーネント。

新しいGatsbyプロジェクトを作成し、ファイル構造を調べたので、プロジェクトに移動してサイトのメタデータをカスタマイズする準備が整いました。

ステップ2— Gatsby Configのタイトル、説明、作成者のメタデータを変更する

ウェブサイトを検索エンジンで検出したい場合は、メタデータを正しくフォーマットすることが重要です。このセクションでは、アプリケーションのタイトル、説明、および作成者のメタデータを構成します。

gatsby-config.js Gatsbyの構成ファイルです。これはあなたがサイトを見つける場所です siteMetadata 物体。サイトのメタデータは、サイトのSEOを向上させ、検索エンジンで見つけやすくするのに役立ちます。

開ける gatsby-config.js テキストエディタでGatsbyの設定を表示します。 nano は、このチュートリアルでGatsby構成ファイルを表示するために使用するテキストエディターの名前ですが、選択したエディターを使用できます。

nano gatsby-config.js

以下は gatsby-config.js Gatsby Default Starterテンプレートに付属の構成では、次のようになります。

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
    siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `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.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

Gatsby構成ファイルは、プラグインのホームでもあります。プラグインは、Gatsbyアプリに機能を追加するためにインストールするパッケージです。このGatsbyのインストールには、 gatsby-plugin-react-helmet 、 gatsby-plugin-image 、 gatsby-transformer-sharp 、gatsby-が付属しています。 plugin-sharp 、およびgatsby-plugin-manifestプラグイン。

すべてのGatsbyDefaultStarterテンプレートには、同じ汎用メタデータが含まれています。このメタデータは、サイトのすべてのページに埋め込まれています。 gatsby-plugin-react-helmet プラグイン。このデータをパーソナライズして、このサイトを独自のものにするプロセスを開始します。

のテキストを置き換えます title, description、と author 次の強調表示されたコードで：

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Getting Started with Gatsby`,
    description: `A tutorial that goes over Gatsby development`,
    author: `@digitalocean`,
    siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `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.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

ファイルを保存して終了します。

これで、Googleまたは別の検索エンジンがWebサイトをクロールすると、アプリに関連付けられたデータが取得されます。メタデータを変更しました。次に、Webサイトのページの1つを変更します。

ステップ3—インデックスページを変更する

このセクションでは、 JSX について学習し、のマークアップを変更します。 index ページを作成し、画像を追加して、Gatsbyサイトをローカルで実行します。

GatsbyWebサイトがブラウザでどのように表示されるかを確認するときが来ました。ターミナルで新しいウィンドウを開き、次のように入力します gatsby develop コマンドラインでサイトのローカルバージョンを表示するには：

gatsby develop

The gatsby develop コマンドは開発サーバーを起動します。ブラウザにアクセスすると、次のサイトにアクセスできます。 localhost:8000:

ページのマークアップを変更して、eコマースサイトにあるコンテンツのように見せます。を開きます index テキストエディタのページ：

nano src/pages/index.js

これは、テキストエディタに表示されるものです。

src / pages / index.js

import * as React from "react"
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = () => (
  <Layout>
    <Seo title="Home" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <StaticImage
      src="../images/gatsby-astronaut.png"
      width={300}
      quality={95}
      formats={["auto", "webp", "avif"]}
      alt="A Gatsby astronaut"
      style={{ marginBottom: `1.45rem` }}
    />
    <p>
      <Link to="/page-2/">Go to page 2</Link> <br />
      <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
      <Link to="/using-ssr">Go to "Using SSR"</Link> <br />
      <Link to="/using-dsg">Go to "Using DSG"</Link>
    </p>
  </Layout>
)

export default IndexPage

ここでのコードはJSXです。 JSXを使用すると、JavaScriptでHTML要素を記述できます。 JSXのより包括的な概要が必要な場合は、JSXチュートリアルにアクセスしてください。

テキストエディタで、 <h1>Hi People</h1> と <h1>Hello Shoppers, we are open for business!</h1> と <p>Welcome to your new Gatsby site.</p> と <p>We sell fresh fruit.</p>. 消去 <p>Now go build something great.</p>:

src / pages / index.js

import * as React from "react"
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = () => (
  <Layout>
    <Seo title="Home" />
    <h1>Hello Shoppers, we are open for business!</h1>
    <p>We sell fresh fruit.</p>
    <StaticImage
      src="../images/gatsby-astronaut.png"
      width={300}
      quality={95}
      formats={["auto", "webp", "avif"]}
      alt="A Gatsby astronaut"
      style={{ marginBottom: `1.45rem` }}
    />
    <p>
      <Link to="/page-2/">Go to page 2</Link> <br />
      <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
      <Link to="/using-ssr">Go to "Using SSR"</Link> <br />
      <Link to="/using-dsg">Go to "Using DSG"</Link>
    </p>
  </Layout>
)

export default IndexPage

変更を保存します。 Gatsbyにはホットリロードが付属しているため、開発サーバーを起動および停止する必要はありません。ホットリロードにより、変更したアプリ内のファイルが更新されます。

次に、画像をギャツビー宇宙飛行士からサメザメに変更します。ブラウザで画像を開き、画像をにダウンロードします src/images Gatsbyプロジェクトのフォルダ。画像を名前を付けて保存 sammy-shark.jpeg. または、Gatsbyプロジェクトのルートから次のコマンドを実行して、ターミナルからこの手順を完了することもできます。

wget -O src/images/sammy-shark.jpeg https://html.sammy-codes.com/images/small-profile.jpeg

サメのサメの画像が正しいフォルダにあるかどうかを再確認してください。に移動します images フォルダ：

cd src/images

画像ディレクトリに移動したら、次のことを確認します。 sammy-shark.jpeg の中に images フォルダ：

ls

ls listのコマンドです。にあるすべてのファイルを一覧表示しています images フォルダ：

Outputgatsby-astronaut.png gatsby-icon.png      sammy-shark.jpeg

ファイルがそこにあることを確認したので、再度開きます index.js お気に入りのテキストエディタで。ギャツビー宇宙飛行士の画像をサメのサミーと交換しようとしています。

まず、あなたに戻ります src ディレクトリ：

cd ..

今すぐ開きます index.js Reactコンポーネントページ：

nano pages/index.js

交換 gatsby-astronaut.png と sammy-shark.jpeg:

src / pages / index.js

import * as React from "react"
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = () => (
  <Layout>
    <Seo title="Home" />
    <h1>Hello Shoppers, we are open for business!</h1>
    <p>We sell fresh fruit.</p>
    <StaticImage
      src="../images/sammy-shark.jpeg"
      width={300}
      quality={95}
      formats={["auto", "webp", "avif"]}
      alt="Sammy the Shark, an adorable cartoon shark and DigitalOcean's mascot"
      style={{ marginBottom: `1.45rem` }}
    />
    <p>
      <Link to="/page-2/">Go to page 2</Link> <br />
      <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
    </p>
  </Layout>
)

export default IndexPage

上記のページコードでは、 StaticImage からのコンポーネント gatsby-plugin-image 宇宙飛行士の代わりに、サメのサメの画像を読み込んでレンダリングします。更新しました src 新しい画像ファイルのローカルパスを指すプロパティ、および更新された alt スクリーンリーダーソフトウェアが新しい画像の役立つ説明を必要とするユーザーに読み取れるようにするためのtextプロパティ。説明的な代替テキストは、HTMLの画像のアクセシビリティの重要な部分です。

他の既存の設定で StaticImage、ギャツビーはの画像サイズをスケーリングします sammy-shark.jpeg 最大幅まで 300、の品質設定を使用します 95、最適化された配信のために複数の形式を生成し、いくつかのインラインCSSを介して下マージンを追加します。 Gatsbyが画像をフォーマットする方法について詳しくは、Gatsbyのドキュメントをご覧ください。

ファイルを保存します。サーバーが再起動し、GatsbyページにSammytheSharkが表示されます。

これで、Gatsbyeコマースサイトがローカルで稼働しています。

結論

このチュートリアルでは、最初のGatsbyWebサイトを作成しました。ローカルマシンに基本的なGatsbyサイトを設定する方法を学びました。 Gatsbyアプリを作成してカスタマイズできるようになったので、次のステップはGatsbyeコマースサイトをデプロイすることです。

getdocs

13036