当サイトは、アフィリエイト広告を利用しています
Gatsby製ブログに全文検索機能としてAlgoliaを導入したので、その導入手順と実装手順を残しておく。
ReactのGatsby製ブログをnetlifyにデプロイした時にnodeのversion違いによるエラーが発生したのでversion指定してnetlifyにあげる方法をまとめる
ReactとGatsbyでデバイスがダークモードかどうかをjavascriptのメディアクエリを使って判定する方法をメモ。
Adsenseで広告をつけているのだが、よく広告が未取得( data-ad-status="unfilled" )で空白ができてしまうので、未取得時は非表示にするよう対応した
GatsbyにおけるGraphQLの役割や使い方(pageQueryとstaticQuery)を実装サンプルを作成してまとめておく。
gatsby-remark-images-contentfulを使ってGatsbyで 表示させている画像が中央になってしまうので左寄せにする方法をまとめる。
Gatsbyのv4のFileSystemRouteAPIを導入したことでブログの一部のページが開けなくなった件について、原因と対策を忘備録として残す
Gatsbyとcontentful製のブログで記事ページのURLが変わった場合、googleの評価を引き継がせる対応方法についてまとめてみた。
Gatsby製ブログでmdx形式で書いた記事のコードブロックの指定行をハイライトさせる方法を実装してみる
当ブログはReactのフレームワークのGatsbyで作成しているのだが、ページのよっては初期ロード時間が長かったりするのでcodeSplitngを使って対応することにした。
ブログで使っているReactのフレームワークのGatsbyのversionを4系から5系にアップデートしたので、その方法を忘備録として残す
Gatsby製のホームページに導入したAlgoliaにタグ絞り込み機能をつけてみたのでその過程をメモ。
Gatsbyのv4から使えるようになった遅延静的生成 (DSG) を Gatsby製の当ブログで導入したので、その実装方法をGatsbyの ページ生成パターン別にまとめる。
ReactのGatsbyのv4系から使えるようになったFileSystem Route APIを導入したので、その効果と使い方をまとめる
Gatsby製ブログでcontentfulで管理している記事をMDX形式で扱う方法と実装方法を解説する。
Gatsbyでコードブロックハイライトを「prism-react-renderer」を利用して いる場合にデフォルトで対応されていない言語を追加する方法をまとめる。
GatsbyをデバッグするためにVScodeから起動した際にnvmでnodeのversionが変更できなくなり、少しはまってしまったので 対応方法をメモしておく。
vmを入れたらVScodeからGatsbyのデバッグ(build時)ができなくなったので 対応方法をまとめておく。 暫定的な対応のため、解決方法が見つかったまた記事にしたい。
Gatsby開発時のdebugをVSCodeやChromeDevToolsで行う方法をまとめる。gatsby-node.jsはノード用ChromeDevToolsでもデバッグできる
ReactのGatsby製のブログでパッケージとプラグインを使って目次をクリックすると対象の見出しの位置までスムーズにscrollさせる方法についてまとめる。
contentfulにmdx形式で記事を格納しているReactのGatsby製のブログで記事から目次生成して表示する方法をまめる。
Gatsbyでpageコンポーネント間でwrapRootElementまたはwrapPageElementを使ってstateを共有する方法をまとめておく。
ReactのGatsbyでボタンやリンクはIconを使う方法としてfortawesomeを使う方法がある。実装サンプルを作って使い方をまとめておく。
reactのgatsby v4にCSS in JSライブラリのemotion11を導入し、cssprops方式で利用する方法をサンプル実装してまとめる。
Gatsby製のブログでscrollbarのスタイルをcssのwebkitを使って変更できたので、その実装方法をメモしておく。
Gatsby製ブログにdarkmodeを導入した際、Emotionを使ったのでその時の実装方法と手順を忘備録として残す。
Gatsbyで使用するGraphQLで複数クエリを同時に実行したい時はエイリアス(別名)をつけて実行するだけで実現できる。
Gatsby製の当ブログはもしもアフィリエイトの「かんたんリンク」 で広告を貼ったら表示できなかったのでEmotionを使ってアフィリエイト商品紹介コンポーネントを自作してみた。
もしもアフィリエイトの広告とどこでもリンクはサイトで自動生成したhtmlをそのままではGatsby製のブログには貼れないのでEmotionで編集して貼れるようにする方法をまとめる
ReactのGatsbyで作ったブログにgoogleのAdSense広告を付けてみたので その実装手順をメモとして残しておく。
Algoliaの全文検索機能をGatsby製ブログに導入した際、検索コンポーネント(instantsearch)をカスタマイズしたのでその実装手順を解説する。