Gatsbyでブログ作成
2022-11-11
このドキュメントではGatsby.jsでプログ作成を行う手順の紹介を行います。
今回は学習も兼ねてGatsbyが提供しているブログテンプレート等は使わず、自作でブログの作成を行っていきます。
少し大変ですが、このハンズオンを行えば
Gatsby
TypeScript
GraphQL
下記のように、幾つかのセクションに分けて紹介していくので自分のブログには必要ないなと思ったセクションは読み飛ばしてもOKです。
title | status | description |
---|---|---|
セットアップ | published | 周辺環境の準備や、Gatsbyのセットアップを行います。 |
記事テンプレートの作成 | published | MDXファイルから記事ページを作成します。 |
記事一覧の表示 | comming soon | 記事の一覧表示、フィルタリングなどを行います。 |
SEOコンポーネントの作成 | comming soon | 記事ページのSEO対策を自動化するコンポーネントを作成します。 |
目次コンポーネントの作成 | comming soon | 記事内の目次表示を行うためのコンポーネントを作成します。 |
記事内ソースコードのハイライト | comming soon | 記事内のソースコードをハイライトできるように調整します。 |
テーブルコンポーネントの作成 | comming soon | MDXはテーブル未対応の為、記事内で使用するテーブルコンポーネントを作成します。 |
Contactページの作成 | comming soon | GatsbyのAPI機能を使用し、フォームの作成を行います。 |
それでは早速セットアップから行っていきましょう!