Noob Front End Engineer Blog

Gatsbyでブログ作成

Gatsby

2022-11-11

このドキュメントではGatsby.jsでプログ作成を行う手順の紹介を行います。
今回は学習も兼ねてGatsbyが提供しているブログテンプレート等は使わず、自作でブログの作成を行っていきます。
少し大変ですが、このハンズオンを行えば

Gatsby
,
TypeScript
,
GraphQL
がなんとなく分かるようになると思います!

下記のように、幾つかのセクションに分けて紹介していくので自分のブログには必要ないなと思ったセクションは読み飛ばしてもOKです。

titlestatusdescription
セットアップpublished周辺環境の準備や、Gatsbyのセットアップを行います。
記事テンプレートの作成publishedMDXファイルから記事ページを作成します。
記事一覧の表示comming soon記事の一覧表示、フィルタリングなどを行います。
SEOコンポーネントの作成comming soon記事ページのSEO対策を自動化するコンポーネントを作成します。
目次コンポーネントの作成comming soon記事内の目次表示を行うためのコンポーネントを作成します。
記事内ソースコードのハイライトcomming soon記事内のソースコードをハイライトできるように調整します。
テーブルコンポーネントの作成comming soonMDXはテーブル未対応の為、記事内で使用するテーブルコンポーネントを作成します。
Contactページの作成comming soonGatsbyのAPI機能を使用し、フォームの作成を行います。

それでは早速セットアップから行っていきましょう!

Step1:セットアップ