gatsby-plugin-manifest に icons を追加して、iPhone の「ホーム画面に追加」に対応します。 単に iPhone の「ホーム画面に追加」するだけなら gatsby-plugin-manifest に設定する方法 react-helmet でに設定…

Gatsby.js は、自動ビルドしてくれるホスティングサービスの Netlify を使うと、 Git に push したタイミングでサイト公開までしてくれます。 今回は、ムームードメインで取得済みの独自ドメインを Netlify に設定します。 運用前の注意点としては、ムーム…

Dark Mode を入れたときに、Lint にいろいろ怒られたのでメモします。 Warning なのでしばらくほっといたんだけど、いい加減うざくなった・・・。 怒られた箇所 ナビゲーションバーの右端に Dark Mode のトグルを置いたので、ファイルはその場所です。 War…

一番お手軽だと思われる、gatsby-plugin-dark-mode を使います。 ちなみに現在のモードは localStrage に保存されます。 プラグインインストール ##　コンポーネント作成 スイッチするためのコンポーネントを作ります。 toggleTheme()でス…

タグにアイコンつけたり、なんか可愛くしたいので Font Awesome を入れることにしました。 (2020/10/10 現在、初回表示が重すぎたので外しています) インストール インストールするのは以下の 3 つ。 @fortawesome/fontawesome-svg-…

https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog/ こちらをスターターとして使いましたが、タグの機能がありません。 記事にタグをつけて、タグリストのページを作ります。 （この記事は公式の日本語訳です） …

※予定投稿ではありません 初期段階だと下書きができないので、md ファイルはあるけど公開しないための下書き機能を追加します。プラグインは使いません。 作業手順のたびに、ローカルを再起動してください。 post に draft を追加する まずは draft を追加します。boo…

あとあとスタイルはラクしたいので、scss を使えるようにします。 プラグインインストール gatsby-config.js に追記 これで scss が書けるようになります。 scss を適用 私は色設定が散るのが嫌いなので、こんな感じにまとめています。 import して使…

Google Fonts(Noto Sans JP)をインストールします。 gatsby-starter-blog を導入していると、フォントの情報はにすでに存在します。 初期状態はこんな感じ。 最終的にこれを編集して Google Fonts を使えるようにしていきます。 テ…

WordPress があまりにも重い、壮大過ぎるしプラグインをハンドリングできないし、ぱぱっとデザインが変えづらくて、軽いと言われる Gatsby に乗り換えることにしました。 以下、このサイトを初期構築したときの状況。 ベース https://www.gatsbyjs.com…