Gatsbyv2の最初のステップ
以前にGatsbyの背後にある哲学とその主要な機能のいくつかを調査したので、それを使ってWebサイトの構築を開始する時が来ました。 ここでは、Gatsbyv2の使用を開始する方法について説明します。
Gatsby CLI
開始するための最初のステップは、GatsbyCLIをグローバルにインストールすることです。
$ yarn global add gatsby-cli
# or, using npm:
$ npm install gatsby-cli -g
これで、gatsby new
ユーティリティを使用して新しいプロジェクトを開始できます。
$ gatsby new my-site
これにより、次の開始ファイル構造でmy-site
ディレクトリが作成されます。
├── /.cache
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── /node_modules
├── package-lock.json
├── package.json
├── /src
└── yarn.lock
これで、cd
を新しいサイトのディレクトリに移動し、gatsby develop
を実行して作業を開始できます。
$ cd my-site
$ gatsby develop
そして今、あなたはhttp://localhost:8000/
であなたのサイトを訪問することができます:
スターターの使用
gatsby new
コマンドを追加の引数なしで使用する場合は、デフォルトのGatsbyスターターサイトが使用されますが、公式にサポートされている他の多くのスターターまたはコミュニティスターターを使用することもできます。 現在、3つの公式スターターがあります: gatsby-starter-default 、 gatsby-starter-hello-world 、gatsby-starter-blog。
ここでさまざまなコミュニティスターターを確認することもできます。
この投稿から始まる最終的な目標は、Gatsbyを使用してフル機能のブログを作成することです。したがって、前の手順で行ったようなデフォルトのスターターを使用する代わりに、gatsby-starter-blogを使用しましょう。 私たちのブログをAlligatorChroniclesと呼びます。
gatsby new alligator-chronicles https://github.com/gatsbyjs/gatsby-starter-blog#v2
サイト構成
Gatsbyサイトの構成は、gatsby-config.js
ファイルで指定されています。 スターターはすでにそのファイルにデフォルトの構成を設定していますが、これで少し変更できます。
module.exports = {
siteMetadata: {
title: 'Alligator Chronicles',
description: 'The chronicles of a somewhat lonely Alligator.',
siteUrl: 'https://alligator-chronicles.com/',
},
plugins: [
...
],
}
ニーズに合わせてサイトのメタデータを変更し、pathPrefix
も削除しました。これは、ブログがドメインのルートに存在することを意図していない場合にのみ役立ちます。 プラグインの構成は同じままです。これは、今後の投稿で検討する予定です。
gatsby-config.js ファイルに変更を加えた後、または新しいページを作成した後は、ローカルサーバーを再起動する必要があることに注意してください。
新しい投稿を追加する
公式ブログスターターの設定方法では、プロジェクトの / src / page ディレクトリに投稿ごとに新しいディレクトリを作成し、index.md
ファイルを作成して投稿を追加できます。投稿の内容。
たとえば、私たちのサイトに新しい投稿を追加します。
---
title: Lonely Gator
date: '2018-08-16'
---
I'm just a lonely gator, going about my life. **Croc croc**!
ほとんどの場合、私たちのブログ投稿は単なるマーダウンファイルです。 唯一の違いは、 — でラップされたファイルの先頭にフロントマターメタデータが追加されていることです。これにより、GraphQLを使用してクエリを実行できるデータが提供されます。
建物
後で、ブログが実際に公開されるときに、gatsby build
コマンドを使用して、すべてのアセットをコンパイルし、静的ファイルを作成します。
$ gatsby build
これにより、すぐにデプロイできるアセットがプロジェクトのルートのpublic
ディレクトリに追加されます。 そのフォルダのコンテンツは、ブログを公開するために静的ホスティングプロバイダーにアップロードするだけです。
サイトが構築されたら、gatsby serve
を使用して、構築および最適化されたバージョンのサイトをhttp://localhost:9000/
で提供することもできます。
$ gatsby serve
これは、ライブホスト上にあるのと同じように、サイトをテストするのに役立ちます。
まとめ
表面を傷つけて新しいギャツビーサイトを開始したので、将来の投稿をさらに深く掘り下げ、ブログを構築するための要点から始める準備をしました。
それまでの間、公式v2ドキュメントをお読みになることをお勧めします。