ウェブサイトを Gatsby V3 と Material UI V5にアップグレード
Gatsby と Material UI のメジャーバージョンがいつの間にか上がっていたので、本サイト Genki Tech に適用しました。個人的に勉強できたことなどをまとめただけの、ほぼ自己満足の記事です。 本サイトは Gatsby と言う React 製のいわゆる JAM…
Gatsbyで超絶スムーズに動く目次のコンポーネント実装する
こんな感じで、目次をクリックすると、超絶スムーズに目的地に到達する機能を実装します。 やりたかったこと 好きな場所に配置できる目次コンポーネントの作成 URLにpage#id のように#を追加せず、今のURLのままジャンプ（選択可） スムーズなスクロールUI 作り方 基本的な…
Gatsby + prism.js で「言語名（language）」を右上に表示する
右上のこういうのを表示する方法です。タイトルと別で埋め込む方法が日本語で見つからなかったので貼っておきます。 markdown はこんな感じ やり方 左上のタイトル部分は、プラグイン「gatsby-remark-prismjs-title」で入れられるみたいですが、言語名を別…
Gatsby + Typoraでmdファイル保存時にエラー落ちするのを防ぐ
現象 gatsby develop でホットリロード動作中に、Typora で Markdown ファイルを編集して保存すると、以下の様なエラーが出て落ちる場合がありました。 原因と解決 ぱっと見原因は Typora が「.~」を頭に付けた変なファイルを生成している事のようなの…
Gatsby のURLに含まれる スラッシュ/ や index を消したい
Gatsbyのプロジェクトによっては、記事をディレクトリに分割してindex.mdを作成していると、URLが以下のようになる事があります。 http://localhost:8000/blog-title/ http://localhost:8000/blog-title/in…
【エンジニア向け】Gatsby + GitHub + Netlifyで無料で爆速なブログ作成
ローカルアプリ(Typora等)でMarkdownファイルを手軽に編集してGitHubにpushしたら記事が追加される、爆速なブログサイトが無料で作れたのでご紹介します。 WordPress+GCPでブログサイトを立ち上げ1週間も立っていませんが、サイト表示が重たく感じ、GCP…