gatsby.jsに基づく静的サイトの基本スターターキット。
開発を開始します。
新しいサイトのディレクトリに移動して、起動します。
cd my-site/
gatsby develop
ソースコードを開き、編集を開始します!
あなたのサイトは現在、 http://localhost:8000
で実行されています!
注:2番目のリンク: http://localhost:8000/___graphql
も表示されます。これは、データのクエリを実験するために使用できるツールです。このツールの使用については、Gatsbyチュートリアルで詳細をご覧ください。
選択したコードエディターでmy-site
ディレクトリを開き、 src/pages/index.js
を編集します。変更を保存すると、ブラウザがリアルタイムで更新されます!
Gatsbyプロジェクトに表示されるトップレベルのファイルとディレクトリを簡単に見てください。
.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock
/node_modules
:このディレクトリには、プロジェクトに依存するコードのすべてのモジュール(npmパッケージ)が自動的にインストールされます。
/src
:このディレクトリには、サイトヘッダーやページテンプレートなど、サイトのフロントエンド(ブラウザに表示されるもの)に表示されるものに関連するすべてのコードが含まれます。 src
「ソースコード」の慣習です。
.gitignore
:このファイルは、バージョンの履歴を追跡 /維持してはならないファイルをgitに伝えます。
.prettierrc
:これは、きれいなための構成ファイルです。 Prettierは、コードのフォーマットを一貫させ続けるのに役立つツールです。
gatsby-browser.js
:このファイルは、GatsbyがGatsbyブラウザーAPIの使用を見つけることを期待している場所です(もしあれば)。これらにより、ブラウザに影響を与えるデフォルトのギャツビー設定のカスタマイズ/拡張機能が可能になります。
gatsby-config.js
:これは、Gatsbyサイトのメイン構成ファイルです。これは、サイトのタイトルや説明など、サイト(メタデータ)に関する情報を指定できる場所です。これを含めたいGatsbyプラグインなど(詳細については、構成ドキュメントをチェックしてください)。
gatsby-node.js
:このファイルは、GatsbyがGatsbyノードAPIの使用を見つけることを期待している場所です(もしあれば)。これらにより、サイトビルドプロセスのピースに影響を与えるデフォルトのギャツビー設定のカスタマイズ/拡張が可能になります。
gatsby-ssr.js
:このファイルは、GatsbyがGatsby Server側のレンダリングAPIの使用を見つけることを期待している場所です(もしあれば)。これらは、サーバー側のレンダリングに影響を与えるデフォルトのギャツビー設定のカスタマイズを可能にします。
LICENSE
:GatsbyはMITライセンスに基づいてライセンスされています。
package-lock.json
(以下のpackage.json
、最初、を参照)。これは、プロジェクト用にインストールされたNPM依存関係の正確なバージョンに基づいて自動的に生成されたファイルです。 (このファイルを直接変更することはありません)。
package.json
:node.jsプロジェクトのマニフェストファイル。これには、メタデータ(プロジェクトの名前、著者など)などが含まれます。このマニフェストは、NPMがプロジェクトにどのパッケージをインストールするかをどのように知っているかです。
README.md
:プロジェクトに関する便利な参照情報を含むテキストファイル。
yarn.lock
:Yarnは、NPMに代わるパッケージマネージャーです。 GatsbyドキュメントはすべてNPMを参照していますが、YarnまたはNPMを使用できます。このファイルは、別のパッケージ管理システムのためだけに、 package-lock.json
と本質的に同じ目的を果たします。
展開には、Gitlab CIを使用できます。プロジェクトには2つのファイルの2つのファイルがあります - サンプル.gitlab-ci.yml
とs3 deploy .gitlab-ci-s3.yml
。