gatsby starter landing page

ギャツビー ランディング ページ スターター

シンプルで最小限の、使いやすいランディング ページ スターター。後で取り外す必要があるあらゆる種類の付加機能はありません。すでに見栄えの良い単一ページを備えた必要最低限​​のテンプレートから、超高速で美しいランディング ページを作成します。

前提条件

Gatsby CLI をまだインストールしていない場合は、最初にインストールしてください。

npm install --global gatsby-cli

Gatsby CLI は Node と npm を使用します。これらもインストールする必要があります。詳細については、GatsbyJS.org をご覧ください。

はじめる

Gatsby new コマンドを使用してスターターをインストールします。

gatsby new landing-page https://github.com/gillkyle/gatsby-starter-landing-page.git

プロジェクト ディレクトリに移動し、サイトを起動します。

 cd landing-page && gatsby develop

サイトはデフォルトのブラウザで http://localhost:8000 に開きます。

/src内のコードを編集し、変更を保存すると、ブラウザーに即座に再読み込みされます。

?中には何が入っているのでしょうか？

最小限のランディング ページ スターターには、いくつかのプラグインがすでにインストールされていますが、主な焦点はシンプルであり、見た目がきれいであることです。以下のものがデフォルトで含まれています。

• ? Gatsby Image: src/imagesフォルダーに追加された画像は、 gatsby-imageプラグインによって自動的に最適化され、遅延読み込みやぼかし効果を使用してコンポーネントに取り込むことができます。
• アナリティクス: Google アナリティクスのトラッキング ID をgatsby-config.jsに追加して、サイトへの訪問者の追跡を自動的に開始します。
• ?サイトマップ: サイトに追加された新しいページはgatsby-plugin-sitemapを通じてサイトマップに自動的にまとめられます。
• ?カラー テーマ: src/styles/constants.jsファイルには、サイト上のコンポーネントにインラインで適用される一連の色とデフォルト スタイルが含まれており、独自のスタイルでオーバーライドできます。

?実験

オンライン プレイグラウンドでソース コードを試してみたい場合は、このボタンを使用して Codesandox でリポジトリを開くことができます。

?展開する

サイトをオンラインですぐに確認したい場合は、このボタンを使用してサイトのコピーを Netlify にデプロイできます。

サイトの最適化されたビルドを作成するには、次のコマンドを実行します。

gatsby build

/publicフォルダーが組み立てられ、Netlify、Surge、GitHub Pages、AWS S3、Firebase ホスティング、または独自のファイル サーバーなどのサービスにデプロイできます。