GatsbyとMDXで開発者ブログを構築する方法

dev.to、hashhnode、mediumなどのサイトにアイデアを簡単に公開できますが、理想は自分のコンテンツを完全に制御できることです。独自のWebサイトを構築し、独自のコンテンツを制御するためのツールのリストが増え続けています。この広範なチュートリアルでは、ギャツビーを使用してコンテンツを輝かせる方法について説明します。このようなエコシステムで得られるベルとホイッスルを追加します。

私はもともとJekyllを使用してブログを公開しましたが、Lumenテンプレートを使用してGatsbyに切り替えました。 2017年5月頃にバージョン0からギャツビーを使用しています。

こんにちは、世界から行きます！ Gatsbyは、コード構文の強調表示とその暗いモードの良さのテーマトグルを備えたコーディングブログにプロジェクトを進めます。

ギャツビーがすぐに稼働させるために利用できるプラグイン、スターター、テーマの豊富なエコシステムがありますが、ギャツビーの仕組みの基本に焦点を当てて、ギャツビーを提示するための進歩的な開示アプローチを取りたいです。 >

なぜギャツビー？

ギャツビーは静的なサイトジェネレーターであるため、ページが要求されたときにページの動的な生成はありません。 Gatsbyサイトの構築された出力はCDNでホストでき、グローバルに利用可能でスーパースケーラブルになります。

GatsbyはMarkdownファイルを使用して、サイトプロジェクトでページを作成できます。 GatsbyはMarkdownファイルをGatsbyファイルシステムに読み取り、MarkdownをHTMLに変換し、サイトを構築するときに静的ページを作成します。

最終結果は、ページを要求する際の遅延がほとんどない非常に高速なサイトです。

MarkdownおよびMDX

2016年以来、Markdownで開発の旅を記録しています。 Markdownは、HTMLに変換できるプレーンテキストファイルで簡単な編集を可能にする方法を提供します。

MDX（またはMarkdown JSX）は、MarkdownドキュメントにJSXを書くことができるツールです。

ギャツビーは、私がMarkdownとMDXを使用するために使用した最良のフレームワークです。投稿にFrontMatterを使用して特別な表記法は必要ありません。

何が必要ですか？

フォローする場合は、必要なことがいくつかあります：

基本的なWeb開発のセットアップ：ノード、ターミナル（BASH、ZSH、または魚）

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

テキストエディター

反応の基本的な理解

これらのいずれも持っていない場合、空のgithubリポジトリを作成してそこから開発環境を始めることができるstackblitzとgithubの両方のコードスペースがあります。

• 以下の例では、テキストエディターとしてVSコードを使用し、Yarnを希望のパッケージマネージャーとして使用します。 NPMを好むなら、それはクールです。 ？
• このチュートリアルの完全なコードをGithubで見つけることもできます。
わかりました、始めましょう！
こんにちは、世界！

ギャツビープロジェクトをスピンアップする時が来ました。最初はコマンドラインからこの大部分を行います：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

かっこいい。これで他の場所に行く前に、npmモジュールをインストールする前に.gitignoreファイルを追加する必要があります。

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

今、私は、VSコードgitがあまりにも多くのアクティブな変更について叫ぶことなく、必要なすべてのNPMの良さをインストールできます。依存関係をインストールして、ギャツビーと一緒に立ち上がって実行してみましょう。

次に、プロジェクトに最初のReactコンポーネント（多くの）を追加します。次のものをindex.jsファイルに追加します。

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

コマンドラインからギャツビー開発コマンドを実行する準備ができました：

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

これにより、Gatsby Dev Severがスピンアップし、私のプロジェクトはポート8000​​（デフォルトのGatsbyポート）のブラウザで表示できると言います。 URLはhttp：// localhost：8000/。

です

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

コマンドラインインターフェイス（CLI）からGatsbyバイナリコマンドを直接使用することは完全に実行可能ですが、ほとんどの人はPackage.jsonファイルのスクリプトセクションに利用可能なコマンドを追加します。

追加のボーナスとして、ここでギャツビースクリプトに追加できるエクストラがいくつかあります。

毎回同じポートでプロジェクトを実行したくない場合は、-Pフラグとその後指定されたポートで変更できます。たとえば、Gatsby Develop -P 8945。

プロジェクトの準備ができたらブラウザタブを開きたい場合は、スクリプトに-oを追加できます。

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

私はサーブスクリプトで同じことをしますので、プロジェクトを構築したとき、それは開発の別のポートにあることを知っています：

そしてそれで、必須の「こんにちは、世界！」ようこそが完了し、この投稿の残りの部分を進めることができます！ ？

最後に、これまでに行った変更をコミットします：

ブログのコンテンツ

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

わかりました、プロジェクトには今はあまり進んでいないので、最初にコマンドラインからいくつかのコンテンツを追加します：

