gatsby template
1.0.0
このテンプレートを使用してプロジェクトを開始します。このランチャーには、React 用の超高速アプリ ジェネレーターを起動して最高速度で実行するために必要な最も重要な Gatsby ファイルと設定が付属しています。
ギャツビーのウェブサイトを作成します。
Gatsby CLI を使用して、このTemplateを指定して新しいサイトを作成します。
# Crie um novo site do Gatsby usando esse Template
gatsby new my-project https://github.com/solrachix/gatsby-template開発を開始します。
新しいサイトのディレクトリに移動して起動します。
cd my-project/
gatsby developコードを開いて編集を開始してください。
あなたのサイトは現在http://localhost:8000で実行されています。
注: 2 番目のリンクhttp://localhost:8000/___graphqlも表示されます。これは、データのクエリを試すために使用できるツールです。このツールの使用方法の詳細については、[Gatsby チュートリアル](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql) をご覧ください。
選択したコード エディターでmy-projectディレクトリを開き、 src/pages/index.jsを編集します。変更を保存すると、ブラウザがリアルタイムで更新されます。
プログレッシブ Web アプリは、新しいソフトウェア開発手法を表すために使用される用語です。従来のアプリとは異なり、プログレッシブ Web アプリは、通常の Web ページとモバイル アプリの間のハイブリッドの進化として見ることができます。
マニフェスト プラグインを利用した Web アプリ マニフェスト (PWA 仕様の一部) を使用すると、ユーザーはほとんどのモバイル ブラウザーのホーム画面に Web サイトを追加できます。こちらを参照してください。マニフェストは、電話機の設定とアイコンを提供します。
このプラグインは、マニフェスト設定に加えて、作業を容易にするいくつかの機能を提供します。
これらの各機能には広範な構成が用意されているため、常に制御できます。
これらのプラグインはどこで検索すればよいですか?ここをクリックして検索してください
この Gatsby テンプレートに表示される最上位のファイルとディレクトリを簡単に見てみましょう。
.
├── node_modules
├── config/
│ └── MetaData.js
├── src/
│ ├── assets/
│ │ └── images/
│ │ └── logo.png
│ ├── components/
│ ├── Pages/
| │ └── index.js
│ ├── posts/
| │ └── 2020-04-08--nosso-primeiro-post/
| │ └── index.md
│ ├── styles/
│ | ├── themes/
│ | └── GlobalStyles.js
│ ├── templates/
│ | ├── post.js
│ | └── tag.js
│ └── html.js
├── static/
│ ├── favicon.ico
│ └── robots.txt
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
| ファイル/フォルダー | 説明 |
|---|---|
| /node_modules | このディレクトリには、プロジェクトが依存する、自動的にインストールされるすべてのコード モジュール (npm パッケージ) が含まれています。 |
| /src | このディレクトリには、Web サイトのヘッダーやページ テンプレートなど、Web サイトのフロントエンドに表示されるもの (ブラウザーに表示されるもの) に関連するすべてのコードが含まれます。 src 「ソースコード」の規約です。 |
| .gitignore | このファイルは、バージョン履歴を追跡しない/維持しないファイルを git に指示します。 |
| .prettierrc | これはPrettierの設定ファイルです。 Prettier は、コードの書式設定の一貫性を維持するのに役立つツールです。 |
| *ギャツビーブラウザ.js | Gatsby が Gatsby ブラウザ API (存在する場合) の使用法を見つけるのは、このファイル内です。これにより、ブラウザに影響を与えるデフォルトの Gatsby 設定のカスタマイズ/拡張が可能になります。 |
| gatsby-config.js | これは、Gatsby Web サイトのメイン構成ファイルです。ここで、サイトのタイトルや説明、含めたい Gatsby プラグインなど、サイトに関する情報 (メタデータ) を指定できます。 (詳細については、構成ドキュメントを確認してください)。 |
| ギャツビーノード.js | このファイルは、Gatsby が Gatsby Node API (存在する場合) の使用法を見つけることを期待する場所です。これにより、サイト作成プロセスの一部に影響するデフォルトの Gatsby 設定のカスタマイズ/拡張が可能になります。 |
| ギャツビー-ssr.js | Gatsby が Gatsby サーバー レンダリング API (存在する場合) の使用を期待するのは、このファイル内です。これにより、サーバー側のレンダリングに影響するデフォルトの Gatsby 設定をカスタマイズできます。 |
| ライセンス | Gatsby は MIT ライセンスに基づいてライセンスされています |
| パッケージロック.json | (まず、以下のpackage.json参照してください)。これは、プロジェクトにインストールされている npm 依存関係の正確なバージョンに基づいて自動的に生成されるファイルです。 (このファイルは直接変更しません)。 |
| パッケージ.json | Node.js プロジェクトのマニフェスト ファイル。メタデータ (プロジェクト名、作成者など) などが含まれます。このマニフェストは、npm がプロジェクトにどのパッケージをインストールするかを知る方法です。 |
| README.md | プロジェクトに関する有用な参考情報が含まれるテキスト ファイル。 |
| **** |
さらに詳しいガイダンスをお探しですか? Gatsby の完全なドキュメントは [Web サイト上] (https://www.gatsbyjs.org/) にあります。まずは次の場所から始めましょう。
ほとんどの開発者には、[Gatsby を使用して Web サイトを作成するための詳細なチュートリアル] (https://www.gatsbyjs.org/tutorial/) から始めることをお勧めします。自分の能力レベルについて何の仮定も持たない状態から始まり、プロセスのあらゆる段階を経ていきます。
コード例を直接確認するには、[ドキュメント] (https://www.gatsbyjs.org/docs/) にアクセスしてください。特に、サイドバーの「ガイド」 、 「API リファレンス」 、および「高度なチュートリアル」セクションを参照してください。
