開発者ドキュメント

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ファイルで指定されています。 スターターはすでにそのファイルにデフォルトの構成を設定していますが、これで少し変更できます。

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ファイルを作成して投稿を追加できます。投稿の内容。

たとえば、私たちのサイトに新しい投稿を追加します。

/src/pages/lonely-gator/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ドキュメントをお読みになることをお勧めします。

モバイルバージョンを終了