Articles

Gatsby.js スタティックサイトのチュートリアル Part 11 Final

Tags:Gatsby React JavascriptPosted: June 20, 2024

Gatsby.js で MDX を使用したブログサイトを作成するチュートリアルの Part11（最終回）です。SEO コンポーネントの使い方を確認してこのチュートリアルを終わりにしたいと思います。メタデータを追加するまず、gatsby-config.js の…

Tags:Gatsby React JavascriptPosted: June 9, 2024

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart10です。今回はブログにタグ機能を追加します。下記のような流れで作成します。 MDXファイルにタグを追加するブログポストのすべてのタグを取得するクエリを作成するタグページのテンプレートを作成す…

Tags:Gatsby React JavascriptPosted: May 12, 2024

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart9です。今回はgatsby-awesome-paginationブラグインを使用して、ブログページにページネーションを実装します。下記のような手順になります。 gatsby-awesome…

Tags:Gatsby React JavascriptPosted: May 9, 2024

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart8です。今回はgatsby-plugin-imageのGatsbyImageコンポーネントを使用して、各ブログポストにヒーローイメージを追加して、ブログページのリストにも表示できるようにしていきます…

Tags:Gatsby React JavascriptPosted: May 6, 2024

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart7です。前回テンプレートを使用して各ブログポストのページを作成し、ブログページからのリンクを実装できました。ブログページに機能を追加していく予定ですが…

Tags:Gatsby React JavascriptPosted: May 5, 2024

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart6です。前回ブログページにブログポストの一覧を表示できるようにしたので、今回は Gatsby’s Filesystem Route API を使用して各ブログポストのページを作成し…

Tags:Gatsby React JavascriptPosted: May 4, 2024

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart5です。いよいよブログページを段階的に作成していきます。最終的には各ブログポストへのリンクがあるブログページにしていきますが、まずはブログポストの一覧を表示できるようにしていきます。 MDXブログポ…

Tags:Gatsby React JavascriptPosted: May 3, 2024

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart4です。今回はGraphQLでデータを取得する方法を確認します。gatsby-config.jsに記載したtitleを取得してLayoutコンポーネントに使用します…

Tags:Gatsby React JavascriptPosted: May 2, 2024

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart3です。今回はプラグインの使い方を確認します。Gatsby Image plugin を使用してホームページに画像を追加します。プラグインをインストールプラグインを使用する流れは下記のようになり…

Tags:Gatsby React JavascriptPosted: April 29, 2024

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart2です。今回はページコンポーネントを作成しCSSモジュールでスタイリングする方法を確認します。また Gatsby Link API を使用してページ遷移するリンクの作成方法も確認します。ページコン…