ギャツビーとNetlifyでブログを構築する方法

これは、私のオリジナルのポストクロスのプレビューです私のwebsite's blogからの投稿

ギャツビーJSとは

今日ブログを構築するには、新しいJAM Stack(JavaScript、API、およびマークアップ)で、さらに簡単になっています.ジャムスタックスタンド
近代的なアーキテクチャ-高速かつ安全なサイトやJavaScript、API、およびプリereredされたマークアップと動的なアプリケーションを作成し、Webサーバなしで提供.
GatsbyはREACTJSに組み込まれている静的サイトジェネレータです.その最も単純な定義では、静的なウェブサイトはHTMLページのグループです.静的サイトは、すべての訪問者のために同じように見えます.サーバーがすべての訪問者に同じ反応を送るので、静的サイトはあまりにもロードするのがより速いです.ただし、訪問者のコンテンツをカスタマイズすることはできません.ギャツビーは反応の上に構築されているので、そのパフォーマンス、コンポーネント、JSX、反応ライブラリの生態系と大きなコミュニティなどの反応のすべての利点を得る.あなたがどんな問題も持ってはならないように、Gatsby Documentationも非常によく書かれます.
多くの静的サイトでは、ビルドプロセス中に外部データソースを使用する必要があります.Gatsbyは、WordPress、API、およびMarkdownのようなCMSSを含むデータの多くの形式のサポートを提供します.このデータにアクセスするには、GATSBYはGraphSQLを使用します.

ジェッツスキーマ
あなたがGraphSQLを知っているならば、Gatsbyを使っているMarkdownからデータにアクセスすることは簡単に感じます.Graphqlがあなたにとって新しいならば、それはさらにもう一つのことを加えます、しかし、GatsbyでGraphqlを使用することに関してdocumentationは多くの情報を持っています.

Note: GraphQL is a query language.

ギャツビーJSによるブログの構築

ギャツビーJSでブログを作成するには、いくつかの手順を実行する必要があります.以下の例で見ましょう.

gatsby CLIをインストールします

npm install -g gatsby-cli

新規サイトの作成

gatsby new gatsby-site

ディレクトリをサイトフォルダに変える

cd gatsby-site

開発サーバを起動する

gatsby develop

つのステップの後、あなたのGatsbyサイトは準備ができています、デフォルトでlocalhost:8000でGatsby開発環境にアクセスすることができます.あなたはsrc/pagesでJavaScriptページを編集することができます、そして、変化はブラウザで自動的に再ロードされます.

生産ビルドを作成する

gatsby build

ビルドコマンドでは、gatsbyはあなたのサイトのための生産ビルドを実行します.

ローカルで生産ビルドを行う

gatsby serve

最後に、シェルコマンドで、gatsbyは、ビルドサイトをテストするためのローカルHTMLサーバーを起動します

プロジェクト構造

ギャツビーサイトを使用すると、非常に重要な設定ファイルのカップルを覚えているのは簡単ですデフォルトのプロジェクト構造を取得します.

|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

プロジェクト構造
ギャツビーサイトには4つの重要なファイルがあります.

Gatsby設定.js -のタイトル、説明などのメタデータを持つギャツビーの設定オプション

Gatsbyノード.ギャツビーノード.ビルドプロセスに関するデフォルト設定をカスタマイズするためのJS API.

ギャツビーブラウザ.ブラウザのデフォルト設定をカスタマイズするためのギャツビーブラウザAPI.

ギャツビーSSR.サーバー側レンダリングに影響を与える設定をカスタマイズするためのギャツビーサーバー側レンダリングAPI.

あなたは私のwebsite's blogのポストの残りを読むことができます