Mac

M1 Mac(Apple Silicon)にGatsbyでBlogを作る 1

M1 Mac (Apple Silicon)にGatsbyでBlogを作る 1

 前々回の記事で静的出力ができるGatsbyJSというフレームワークを利用してこのブログを作ることにしました。とは言ったものの、本当に久しくフロント開発はしていません。私の知識は白亜紀の化石にも近い状態です。
 私が苦労したのは、主に環境構築のところでした。その辺りを少し備忘録がわりに残しておきます。環境さえ構築できれば、日本語への変更やcssをいじるなどは直感で頑張って行けそうな気がします。


この記事のゴール

  • 大枠のインストール手順を把握すること!
  • 少しGatsby関連の知識を得ること!

関連記事


情報収集

 まずは、本家サイトを読み情報を収集します。初めて扱うフレイムワークですのでとりあえず本家サイトでGET STARTEDをを眺めてみます。
 するとGatsby Startersなるものがあったので、使い勝手が良さそうなものをチョイスし使うことにしました。
 今回の利用条件は下記の通りです。

  • Gatsby 3 以上
  • カテゴリはBlog
  • Google Analyticsが簡単に設定できると嬉しい
  • Themaがそれなりに気に入ること
  • シンプルであること

 今回チョイスしたのは、Mr.Scott Cooperが作成されたgatsby-casperを使うことにしました。
 こちらのStaterは、Ghostのテーマを丸々利用して、シンプルな機能でシンプルなBlog機能を実現している模様です。インストール手順の確認と実現されている機能の把握のために、GitHubを読まさせてもらいました。
 その過程で判明した必要フレームワークや不足プラグインを洗い出してみました。

  • Node.js
    Node.jsのバージョン管理に、anyenv + nodenvを採用。
    versionはGitHubを参考にVrsion 15.10.0に決定。
  • GatsbyJS
    Versionは3.5.0に決定。
  • gatsby-capser (gatsby starter)
  • 追加モジュール
    • gatsby-remark-prismjs-title
      コードブロックにタイトルが記入するためのgatsbyプラグイン。
      デモサイトにタイトル記載例がなかった。「gatsby markdown code block」で検索したところ、このプラグインが必要であることがわかったので入れておく。
    • gatsby-remark-external-links
      外部リンクを別タブで表示するためのgatsbyプラグイン。
      デモサイトで外部リンクの記載例がなかった。「gatsby 外部リンク」で検索したところ、このプラグインが必要であることがわかったので、入れておく。

大枠のインストール手順 まとめ

  1. brewのインストール
  2. anyenv/nodenvのインストール
  3. Node.jsのインストール
  4. GatsbyJSのインストール
  5. gatsby-capserスタータのインストール
  6. 手動で日本語化
  7. 各種プラグインの追加

最後に

 ざっくりですが、インストール手順をまとめてみました。実際はまとめながらM1 Mac(Apple Silicon)でどこまで動くのかを確認しており、想定以上に時間がかかってしまいました。今まで扱っていないフレームワークを利用するのは趣味であろうとも事前準備に時間がかかるものですね。
 次回の記事では、実際にM1 Mac(Apple Silicon)に環境を構築していきます。