Gatsby

404 ページをカスタマイズする 404 ページがデフォルトのままで寂しかったからカスタマイズしました！ 作った 404 ページ Gatsby では、 src/pages/404.js を編集することで 404 時のページをカスタマイズすることが出来ます。 おあそび ただ 404 を表示するだけではおもしろくないかなぁ。 404 ページに来るほど勉強熱心な方にはもっと筋肉を知ってもらいたいなぁ。 という思いから！ 404 ページにはタイピングゲームをご用意しました！ 実装は以下のコードをご確認ください！

MDXを使う準備 この記事ではMDXを使った前提で進めます。MDXは不要でシンプルなMarkdownで良い方は適宜読み替えていただけると幸いです。 MDXとは、Markdownで簡潔に記述し、かつより高度で再利用可能なJSXも埋め込めるものです。 インストール gatsby.configに追記 gatsby-node.jsでページを作成 詳細は割愛しますが、 CreatePages API の、 CreatePage アクション を使ってページを作成します。 テンプレートファイルに ./src/templates/blog-post/index.js を指定しているので、あとでこのファイルを見ていきます。 MDXProviderでコンポーネントの定義をマッピングする MDXProviderを使うことで、MDXコンテンツ内のタグのレンダリングを置き換えることができます。 例えば <h1> の色を変えたい場合、以下のようにMDXProviderにオブジェクトを渡します。 自分の場合は、 コンテンツのレンダリングの定義を src/components/MDXComponents/index…

Gatsby での基本的な画像の取り扱いについてメモ！ 必要なプラグイン GraphQL で取得する ファイル名は profile-pic.jpg であり fluid(伸縮)し最大幅は 400px, 対応ブラウザでは WebP 画像で表示して最適化する場合、このような GraphQL クエリを作成する。 fragments を使う 先程は以下のフィールドを指定したが、毎回指定するのは大変でミスもありそうだ。共通化したい。。 base64 aspectRatio src srcSet srcWebp srcSetWebp sizes そこで fragments というものがあり簡略化して書ける！ gatsby-image の fragments は gatsby-transformer-sharp/src/fragments.js で確認ができます！ このように fragments はプラグインで定義されていたり、自分で定義することも可能です。 gatsby-image で画像を表示する たとえば src/pages/index.js…

Gatsby で作っている当ブログに、先日目次を追加したのでご紹介します！ デモ いま目次が表示されているかと思いますが、PC とスマホで表示が違うのでデモを御覧ください！ PC こんな感じに右のサイドバーに表示してます！ スマホ 画面右下のボタンをタップすると目次が現れます！ React の公式ドキュメント風！ データ取得 目次に使う各タイトルのデータを取得するには以下のプラグインを使います。 gatsby-transformer-remark または gatsby-plugin-mdx すでに .md ファイルや .mdx ファイルを追加してページを作成しているなら入っているプラグインだと思います。 これらのプラグインが入っていることで、 tableOfContents という node が追加されます。 （これ以降の記事では、gatsby-transformer-remark ではなく gatsby-plugin-mdx を使っていることを想定して説明します。gatsby-transformer-remark…

当ブログのコードブロックで実装している機能、そのコードを紹介します！ 機能紹介 シンタックスハイライト .mdx ファイルにこんな感じに書くと、 こうやって表示されます！ タイトル こんな感じに title を指定すると、 こうやって表示されます！ コードのコピー 右上のコピーアイコンをクリックしてみてください！ 行のハイライト こんな感じに line を指定すると、 こうやって表示されます！ ワードのハイライト コードブロック内のワードにカーソルを合わせてみてください！ JSX のデモ表示 こんな感じに demo を指定すると、 こうやって表示されます！ JSX のライブエディター こんな感じに言語が jsx のときに live を指定すると、 こうやって表示されます！ また、 live に加えて isManual を指定すると、 コード 上で紹介したコードブロックのコードです！ ご参考に！！

今回、Gatsby のテーマを使ってブログを作ってみようと思います。 最後まで読めば、自分のブログを得ることができ、拡張していく理解も得られていると思います！！ おそらく30分~1時間後ぐらいには以下のようなサイトを手に入れていると思います💪 👍 Demo 👍 ソースコード(GitHub) テーマを探す テーマを探すには、以下のサイトがおすすめです！ 今回は、 gatsby-theme-novela という テーマ を使ってみようと思います。 First Step こちらでも書いたように、Gatsby の テーマはプラグインの一種 です。 既にある Gatsby サイトにテーマを導入することも可能ですが、 今回は 1 から Gatsby サイトを作っていきましょう。 gatsby-theme-novela…

Gatsby サイトにテーマを使って機能を追加することはよくあります。 ただテーマはスターターとは違い、実装のコードはアプリ内にはなく npm でインストールします。 それではどのようにカスタマイズするのでしょうか？ テーマをカスタマイズする最も簡単な方法は、 テーマが提供しているオプションを指定することです。 たとえば gatsby-theme-blog というテーマでは、以下のようなオプションを指定できます。 Key Default value Description basePath / ブログ記事のルート URL を指定できる contentPath content/posts ブログ記事ファイルを置くパスを指定 assetPath content/assets アセットファイルを置くパスを指定 mdxOtherwiseConfigured false 既に gatsby-plugin-mdx がサイトで導入されていれば、 true を指定する disableThemeUiStyling false gatsby-plugin-theme-ui…

