あのぞんブログ

GatsbyJS

GatsbyJS のコードブロックに言語バッジをつける方法

この記事では GatsbyJS のコードブロックに言語バッジをつける方法について紹介します。 前提として を使っています。 やり方を考えてるとき www.gatsbyjs.org/docs のコードブロックにも言語表示があったのと、このサイト自体も GatsbyJS…

【PLOP CLI】新しいファイルをテンプレートから生成するCLI

この記事では PLOP について紹介します。 GatsbyJS で書いている当ブログの記事作成を例に話します。 Consistency Made Simple : PLOP 手順 1. インストール npm で global…

GatsbyJS を Typescript に移行した際の Type 付け

GatsbyJS で書いているこのブログを Typescript 移行しました。 主に以下の記事を参考に移行しました。なので今回は Type づけに焦点を当てて書きます。 Gatsby.js を完全 TypeScript 化する - Qiita GraphQL Data…

GatsbyJSでコードブロックを作成する

この記事では GatsbyJS で作っているブログのコードブロックをカスタマイズします。 現状 Plain Text なので Syntax Hilight と style 調整をします。 手順 1. prismjs のプラグインを追加 gatsby-remark-prismjs…

GatsbyJSで記事のURLをカスタマイズする

この記事では GatsbyJS で作るブログの slug(URL のパス部分) のカスタマイズ方法を紹介します。 gatsby-source-filesystem を使用している前提で説明します(gatsby-starter-blog に入っています)。 手順. /gatsby…

はやくもブログを Hexo から Gatsby に切り替えた

移行した理由 React 使えそうなので Gatsby に移行しました。 Before After さっぱりしてしまいましたがカスタマイズ前なので OK。 いじっていきたい部分 Gatsby は GraphQL…

© 2020 あのぞんびより All Rights Reserved