ギャツビーへの究極のガイド-あなたがギャツビーで始まる前に知っておく必要があるすべて

ギャツビーのウェブサイトは毎日人気が高まっている.最近では、人気のあるウェブサイトのほとんどは、速度、SEOなどのため、ギャツビーを使用しています.

目次

What is Gatsby?

What are Static Sites?

Why you should consider using Gatsby?

SEO

Plugins

Speed

Templates

Why should you avoid Gatsby?

Build Time

Dynamic Websites

Complex sites

Set Up Your First Gatsby Website

Installing Gatsby CLI

Starter Templates

Run your app locally

Deploying Website To Netlify

Conclusion

何がギャツビーですか?
GatsByjsは、反応ベースの、グラフィカルな静的サイトジェネレータを駆動します.Gatsbyは、静的なWebサイトやアプリケーションを構築するための単一のツールに反応、GraphSQL、およびWebPackから機能を兼ね備えたオープンソースフレームワークです.「静的サイトジェネレータ」という用語はしばらくの間、存在していましたが、Gatsbyは従来の静的サイトジェネレータよりも現代のフロントエンドフレームワークに似ています.

どのような静的なサイトですか?
静的なウェブサイトは、長い間存在しました.HTML、CSS、およびJavaScriptだけで、彼らは最初のウェブサイトです.サーバサイドプログラミングやデータベースがないので、リアルタイムでレンダリングされません.
静的サイトジェネレータは、静的なWebページを作成するツールです.一方、JSフレームワークとライブラリは、通常、実行時にクライアント側でHTMLコンテンツを生成します.サイトが構築されている間、この材料は静的サイトジェネレータによって生成されます.その後、ロードされた後、反応が引き継ぐ、あなた自身を1つのページのアプリを持っている!

なぜあなたはギャツビーを使用して検討する必要がありますか?

SEO
GatsByjsの使用は、あなたのウェブサイトが内部コードの最適化戦略のいくつかを利用するのを許します.その結果、検索エンジンが上位にあなたのウェブサイトをランク付けします.これを支援するプラグインの数があります.

プラグイン
ギャツビーは、さまざまな側面であなたのウェブサイトを助けることができるいくつかの素晴らしいプラグインを持っています.NPMや糸を使用してこれらのプラグインをインストールできます.
人気のプラグインのいくつかは、ソースファイルシステム、contentful、プラグインシャープなどですhere .

スピード
Gatsbyサイトは、その静的サイトが本当にその速度とパフォーマンスに関して打つのが難しいので、WordPressとそのようなものを使っているキャッシュされたサイトと比較して、選択肢の多くより非常に速いです.

テンプレート
GatsByjsのスターターリポジトリが十分にあり、その内容をクローン化して変更することは簡単です.これは、迅速かつ効率的にあなたのブログやポートフォリオなどのウェブサイトを構築することができます.

なぜギャツビーを避ける必要がありますか?

ビルドタイム
あなたのウェブサイトのコンテンツの量が増加するので、それはそれを生成するためにかかる時間です.これは開発中には不便ではありませんが、展開時には時間を無駄にします.あなたが頻繁に変わるサイトを作成したいならば、Gatsbyは忠告されません.

ダイナミックウェブサイト
動的に生成されたルートの多くのサイトは、静的に生成されたページの利点を再構築することができないため、建設時に何を知っていない場合.

複雑サイト
複雑なサイトが迅速に展開し、ビルドするには長い時間がかかるため、彼らは継続的に新しいページと材料を追加しています.多くの電子商取引会社が静的につくられたサイトを使うことができて、するのをするけれども、ビルド時間が問題になるならば、それはGatsbyのような動的に生成されたサイトに賛成して、それらを放棄する最も時間です.

あなたの最初のギャツビーウェブサイトをセットアップしてください

CLATSのインストール
最初のステップは、Gatsby CLIをインストールすることです.Gatsbyコマンドラインインターフェイスを使用して新しいサイトを作成して変更できます.gatsby cliをインストールするには、次のコマンドを実行します.

npm install -g gatsby-cli

The -g 引数は、ローカルではなくGATSBYコマンドラインインターフェースがグローバルにインストールされていることを示します.その結果、任意のディレクトリにツールを利用できるようになります.

スターターテンプレート
私が以前に言及したように、あなたはゼロからウェブサイトを作成する必要はありません、代わりに、我々はGatsbyの公式ウェブサイトで見つかるいくつかのスターターテンプレートを使うことができます.
このチュートリアルではgatsby-starter-default そのためには、以下のコマンドを端末で実行します.

gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

gatsby new 新しいウェブサイトを作成します.あなたが独自のギャツビーを利用する場合は、Bearboneサイトを取得します.スターターテンプレートとギャツビーの新しい組み合わせは、最も一般的なアプローチを使用することです.

あなたのアプリケーションをローカル実行
いったん終了すると、Gatsbyサイトがブートストラップに成功したというメッセージが表示されます.今すぐ実行

cd gatsby-starter-default && gatsby develop

このコマンドは、新しいGatsbyフォルダに移動し、ファイルを初期化します.ブラウザを開いてhttp://localhost:8000/ , 下の画像と同じように、デフォルトのステータページが表示されるはずです.

あなたのウェブサイトを見つけるために検索エンジンが欲しいならば、正しくあなたのウェブサイトのメタデータを手配することは重要です.gatsby設定.JSファイルを使用すると、お客様のウェブサイトのデータをカスタマイズすることができます.
あなたのウェブサイトを世界中の誰のためにでもアクセス可能にするために、あなたはホスティングサービスであなたのウェブサイトを配備する必要があります.Netfliy、Vercel、Azure、Gatsby Cloud、Heroku、AWS、IIS、FirebaseなどにGatsbyウェブサイトを展開できますが、この例ではNetLifyを使用します

NetLifyへのウェブサイトの配備
我々のウェブサイトを展開する前に、まず、静的ファイルを含むビルドフォルダーを生成する必要があります.実行する

gatsby build

完了すると、フォルダ名public . つまり、NetLifyで展開するフォルダーだけが必要です.
移動するNetlify ウェブサイトとアカウントを持っていない場合は、サインアップボタンをクリックしてアカウントを作成します.心配しないでください、Netfliyは無料ホスティングです、そして、それはあなたに何も請求しません.一度登録すると、Netfliyダッシュボードにリダイレクトされます.

ここでNetLifyメニューのサイトをクリックし、「Gitに接続せずに新しいサイトを展開したいのですが?」というページをご覧ください.そのプレースホルダのパブリックフォルダをドラッグアンドドロップし、しばらく待つと、あなたのウェブサイトはNetfliyで展開されます.それがうまく展開されるならば、あなたは以下のイメージに類似した何かを見なければなりません.


結論
私はあなたがこの記事を参考に願っています.何か助けが必要な場合は、コメントのセクションでお知らせください.
コーヒーを買っていただけませんかhere .
接続しましょう.
👋 読んでくれてありがとう