Web 開発の未来がここにあります。
Gatsby は、React をベースにした無料のオープンソース フレームワークで、開発者が非常に高速な Web サイトやアプリを構築するのに役立ちます。
動的にレンダリングされるサイトの制御とスケーラビリティと、静的サイト生成の速度を組み合わせて、まったく新しい可能性の網を作り出します。
Gatsby は、プロの開発者が保守可能でパフォーマンスが高く、コンテンツが豊富な Web サイトを効率的に作成するのに役立ちます。
どこからでもデータをロードします。 Gatsby は、Markdown ファイル、Contentful や WordPress などのヘッドレス CMS、REST や GraphQL API など、あらゆるデータ ソースからデータを取り込みます。ソース プラグインを使用してデータをロードし、Gatsby の統一された GraphQL インターフェイスを使用して開発します。
静的 Web サイトを超えてください。制限なしで静的 Web サイトのメリットをすべて享受できます。 Gatsby サイトは完全に機能する React アプリであるため、ブログから電子商取引サイト、ユーザー ダッシュボードに至るまで、高品質で動的な Web アプリを作成できます。
レンダリング オプションを選択します。ページごとに、静的サイト生成 (SSG) に加えて、遅延静的生成 (DSG) およびサーバー側レンダリング (SSR) という代替レンダリング オプションを選択できます。このタイプのきめ細かな制御により、一方を犠牲にすることなくパフォーマンスと生産性を最適化できます。
パフォーマンスは焼き込まれています。デフォルトでパフォーマンス監査を評価します。 Gatsby はコード分割、画像の最適化、重要なスタイルのインライン化、遅延読み込み、リソースのプリフェッチなどを自動化し、サイトの高速化を実現します。手動でのチューニングは必要ありません。
すべてのサイトに最新のスタックを使用します。データの出所に関係なく、Gatsby サイトは React と GraphQL を使用して構築されます。データが同じバックエンドからのものであるかどうかに関係なく、あなたとあなたのチームのための統一されたワークフローを構築します。
スケール・フォー・ペニーのホスト。 Gatsby サイトにはサーバーが必要ないため、サーバーでレンダリングされるサイトの数分の 1 のコストでサイト全体を CDN 上でホストできます。 Gatsby サイトの多くは、Netlify やその他の同様のサービスで完全に無料でホストできます。
Gatsby の集中データ層をどこでも使用できます。 Gatsby の Valhalla Content Hub を使用すると、Gatsby のデータ レイヤーを任意のプロジェクトに導入できます。コンテンツ サイト、e コマース プラットフォーム、ネイティブ アプリケーションと Web アプリケーションの両方を構築するために、統合された GraphQL API を介してアクセスできるようにします。
次のプロジェクトで Gatsby を使用する方法を学びましょう。
以下のリンクをクリックして、Gatsby と Netlify を使用した Web サイトの開発、構築、展開のワークフローをすぐに試してください。
このプロセスの最後に、次のようになります。
Netlify で動作するサイト
新しいサイトにリンクされた新しいリポジトリ
新しいリポジトリに変更をプッシュすると、Netlify はサイトを自動的に再構築して再デプロイします。
次の 4 つの手順を実行すると、ローカル開発環境で新しい Gatsby サイトを 5 分以内に起動して実行できます。
新しいプロジェクトを初期化します。
npm init ギャツビー
「My Gatsby Site」という名前を付けます。
サイトをdevelop
モードで開始します。
次に、新しいサイトのディレクトリに移動して、サイトを起動します。
cd my-gatsby-site/ npm 実行開発
ソースコードを開いて編集を開始してください。
サイトは現在http://localhost:8000
で実行されています。選択したコード エディターでmy-gatsby-site
ディレクトリを開き、 src/pages/index.js
を編集します。変更を保存すると、ブラウザがリアルタイムで更新されます。
この時点で、完全に機能する Gatsby Web サイトが完成しました。 Gatsby サイトをカスタマイズする方法の詳細については、プラグインと公式チュートリアルを参照してください。
Gatsby の完全なドキュメントは Web サイトにあります。
ほとんどの開発者は、Gatsby を使用してサイトを作成するための詳細なチュートリアルから始めることをお勧めします。自分の能力レベルについてまったく仮定を置かずに開始し、プロセスの各ステップを順を追って説明します。
コードサンプルを直接確認するには、ドキュメントにアクセスしてください。特に、サイドバーの「ハウツー ガイド」、「リファレンス」、「コンセプト ガイド」セクションを確認してください。
ドキュメントを改善するための提案を歓迎します。詳細については、「貢献方法」ドキュメントを参照してください。
Gatsby の学習を開始する: チュートリアルに従ってください · ドキュメントを読んでください
最近何を発送したか気になりませんか?主なハイライト、パフォーマンスの向上、新機能、注目すべきバグ修正については、リリース ノートをご覧ください。
また、Gatsby の各バージョンの計画を理解するには、バージョン サポートに関するドキュメントをお読みください。
すでにギャツビー サイトをお持ちですか?これらの便利なガイドは、最初から始めなくても、Gatsby v5 の改良点をサイトに追加するのに役立ちます。
v4 から v5 への移行
v3 から v4 への移行
v2 から v3 への移行
ギャツビーは、歓迎的で多様性に富んだ安全なコミュニティを構築することに専念しています。私たちは、Gatsby コミュニティに参加するすべての人が行動規範を遵守することを期待しています。ぜひ読んでみてください。フォローしてください。 Gatsby コミュニティでは、私たちはお互いを高め、素晴らしいものを一緒に作り出すために一生懸命働いています。 ??
バグの修正、ドキュメントの改善、情報の普及などにご協力いただければ、Gatsby コミュニティの一員としてぜひご参加ください。
コントリビュートに関するアイデアや、ローカル マシン上でリポジトリを起動して実行するためのセットアップ手順については、コントリビュート ガイドをご覧ください。
このリポジトリは、Lerna を使用して管理されるモノリポジトリです。これは、個別のパッケージとして NPM に公開しているにもかかわらず、このコードベースで複数のパッケージが管理されていることを意味します。
MITライセンスに基づいてライセンスされています。
プラグイン、スターター、ビデオ、ブログ投稿を作成した多くの貢献者全員に感謝します。また、問題や PR を手伝ってくれたり、Discord や GitHub ディスカッションで質問に答えてくれたりしたコミュニティ メンバーに特に感謝します。
ギャツビーを偉大なものにしている大きな部分は、コミュニティの皆さん一人ひとりです。あなたの貢献はギャツビー体験を豊かにし、毎日をより良いものにします。