useStaticQuery は GraphQL クエリを受け取って、データを返す hook です。 StaticQuery と useStaticQuery の違い React Hooks の登場によって useStaticQuery が実装されるまでは、 StaticQuery コンポーネントでレンダープロップスを使ってデータを取得することが出来ました。 StaticQuery を使う場合と、 useStaticQuery を使う場合の違いを見てみましょう。 useStaticQuery とは？ StaticQuery 、あるいはそれを hook で扱える useStaticQuery は、 あらゆるコンポーネントで GraphQL クエリを介してデータを取得することができます。 それに対し、ページコンポーネントでしか使うことのできないpage query があります。 （ページコンポーネントは特定の URL に対応するコンポーネントです） ページコンポーネントでのみ使えるqueryとは？ 例えばページコンポーネントで以下のように、 graphql…

記事内に同じブログ内の記事へのリンクを貼ることがあって、リッチに表示できたらなぁと思ったのでやってみた。 使い方 マークダウンファイル（ .mdx ）内に以下のように書きます！ コンポーネント失敗例 コンポーネントのソースコードは以下の通りです。 と言いたいところなんですが、、 GraphQLのクエリ部分でエラーが出てしまいます。 String interpolation is not allowed in graphql tag 文字列の埋め込みはできない。 useStaticQuery は文字通り静的なクエリで動的には生成出来ないようです。 コンポーネント成功例 気を取り直して別の方法で！💪 コンポーネントのソースコードは以下の通りです。 内容は以下の流れです。 useStaticQuery で全MDXを取得 全MDXの中から、指定するMDX1つを探す 見つからなければ何も表示しない 見つかれば表示 です。 それではコードと共に詳しく見ていきましょう。 useStaticQueryで全MDXを取得 useStaticQuery はGraphQL…

概要 Gatsby テーマは プラグイン の一種です。 プラグインとは違って自身で gatsby-config.js ファイルをもっており、複数のパッケージをインストールして管理できる Gatsby サイトになります。 この点は<と同じようですが、テーマはプラグインの一種です。 スターター と同じようですが、テーマはプラグインの一種です。 複数のテーマを同時に利用することができますし、テーマの更新や変更の影響を受けることができます。 テーマとスターターの違い テーマを理解するために、どんなときにテーマを作成するのか考えます。 Gatsby サイトを構築する際、様々な設定をする必要があります。 たとえばどこにデータを置くのか？ どのようにアクセスするのか？ どのように表示するのか？ などなど。 それらをテーマとしてパッケージ化することで、第三者や自分自身が再利用することができます。 似たものに スターター があります。 スターターは Gatsby サイトを素早く作成する方法の 1 つで、あらかじめ特定の目的のために設定された Gatsby…

概要 スターターは既に設定された機能をもつ Gatsby サイトのことです。 それを「雛形」としてダウンロードし、そこからカスタマイズして自分のサイトを作っていくことができます。 プラグインやテーマと違い元のスターターとの依存関係はないので、スターターが更新されても自分のサイトに影響はありません。 スターターでサイト構築を始めてみる もちろん手動で GitHub のレポジトリから clone し、 npm install で依存関係をインストールすることもできます。 gatsby-cli を使うことでより簡単に始められます。 gatsby new コマンドで、対象のレポジトリからstarterをcloneし、依存関係をインストールし、gitの履歴を消去した状態で始められます。 たとえば、 gatsby-starter-blog というスターターを blog という名前でつくる場合以下のコマンドを実行します。 この gatsby-starter-blog というスターターは、ブログの基本設定やRSS、GoogleAnalytics、コードのシンタックスハイライト、サイトのmeta…

プラグインとは？ Gatsbyプラグインは、Gatsby APIを実装してGatsbyサイトに追加機能を追加するNode.jsパッケージです。 例えば、以下のようなものがあります。 build 時に GraphQL に外部データを追加したり ヘッドレス CMS から追加 Shopify からショップデータを追加 Tweet を検索し追加 build 時に GraphQL に静的ファイルを追加したり 取得したデータのフォーマットを JSON オブジェクトに変換したり Markdown YAML PDF サードパーティーのサービスをサイトに追加したり Google Analytic Web Font Loader プラグインはスターターとは異なり、Gatsby…

MDX の紹介と、当ブログで使っているコンポーネントを紹介していきます 💪 MDX について 基本的に当ブログの記事は Markdown 形式で書いているのですが、拡張子は .md ではなく .mdx です。 Markdown の中に JSX を書くことが出来る。コンポーネントをインポートして使うことが出来る、MDX というものを使っています！ MDX のちからをお見せしましょう 外部リンク 実はもうこの記事でひとつ使っています！ リンクをコンポーネントにして使っています！ 実際の記述はこちら。 このように、Markdown 形式で書いている途中に Link コンポーネントを使うだけです。 実際の Link コンポーネントはこちら。 color はデフォでオレンジ( #F6AD55 )となり、 アイコンがついて別タブで開くようになってます。 Callout お次は直前に使ったこちら！ Notion の Callout…