私が作成している例全体でこれらを使用します。

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

ファイル拡張子に気付くでしょう。mdx。これはMDXファイルです。

フロントマター

ブログにコンテンツを追加する前に、フロントマターについて話す必要があります。

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

フロントマターは、ギャツビーがページを作成するときに使用できるファイルに関する情報を保存する方法です。とりあえず、投稿のタイトルと日付を追加します。また、コンテンツを追加します。最初の投稿は次のとおりです

2番目の投稿：

3番目の投稿：

これらの投稿はギャツビーによってページとしてまだ認識されていないため、今のところ投稿のためのことです。プロジェクトに追加するコンテンツを見つける場所をGatsbyに知らせる必要があります。これを行うには、Gatsbyに構成ファイルを追加します。

gitに行った変更をコミットしましょう：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

gatsby config

Gatsby Configは、使用できる多くのGatsbyプラグインを定義および構成するために使用されるものです。 Gatsby Plugin Ecoシステムの詳細。とりあえず、端末で再びファイルを作成します：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

これにより、プロジェクトのルートにGatsby-Config.jsが作成されるため、以前に作成した.mdxファイルを読むようにGatsbyの構成を開始できます。

ギャツビープラグイン

ここで、Gatsbyが作成したプラグインをインストールして構成して、作成したファイルを調達および表示できます。今すぐそれらをインストールし、それらが何のためのものかを簡単に詳しく説明します：

パッケージを簡単に見る。JSONは、次の依存バージョンがインストールされていることを示しています。

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

注意すべきことの1つは、ギャツビーでは、React 17を使用してコンポーネントにReactをインポートする必要がないということです。しかし、完全性のために、混乱を避けるために、これらの例に含めることです。

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

ここで、Gatsby-Plugin-MdxとGatsby-Plugin-Mdxを構成する必要があります。 Gatsby-config.jsファイルで、これを追加します：

今までの変更をコミット：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

gatsby graphql

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

今度は、Gatsby GraphQLクライアントであるGraphiQLを使用して、Gatsbyのファイルを使用している場所を確認する時が来ました。あなたが進んでいる場合、CLIはプロジェクトを表示するために2つのURLロケーションを示していることに気づいたかもしれません：

ファイルシステム内のファイルを表示するために、___graphql（3つのアンダースコア）ルートを今すぐ使用します。

これが少し威圧的であるように見える場合は、あまり意味がないように見えるすべての部品をカバーしようとします。フォローしている場合は、サンプルをGraphiQLエクスプローラーにコピーする必要があります。

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

GraphiQLエクスプローラーを開くと、いくつかのエクスプローラーパネルがあります。これは、プロジェクトで探索するための利用可能なすべてのデータであり、Gatsby-config.jsファイルで構成したものに依存しています。

GraphiQLクエリパネルと結果はその隣にあります。これは、必要なデータを取得するためにGraphQLクエリを作成する場所です。クエリパネルの下部にクエリ変数セクションもあります。後で説明します。

右端にはGraphQLドキュメントエクスプローラーがあります。 GraphQLの厳密なタイピングのため、これはデータに関する独自のドキュメントを生成できることを意味します。しかし、それはこの投稿の範囲外です。

graphql

を使用してローカルファイルをクエリします

次に、GraphIQLクエリパネルに追加したファイルをクエリします。このクエリでは、ファイルのフォント問題で定義されているタイトルと日付をクエリしています。

それをクエリパネルに入れてビッグプレイボタンを押すと、結果パネルのデータを取り戻します。左パネルのエクスプローラーを使用して、データを選択することもできます。クエリを実行した後に得られるものは次のとおりです

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

これは、クエリで要求した関連情報を備えた大きなJSONオブジェクトです。これをすぐに使用する方法について説明します。今のところ、これはギャツビープロジェクトでこのデータを使用してページを作成できることを意味します。

サイトメタデータ

gatsby-config.jsファイルには、サイトメタデータを指定するオプションもあります。サイトメタデータは、サイトのタイトルや説明などの一般的なデータを再利用したいときのためです。

これは、検索エンジン最適化（SEO）のためにサイトにメタタグを追加したい場合に、さらに便利です。 （繰り返しますが、後で詳しく説明します。）今のところ、Gatsby-config.jsのサイトに関するいくつかの基本的な情報を、SiteMetadataオブジェクトを使用して定義します。

i

モジュールでサイトメタダを直接定義できます。

サイトメタデータオブジェクトは少し大きくなる可能性があります。独自のオブジェクトに保持することで、少し簡単に推論できることがわかりました。代わりに、個別に定義します。

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

今、私は再びGraphiQLエクスプローラーに飛び乗って、次のクエリでそのサイトメタデータを照会することができます：

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

gatsby-config.jsファイルに変更を加えた場合は、開発サーバーを停止して再起動することをお勧めします（

