最初のギャツビーウェブサイトを設定する方法
序章
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テンプレートに付属の構成では、次のようになります。
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
次の強調表示されたコードで:
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
これは、テキストエディタに表示されるものです。
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>
:
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
:
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コマースサイトをデプロイすることです。