Mac

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

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

 前回の記事で手順の確認と追加したいプラグインを洗い出しました。今回は実際に環境を構築していきます。


この記事のゴール

  • Blogが公開できること!

関連記事


環境構築

インストール手順 まとめ

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

brewのインストール

 すでにbrewがインストールされている方は、次のステップから初めてください。今回はXcodeすらインストールしていなかったので合わせてインストールしておきます。

  1. AppSotreからXcodeインストールします。
  2. Homebrewを使うために、Command line tools for Xcodeをインストールし、ライセンスにも同意しておきます。
ターミナル Arm
$ xcode-select --install
$ xcode-select -license
  1. Homebrewをインストールします。Homebrewの公式によると、/opt/homebrewインストールを推奨していますので、推奨通りにインストールしていきます。
ターミナル Arm
$ sudo mkdir /opt/homebrew
$ sudo chown -R $(whoami) /opt/homebrew
$ curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C /opt/homebrew
$ echo 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc
$ exec $SHELL -l

これで、brewのインストールは完了です。

anyenv/nodenvのインストール

 Node.jsの実行環境のバージョン管理として、今回は、anyenvを使います。今回は、anyenv,nodenvをインストールします。

  1. anyenvのインストール
ターミナル Arm
$ brew install anyenv
$ echo 'eval "$(anyenv init -)"' >> ~/.zshrc
$ exec $SHELL -l
$ anyenv install --init
$ mkdir -p $(anyenv root)/plugins
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
  1. nodenvのインストール
ターミナル Arm
$ anyenv install nodenv
$ exec $SHELL -l
$ nodenv -v
nodenv 1.4.0+3.631d0b6
#インストールできるリストを確認
$ nodenv install -l
0.1.14
0.1.15
0.1.16
0.1.17
0.1.18
...
#バージョンを指定してインストール
$ nodenv install 15.10.0
#バージョン指定(global) バージョン名が ~/.nodenv/version ファイルに書き込まれる。
$ nodenv global 15.10.0
#インストールされたバージョンの確認
$ anyenv versions
nodenv:
* 15.10.0 (set by /Users/XXXX/.anyenv/envs/nodenv/version)

GatsbyJSのインストール

  1. GatsbyJS 3.4.1のインストール

 ここからは、Armアーキテクチャで対応していないため、(2021/05/21 時点)x86_64アーキテクチャで進めます。以前の記事でRosetta用のターミナルを準備したためそちらを使います。

ターミナル x86_64
$ npm install --global gatsby-cli@3.4.1
$ exec $SHELL -l

gatsby-capserスタータのインストール

 こちらもターミナルは、x86_64のRosetta用を起動します。

  1. gatsby-capserスタータのインストールと実行
ターミナル x86_64
$ gatsby new YOUR_FOLDERNAME https://github.com/scttcper/gatsby-casper
$ cd YOUR_FOLDERNAME
$ gatsby develop
...
You can now view gatsby-casper in the browser.
⠀
http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build

$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
  1. ブラウザでhttp://localhost:8000/にアクセスし、starterと同じ画面が表示されているかを確認します。
  2. 静的HTMLの出力(ビルド)

 テストを兼ねて、ビルドをしてみましょう。ここもRosettaのターミナルで実行していください。

ターミナル x86_64 YOUR_FOLDERNAMEで実行
$ gatsby build
...
info There are no new or changed html files to build.
success onPostBuild - 0.013s
info Done building in 8.1582535 sec
#出力先(public)を確認
$ ls -lh
-rw-r--r--     1 XXXX  staff   1.0K  5 15 20:31 LICENSE
-rw-r--r--     1 XXXX  staff   2.4K  5 15 20:31 README.md
-rw-r--r--@    1 XXXX  staff   4.3K  5 19 21:47 gatsby-config.js
-rw-r--r--     1 XXXX  staff   5.4K  5 15 20:31 gatsby-node.js
drwxr-xr-x  1321 XXXX  staff    41K  5 18 22:23 node_modules
-rw-r--r--     1 XXXX  staff   1.7M  5 18 22:24 package-lock.json
-rw-r--r--     1 XXXX  staff   2.6K  5 18 22:24 package.json
drwxr-xr-x    62 XXXX  staff   1.9K  5 21 22:33 public
drwxr-xr-x    14 XXXX  staff   448B  5 16 17:57 src
-rw-r--r--     1 XXXX  staff   333B  5 15 20:31 tsconfig.json

 publicというフォルダに出力されています。このフォルダ配下をサーバなどにUploadしてください。

手動で日本語化

 日付の表示形式などが日本形式に変更します。VSCodeなどの検索機能を使い、地道に検索をして、修正していきます。

各種プラグインの追加

 必要になったら都度追加する予定ですが、Demoサイトを使ってみて、次の2つが欲しかったのでインストールしておきました。

  • コードブロックのタイトルを追加
  • 外部サイトへのリンクを別タブや別Windowsで表示
  1. gatsby-transformer-remarkをインストール
ターミナル x86_64 YOUR_FOLDERNAMEで実行
$ npm install -save gatsby-remark-prismjs-title
  1. viでgatsby-config.jsに追記
gatsby-config.js
module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
         `gatsby-remark-prismjs-title`,          `gatsby-remark-prismjs`,
  1. スタイルの追記
src/components/PostContent.tsx
.gatsby-code-title {
    background: #699;
    color: #eee;
    margin: 0px 0px -16px -13px;
    padding: 2px 12px;
    font-size: 0.7em;
    line-height: 1;
    font-weight: bold;
    display: table;
    border-radius: 9px 0px 9px 0;
    position: relative;
    z-index: 999;
}
  1. gatsby-remark-external-linksのインストール
ターミナル x86_64 YOUR_FOLDERNAMEで実行
$ npm install -save gatsby-remark-external-links
  1. viでgatsby-config.jsに追記
gatsby-config.js
module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
         `gatsby-remark-external-links`,          `gatsby-remark-prismjs-title`,
          `gatsby-remark-prismjs`,

以上で完了です。


最後に

 インストール手順を元に、インストールしました。特にM1固有の問題にハマることなく完了しました。ただ、事前に他のツールインストール時にM1固有の問題に対応して炒めにハマらなかったのかもしれません。もし、何か質問等があれば、Twitterまで連絡ください。