著者は、 Write forDOnationsプログラムの一環として寄付を受け取るために/dev /colorを選択しました。
序章
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
-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サイトの分離された部分です。 たとえば、Webサイトでは、indexページは、layout、image、およびseoコンポーネントで構成されています。
新しいGatsbyプロジェクトを作成し、ファイル構造を調べたので、プロジェクトに移動してサイトのメタデータをカスタマイズする準備が整いました。
ステップ2— Gatsby Configのタイトル、説明、作成者のメタデータを変更する
ウェブサイトを検索エンジンで検出したい場合は、メタデータを正しくフォーマットすることが重要です。 このセクションでは、アプリケーションのタイトル、説明、および作成者のメタデータを構成します。
gatsby-config.jsはギャツビーの設定ファイルです。 ここにサイトsiteMetadataオブジェクトがあります。 サイトのメタデータは、サイトのSEOを向上させ、検索エンジンで見つけやすくするのに役立ちます。
テキストエディタでgatsby-config.jsを開き、Gatsbyの構成を表示します。 nanoは、このチュートリアルでGatsby構成ファイルを表示するために使用するテキストエディターの名前ですが、選択したエディターを使用できます。
nano gatsby-config.js
以下は、GatsbyDefaultStarterテンプレートに付属する構成のgatsby-config.jsです。
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
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にはホットリロードが付属しているため、開発サーバーを起動および停止する必要はありません。 ホットリロードにより、変更したアプリ内のファイルが更新されます。
次に、画像をギャツビー宇宙飛行士からサメザメに変更します。 ブラウザで画像を開き、Gatsbyプロジェクトのsrc/imagesフォルダに画像をダウンロードします。 画像を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はリストのコマンドです。 imagesフォルダーにあるすべてのファイルを一覧表示しています。
Outputgatsby-astronaut.png gatsby-icon.png sammy-shark.jpeg
ファイルがそこにあることを確認したので、お気に入りのテキストエディタでindex.jsを再度開きます。 ギャツビー宇宙飛行士の画像をサメのサミーと交換しようとしています。
まず、srcディレクトリに戻ります。
cd ..
次に、index.jsReactコンポーネントページを開きます。
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テキストプロパティを更新して、スクリーンリーダーソフトウェアが新しい画像の役立つ説明をユーザーに読み取れるようにしました。それが必要です。 説明的な代替テキストは、HTMLの画像のアクセシビリティの重要な部分です。
StaticImageの他の既存の設定では、ギャツビーはsammy-shark.jpegの画像サイズを300の最大幅に拡大縮小し、95の品質設定を使用して生成します最適化された配信のための複数のフォーマット、およびいくつかのインラインCSSを介して下マージンを追加します。 Gatsbyが画像をフォーマットする方法について詳しくは、Gatsbyのドキュメントをご覧ください。
ファイルを保存します。 サーバーが再起動し、GatsbyページにSammytheSharkが表示されます。
これで、Gatsbyeコマースサイトがローカルで稼働しています。
結論
このチュートリアルでは、最初のGatsbyWebサイトを作成しました。 ローカルマシンに基本的なGatsbyサイトを設定する方法を学びました。 Gatsbyアプリを作成してカスタマイズできるようになったので、次のステップはGatsbyeコマースサイトをデプロイすることです。