ctrl

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

c

、yarnが開発されます）、Graphiql Explorerでページを更新し、クエリをもう一度実行してデータを元に戻します。

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

サイトメタデータフックを作成します ギャツビーファイルシステムにサイトメタデータがあるので、Gatsby Static Query Hook UseStaticQueryで使用したい場合はどこでもクエリできます。 src/pages/index.jsファイルに以下を追加した後、開発サーバーを殺して再起動します。 そこにある表記のいくつかに関するクイックメモ：const {site：{sitemetadata}、}は、サイトオブジェクトからSiteMetadataを引いているサイトクエリのデータに簡単に届ける方法です。これは破壊と呼ばれています。

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

今度は、DEVサーバーを再度開始した後、Windows/Linuxでブラウザコンソール（

Shift

j

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

に進むことができます。コマンド

コマンド

オプション jon macos）コンソール出力のSiteMetadataオブジェクトを参照してください。 次のコンソール出力を取得します： 不足している404ページが見つからないコンソール警告について心配しないでください（net :: err_aborted 404（見つかりません））。後でそれを作ります。 このクエリを毎回作成する必要がないように、コンポーネントで使用したいと思います。私はこれを独自のフックに抽象化します：

このクエリは、GraphiQLエクスプローラーのものと同じではないことに気付いたかもしれません。

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

これはクエリに名前を付けることです。私はプロジェクトで多くのクエリを使用するので、それらに意味のある名前を与えることは理にかなっています。

それははるかに冗長であり、site_metadata_queryから必要なアイテムを選択することができます。

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

これまでに行われた変更をcommintする時が来ました：

テーマUIを使用したスタイリング

このプロジェクトのスタイルを作成するには、レイアウトの実装やダークモードなどの機能を実装する速度があるため、テーマUIを使用します。私がやっていることとその理由に関連することを詳述しますが、これはテーマUIの使用方法に関するガイドではありません。

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

テーマUIに追加する追加の依存関係がいくつかあります。

インストールされたものを使用すると、Gatsby-Plugin-Theme-uiをGatsby-config.jsプラグインアレイに追加する必要があります。

さて、DEVサーバーを停止して再起動すると、見た目がわずかに異なるサイトがあります！正確には、すべてが少し青くなりました。これは、ギャツビープルーギンのテーマとそのことをしていることであり、その色はデフォルトです。

Theme UI用のGatsbyプラグインは、多くの構成オプションを提供していますが、その一部は必要に応じて詳細にカバーします。とりあえず、フォルダーを作成し、使用するテーマUIのテーマオブジェクトを定義します。

<span>yarn add gatsby react react-dom </span><span># -p is to create parent directories too if needed </span><span>mkdir -p src/pages </span><span># create the index (home) page </span><span>touch src/pages/index.js </span>ダークモードの場合、ディープテーマUIプリセットを使用しており、それをモードオブジェクトにダークのために広げています。 （これについてはすぐに。）今のところ、これが私のための多くのテーマの世話をするだろうことを知ってください：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

今度は、開発サーバーを再起動すると（繰り返しますが、対処することが学習されます）、スイスのテーマが適用されているため、もう少し受け入れられます。執筆時点では、テーマUIがローカルホストページを更新しない場合があるため、ブラウザページを更新する必要があります。

これまでのところ変更をgit：

にコミットします

いくつかのReactコンポーネントを追加する時間！

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

レイアウトコンポーネント

ギャツビーには特定のレイアウトがなく、開発者にその責任を与えています。この場合、サイト全体のレイアウトを作成しています。ギャツビープロジェクトで使用するために多くのレイアウトを組み込むことは可能ですが、この例では、1つだけを使用します。

今、私が現在持っているものをリファクタリングして、すべてがレイアウトコンポーネントによってラップされるようにします。現在src/pages/index.jsにあるものは、ヘッダーコンポーネントに使用できますので、レイアウトとヘッダーのために今すぐいくつかのファイルを作成します。

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

テーマUIレイアウト要素を使用して、いくつかの基本的なスタイルで追加しました。これは以前とは少し違って見えます：ボックス、リンク、見出し…何？これらはすべて、レイアウト、フォーム要素などに使用できるテーマUIコンポーネントです。

as = {gatsbylink}リンクプロップがリンクコンポーネントに追加されたことに気付くかもしれません。これは、テーマUIのAS Propを使用し、テーマUIスタイルに渡されるコンポーネントを渡すことができます。

Paul Scanlonからの素晴らしい投稿があり、これがテーマUIでどのように行われるかをより詳細に説明しています。テーマUIの非常に包括的な説明については、同じ著者による「テーマUIの理解」もあります。

テーマUIからのSXおよびバリアントプロップもあります。 SXを使用すると、追加のスタイルをコンポーネントに渡すことができます。 JSX style = {{}} prop。バリアントプロップにより、テーマから使用されているコンポーネントに事前定義されたスタイルのグループを適用できます。

ここでは、siTemetadataフックを維持し、ヘッダーコンポーネントが必要とするプロップを渡します。また、SX Propを使用して、メインを含むDivに合わせて基本的なスタイルを追加します。次に、子供向けのメインラッパーを作成しています

子供の小道具は、レイアウトコンポーネントがカプセル化するものをすべて返すことです。これには、レイアウトを適用したいものが含まれます。たとえば、

これにより、レイアウトコンポーネントとラッピングのすべてが返されます。上記の例では、それは現在、ヘッダーであり、レイアウトコンポーネントで包まれています。

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

例として、インデックスページ（src/pages.index.js）に戻り、以下を追加します。

結果はレイアウトコンポーネントに提供されているヘッダーであり、H1はラップされています。

インデックスページの投稿query

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

今度は、最初に作成した投稿を取得し、クリック可能なリンクのリストとしてインデックスページに表示する時が来ました。

投稿情報を取得するには、GraphQLを使用してローカルファイルをいくつか追加のビットでクエリするセクションで作成したクエリを再作成します。

ノードとスラッグのIDに追加されました。これは、.mdxファイルへのファイルパスです。

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

抜粋は、ギャツビー関数を使用してポストボディから最初の250文字を取得し、別の組み込みのギャツビー関数を使用して日付にある程度のフォーマットを追加しています。

次に、日付の下降順序で投稿を注文する方法として、sortを追加しました：allmdx（sort：{fields：[frontmatter___date]、order：desc}）{。これは、Front Matterの投稿の日付の並べ替えです。

それをgraphiqlエクスプローラーに追加すると、この結果が得られます。

<span>import <span>{ RainbowText }</span> from './components/rainbow'; </span>## <span>A Markdown Heading </span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span> </span>

これは、以前に詳細なコンポーネントを使用します。抜粋、FrontMatter、およびSlugはdata.Allmdx.Nodesから破壊されていることに注意してください：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

リンクをクリックすると、gatsby.js開発404ページに連れて行かれます。それは、.mxdファイルのページをまだ作成していないためです。それが次です。

先に進む前にこれまでにやったことをコミットします：

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

GatsbyファイルシステムルートAPIをMDX

を使用して使用します

GatsbyファイルシステムルートAPIを使用して、以前に作成した投稿のファイルパスを取得します。ファイルシステムルートAPIは、GraphQLデータからプログラムでページを作成する方法です。

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

このアプローチには、Gatsbyがビルド時にファイルシステムデータを生成するときにターゲットにされるページの特別なファイル表記があります。ファイルは、ノードとスラッグを示します。最初にファイルを作成し、次にデータがどこから来ているかを詳しく説明します。

ファイルでは、このテンプレートに含めたいデータのGraphQLクエリを定義します。

今では多くのコードなので、分解します。主にGraphQLクエリに関係しています：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

クエリの開始は、post_by_slug（$ slug：string）でスラッグを取り入れており、メインノードはmdxです。 >

そのクエリを取得してGraphiQLエクスプローラーに貼り付けて、再生ボタンを押した場合、これを取得します。

それは、GraphiQLエクスプローラーに$ Slugに対して定義された変数がないためです。クエリパネルの下部を見ると、クエリ変数セクションが表示されます。これをクリックすると展開されます。ここに、SLUGの変数を追加する必要があります。ファイルのいずれかのパスで巻き装置で定義します：

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

もう一度クエリを実行して、そのファイルのすべてのデータを取得します。読みやすさについては、体の出力についてコメントしました：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

ファイルシステムルートAPIが行っていることは、個々のファイルパスをsrc/pages/{mdx.slug} .jsのページクエリに渡し、（{data}）のクエリからページにデータを返すことです。ページに渡されているプロップ。

このファイルでは、返されているデータから体を破壊したことに気付くかもしれません。

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

それを行うための代替方法は次のとおりです

破壊を使用すると、冗長性がはるかに少なくなります。

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

最後に注意すべきことは、MDXRENDERERがポストの本体を包むことです。これは、Front Matterブロックの後に.mdxファイルに含まれるすべてです。コメントされたGraphiQLクエリからコンパイルされたMDXは、MDXRendererにラップする必要があるものです。

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

今すぐ変更をコミットします：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

ルートラッパーコンセプト

インデックスページのリンクの1つをクリックすると、目的の.mdxページに移動しますが、インデックスページとは少し違うように見えますか？

それはまだレイアウトを包むことがないからです。これは、GatsbyブラウザAPIを使用して、ラップゲージエレメント関数を使用してすべてのページ要素をラップできる場所です。また、Gatsby SSRで同じ機能を使用することをお勧めします。

2つのファイルで同じコードを複製しないように、使用する実際のコードを使用して3番目のファイルを作成し、それを2つのgatsby-*ファイルにインポートします。

最初に、必要なファイルを作成します：

ルートラッパーファイルは、ラップゲージエレメント機能を使用する場所です。

それから、gatsby-browser.jsとgatsby-ssr.jsファイルの両方で、これを追加します：

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

ラップゲージエレメント関数に必要な変更がある場合、1つのファイルでroot-wrapper.js。

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

でそれを行うことができます。

変更が有効になるのを見るために再びDEVサーバーを停止して再起動する時間！

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

ここでは、レイアウトコンポーネントがサイト上のすべてのページ要素をラップするために使用されているため、インデックスページにそれを保持する必要はもうないので、src/pages/index.jsからそれを削除します。

先に進む前にこれまでのところ変更を犯します：

404ページ

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

その404ページを作成する時間！

<span>"scripts": { </span> <span>"build": "gatsby build", </span> <span>"dev": "gatsby develop", </span> <span>"serve": "gatsby serve", </span> <span>"clean": "gatsby clean" </span><span>}, </span>

ここで、404ページに直接ナビゲートしてチェックアウトできます：http：// localhost：8000/404。

Gatsby Developを使用して開発する場合、Gatsbyはカスタム404ページをオーバーライドするデフォルトの404ページを引き続き使用することに注意してください。

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

これをコミットして、次の部分に進みます：

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

暗いテーマトグル

ダークモードは、ブログのコーディングの重要な機能です。 （私はあなたがわからない場合に冗談を言っていると言っています！）テーマUIカラーモードフックUseColormodeを使用し、以前にテーマオブジェクトで定義した2つのモードを簡単に切り替えます。 src/components/header.jsに追加されるものは次のとおりです

しかし、それは見栄えが良くないので、テーマUIフレックスコンポーネントでコンテナを包み、ボタンを右にシフトします：

次のセクションに移動する前に

<span># this creates the folders in the root of the project
</span><span>mkdir -p content/2021/03/{06/hello-world,07/second-post,08/third-post}
</span><span># create individual files
</span><span>touch content/2021/03/06/hello-world/index.mdx
</span><span>touch content/2021/03/07/second-post/index.mdx
</span><span>touch content/2021/03/08/third-post/index.mdx
</span>

gitコミット：

コードブロック

<span><span>---
</span></span><span><span><span>title: Hello World - from mdx!
</span></span></span><span><span><span>date: 2021-03-06</span>
</span></span><span><span>---</span>
</span>
My first post!!

<span><span>## h2 Heading</span>
</span>
Some meaningful prose

<span><span>### h3 Heading</span>
</span>
Some other meaningful prose

コードブロックは現時点では少し見えるので、多くの便利なテーマUIパッケージの1つでハイライトされている構文を追加します。私がこれに使用しているのはプリズムです。

パッケージをインストールして、components.jsと呼ばれるgatsby-plugin-theme-uiフォルダーにコンポーネントを作成する必要があります。

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

そのファイルでは、プリズムスタイルを適用する場所を定義する必要があります。

それが定義されているので、私が使用したいプリズムテーマをテーマオブジェクトで定義する必要があります：

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

変更が有効になるのを確認するには、開発サーバーの別の停止と開始が必要です！

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

変更をコミットし、次のセクションに移動します：

コンポーネントをMDX

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

に追加します

この次のビットはオプションです。 Markdown JSXでは、React（JSX）コンポーネントをMarkdownに含めることができます。これを実証するために、アニメーションサイクルでいくつかの色をアニメーション化するRainbowTextコンポーネントを追加します。アニメーションに必要な追加の依存関係があります： @emotion/Reactのキーフレーム。今すぐインストールします：

これはおそらくそれが実行されている場合、おそらく開発サーバーを破壊するので、今のところ停止します。

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

SRC/Components/Rainbow-Text.jsファイルで、このコンポーネントを追加します：

これはオプションであるため、ここで何が起こっているのかについて詳しく説明することはありません。ホバーにあるのは良いCSS効果であることを知ってください。

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

そのコンポーネントが作成されていると、使用したい任意の.mdxファイルにインポートできます。この例では、Content/2021/03/Third-Post/index.mdxに追加します。コンポーネントを追加した今、ファイルの差は次のとおりです。

devサーバーを再度開始した後、そのコンポーネントが追加された投稿に行くことができます。 wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee に包まれているテキストの上にホバリングすると、そのアニメーションが有効になっています。 。

おそらくそのインポートで顔をゆがめているでしょう：../../../。オンで！ただし、これを回避する方法はありますが、以前に詳述したルートラッパーコンセプトを使用して、MDXProviderを使用して、Ahem！ - 渡すコンポーネントをMDXに提供します。 ルートラッパー（root-wrapper.js）に戻ると、ページ要素をmdxproviderでラップして、虹色のコンポーネントをmdxproviderに渡すことができます：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

.mdxファイルからインポートを削除できます：

開発サーバーを停止して再起動した後、この投稿にアクセスしても、レインボーテキストが機能するのを見ることができます。 MDXProviderに直接コンポーネントを追加することの特別な利点は、使用するときにコンポーネントを.MDXドキュメントにインポートする必要がないことです。すべてのMDXドキュメントのプロバイダーを介して利用できます。

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

今すぐコミットします：

<span># add everything for committing
</span><span>git add .
</span><span># commit to repo
</span><span>git commit -m 'init project'
</span>

マークダウンイメージ

ブログ投稿に画像を追加したい場合は、MDXファイルにそれらを含めることができます。

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

./mdx-logo.pngは、コンテンツに追加したファイル/2021/03/06/hello-worldフォルダーであり、相対ファイルとして参照しています。しかし、それはそうではありません。 Hello World Postに行くと、表示される画像が壊れています。 Gatsby-Plugin-MDXへのプラグインとしてGatsby-Remark-Imagesを追加する必要があります。

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

その後、gatsby-config.js：

でプラグインを構成する必要があります

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

追加のGatsby-source-filesystemオブジェクトは、Gatsbyに処理する画像を探す場所を知らせることです。

今すぐコミット：

seo

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

SEOは、検索エンジンでインターネット上でコンテンツを見つけたい場合に非常に重要です。そのため、ここで関連するメタタグをブログに追加する必要があります。必要なすべてのタグを定義するプロセスが非常に複雑になる可能性があるため、時間を節約するために、必要なすべてのメタタグを生成するためにギャツビーで使用するReact SEOコンポーネントを作成しました。

コンポーネントを追加するために必要な依存関係とともにコンポーネントを追加します：

ギャツビープラギンの反応ヘルメットをgatsby-config.jsプラグインアレイに追加する必要があります：

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

それは、メタタグが必要なサイト全体でSEOコンポーネントを使用する場合です。

コンポーネントにはかなりの数の小道具が必要であり、その多くはサイト全体で1回定義されているため、これらを追加するのに最適な場所はSiteMetadataオブジェクトにあります。それから私は、outeSitemetadataフックで必要なものを引き出すことができます。

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

フォローしている場合は、必要に応じてこれらを変更できます。 Siteurlは今のところダミーURLになる可能性があります。それは、オープングラフプロトコルで使用するために必要な画像を指すのに役立ちます。たとえば、Twitter、Facebook、LinkedIn、Redditで作成した投稿を共有するときに見られる画像です。

これらの追加プロパティがSiteMetadataオブジェクト上にあるので、それらを照会できる必要があります。現在、useSitemetadataフックにはタイトルと説明しかありませんので、残りは今すぐ追加します：

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop",
</span>  <span>"serve": "gatsby serve",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

すべてのページにSEOコンポーネントを追加します。最初に、SRC/Pages/{mdx.slug} .jsページで投稿ページを作成します。これは最も関与しているものの1つなので、ここに違いを捨てて、何が起こっているのかを詳しく説明します。

標準リンク（SEOで非常に重要）には、Siteurl、Slug、およびExterptが必要です。

SiteMetadataフックを使用して、コンポーネントが必要とする残りの情報を取得しています。タイトルとTitleTemplateは、ブラウザタブに表示されるものを構成するために使用されます。

booleanの記事はコンポーネント用であるため、Jsonld形式でパン界のリストを作成できます。残りの小道具は、著者と公開された日付を特定するのに役立ちます。 ？

<span>"scripts": {
</span>  <span>"build": "gatsby build",
</span>  <span>"dev": "gatsby develop -p 8945 -o",
</span>  <span>"serve": "gatsby serve -p 9854 -o",
</span>  <span>"clean": "gatsby clean"
</span><span>},
</span>

それはたくさんでした。私はそれが理にかなっているいくつかのを願っています！この投稿の範囲については、そこに残しますが、このテーマを掘り下げることがたくさんあります。 ありがたいことに、SRC/pages/index.jsページは少し簡単です！ 両方の例から意図的に画像を除外しました。このコンポーネントで使用する独自のオープングラフ画像を作成することに興味がある場合は、サーバーレス機能でこれを行う方法については、「GatsbyとVercelを使用したグラフ画像を開いてください」をご覧ください。 ？

今、私はサイトを構築できます（生産の準備ができています）。それが構築されたら、メタタグのページソースをチェックできます：

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

ビルドが終了したら、Yarnを使用して、Build Host：9000でビルドサイトをローカルに提供することができます。ブラウザでは、キーボードショートカット

ctrl

u

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

を使用してページソースを表示できます。ここから、メタデータで使用されるダミーURLになるカノニカルメタタグを確認できます。

大丈夫！これをgitにコミットし、先に進みます： それをgithubに押します

各セクションの最後にGitコミットを行ってきた理由を疑問に思うかもしれません。それは私が今プロジェクトをGithubにプッシュするつもりだからです。

githubアカウントにログインし、右上隅にあるアバター画像の横にあるプラスアイコンを選択し、新しいリポジトリを選択します。

リポジトリ名で、My-Gatsby-Blogのプロジェクト名を追加しますが、残りのデフォルトを残してリポジトリの作成をクリックします。

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

次の画面では、地元のプロジェクトをGitHubにプッシュするために必要なターミナルコマンドを提供します：

それらすべてを端末に入れて

を押したら、

を入力して、githubページを更新して新しいプロジェクトを表示します！

deploy

この赤ちゃんをウェブ上に置く時間！これを行うには多くの方法があります。 Gatsbyはフラットファイル構造に構築されているため、インターネットにアクセスできるファイルサーバーでGatsbyサイトをホストできます。

CDNでのホスティングを提供する多くのサービスがあります。 Netlify、vercel、renderなどのサービスを使用すると、CLI、GitHub統合、またはNetlifyの場合、ドラッグアンドドロップ！

vercel

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

vercelで展開するには、github、gitlab、またはbitbucketアカウントが必要になります。次に、Vercel CLI：をインストールするように求められます

私はすでにそれをインストールしているので、今ではCLIコマンドを実行するケースです：

その後、新しいプロジェクトを設定して展開するように求められています。

：

を入力すると、すべての質問にデフォルトに答えます。

それだけです。次に、Vercelでサイトのビルドを見ることができる展開URLを与えられました。

vercelダッシュボードからドメインを構成し、必要に応じてvercelから1つを購入できます。私は個人的にnamecheap.comを使用していますが、それはオプションです。

netlify

CLIを介してNetlifyを使用して展開することはVercelとほぼ同じですが、ドラッグアンドドロップの作成を行います。

認証には、Github、gitlab、bitbucket、またはメールアカウントの1つが必要になります。認証してログインしたら、メニューバーのサイトを選択できます。GITに接続せずに新しいサイトを展開したいドロップエリアがありますか？ここにサイト出力フォルダーをドラッグアンドドロップします。ファイルエクスプローラーでプロジェクトのルートに移動し、パブリックフォルダーをドロップエリアにドラッグアンドドロップします。

Netlifyはファイルをビルドし、検査のために生成されたURLに展開します。 Vercelとほぼ同じで、Netlifyはそこにドメインを購入して展開することができます。

render

レンダリングにはCLIまたはドロップオプションがなく、代わりにGitHub統合を使用します。認証するには、github、gitlab、またはgoogleアカウントが必要です。認証してログインしたら、サービスセクションに載っています。ここから、新しい静的サイトを選択してから、以前にgithubにプッシュしたプロジェクトのためにgithub URLを入力できます。

次のページでは、次の設定を示します。

名前：my-gatsby-blog

branch：デフォルト値

ビルドコマンド：YARN BUILD

• ディレクトリを公開：./public
[Staticサイトの作成]をクリックします
• レンダリングがそのことをするのを待ってから、プロジェクト名の下のリンクをクリックしてサイトをライブで表示します。
レンダリングには、サイトに独自のカスタムドメインを設定するオプションもあります！
• オプションのギャツビープラグイン

機能を追加するために選択できる、

YouTubeビデオ、ツイート、Strava Runs、Coodepens、CodeSandboxを埋め込みますか？ Gatsby-Plugin-Mdx-embedをご覧ください。

Google/Bing Searchコンソールを使用していますか？その後、Gatsby-Plugin-Sitemapでサイトマップを生成する必要があります

あなたはあなたのサイトをPWAとしてオフラインで利用できるようにしたいですか？ Gatsby-Plugin-Offlineを追加します

サイトのブラウザタブにファビコンを持ちたいですか？ Gatsby-Plugin-Manifestをご覧ください 分析

サイトがどれほど人気が​​あるかを知りたい場合は、分析オプションがあります。私は自分のプロジェクトでしばらく前にGoogleアナリティクスの使用をやめましたが、今ではプライバシーに焦点を当てた代替案を好みます。私がお勧めする1つは、Fathom Analyticsです。 （最初の月のサブスクリプションから10ドルを取得したい場合は、アフィリエイトリンクがあります。）
もう1つの選択肢はもっともらしいですが、これについても良いことを聞いたことがあります。

GatsbyサイトにFathom Analyticsを実装するには、サイトのヘッドに追加のスクリプトタグを追加する必要があります。それはどういう意味ですか？さて、最初にファトムダッシュボードでサイトを作成し、https：//app.usefathom.com/#/settings/sitesにアクセスして、リストの下部にスクロールして、新しいサイトを追加します（ my-gatsby-blog）、[サイトコードの取得]をクリックします。次に、サイトコードでポップアップモーダルを取得します。スクリプトには、ギャツビープロジェクトのヘッドに追加する必要があります。スクリプトがどのように見えるかは次のとおりです

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

root-wrapper.js：

の違いは次のとおりです

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

wrap！

それは私からです。最後に到達してくれてありがとう。 ？

ギャツビープロジェクトをゼロからセットアップするためのこの非常に広範なガイドから必要なものを手に入れたらいいのに！

手を差し伸べてこんにちはと言いたいなら、私を手に入れるのに最適な場所はツイッターにあります。

Gatsby Mdx blog

に関するよくある質問（FAQ）

Gatsby MDXブログの投稿に画像を追加するにはどうすればよいですか？

Gatsbyに画像を追加することで、視覚的な魅力を強化し、コンテンツをより魅力的にすることができます。これを行うには、画像ファイルをMDXファイルにインポートする必要があります。まず、Gatsbyプロジェクトの「SRC」ディレクトリに画像ファイルを配置します。次に、MDXファイルで、syntax：Imagenameを「../path/to/image.jpg」からインポートして画像をインポートします。インポート後、コンポーネントとして「Imagename」を使用してMDXコンテンツの画像を使用できます。 > Gatsby MDXを使用すると、ブログ投稿のレイアウトをカスタマイズできます。 「SRC」ディレクトリにレイアウトコンポーネントを作成できます。このコンポーネントには、ヘッダー、フッター、サイドバーなどの要素を含めることができます。レイアウトコンポーネントを作成したら、MDXコンテンツをラップできます。これを行うには、MDXファイルにレイアウトコンポーネントをインポートしてから、このようにコンテンツをラップしてください：ここでMDXコンテンツ。ブログの投稿？

Gatsby MDXは、ブログ投稿にコードスニペットを含めることをサポートしています。コードスニペットを追加するには、「pre」および「code」タグを使用できます。次のようなこれらのタグでコードスニペットをラップします：

 <code>ここにコード</code> 

。また、このようなバックテックの最初のセットの後に追加することで、強調表示用のコードスニペットの言語を指定することもできます。

目次のテーブルは、ブログの投稿をよりナビゲート可能にすることができます。 Gatsby MDXは、目次の作成をサポートしています。 GraphQLクエリの「TableofContents」フィールドを使用して、目次を生成できます。このフィールドは、一連の見出しとそれぞれの深さを返します。これは、目次のネストされたリストを作成するために使用できます。

Gatsby MDXブログにSEOを追加するにはどうすればよいですか？

​​

SEOは、ブログの可視性を高めるために重要です。 Gatsby MDXを使用すると、ブログ投稿にSEOを追加できます。 「Gatsby-Plugin-Reacter-Helmet」を使用して、ブログ投稿のドキュメントヘッドを管理できます。このプラグインを使用すると、SEOにとって重要なタイトル、説明、メタタグなどの要素を追加できます。ブログの投稿を簡単にナビゲートできるようにします。 Gatsby MDXはページネーションをサポートしています。 「Gatsby-Awesome-Pagination」プラグインを使用して、ページに包まれたページを作成できます。このプラグインは、ページのページの塗装されたインデックスとページ化されたコンテキストを作成します。

Gatsby MDXブログの投稿にコメントを追加するにはどうすればよいですか？

コメントセクションを追加すると、ブログのエンゲージメントが増加する可能性があります。 Gatsby MDXを使用すると、ブログ投稿にコメントを追加できます。 DisqusやCommentoなどのサードパーティサービスを使用できます。これらのサービスは、コメントを有効にするためにレイアウトコンポーネントに含めることができるスクリプトを提供します。あなたのブログ投稿の。 Gatsby MDXを使用すると、ソーシャル共有ボタンを追加できます。 「Gatsby-Plugin-Reactince-Share」などのプラグインを使用して、ソーシャル共有ボタンを追加できます。このプラグインは、Facebook、Twitter、LinkedInなどのさまざまなソーシャルメディアプラットフォームをサポートしています。特定の投稿を簡単に見つけることができるブログ。 Gatsby MDXは、検索機能の追加をサポートしています。 「Gatsby-Plugin-AlisticLunr-Search」などのプラグインを使用して、検索機能を追加できます。このプラグインでは、キーワードを使用して検索できる投稿のインデックスを作成します。メーリングリストと読者の最新情報を保持します。 Gatsby MDXを使用すると、ニュースレターサブスクリプションフォームを追加できます。 MailChimpやSendInBlueなどのサービスを使用できます。これらのサービスは、ニュースレターのサブスクリプションを有効にするためにレイアウトコンポーネントに埋め込むことができるフォームを提供します。

以上がGatsbyとMDXで開発者ブログを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。