いまさらかもしれないがGatsbyJSを使ってみる(1)

ウェブの海

Reactの知識がほぼない状態での挑戦。

GatsbyJSとは

WordPressのような動的にファイルを生成するのではなく、静的なファイルを生成してくれるシステムです。
動的ファイルはURLがリクエストされてからいちいちファイルを生成するので、雑な言い方になりますが読み込みが遅くなります。
静的ファイル(1番わかりやすいのが直打ちした.htmlとか)はファイルを生成する手間が省けるので(ほんとに雑な説明だ)、読み込みは速いです。

最終的にGatsbyJSとnetlifyを使ってブログっぽいサイトをたてることを目標とします。
(今回の記事ではそこまでたどりついてません)

さっそく試してみる

GatsbyJSをインストール。
コマンドプロンプトまたはターミナルからおこないます。
ちなみにNode.jsGitをインストールしてあることが前提です。

$ npm install -g gatsby-cli

ちょっと時間がかかります。インストールなので。

問題発生

GatsbyJSはインストールできたのですが、OSアップデートの影響で、gitが行方不明になっていることが判明(パスが通ってなかった、たぶん)。

High Sierraへアップデート後のgitエラー

上記を参考にまたインストール。
気を取り直して、チュートリアルのとおり、プロジェクトを作成します。

$ gatsby new gatsby-starter-lumen https://github.com/alxshelepenok/gatsby-starter-lumen

後ろのURLはスターターキットのURLです。
お好きなフォーマットを選んでくださいね。

第2引数はプロジェクト名(ディレクトリ名)になるので、お好きな名前を指定しましょう。
ちなみに、コピペで上のコマンドを打ち込んだ後、ディレクトリ名を変更したら、次におこなうローカル環境が立ち上がらなかったので、最初から好きな名前を指定しましょう。あとから変えちゃだめです。
おそらく、.jsonファイルとかも名前変更しなきゃいけなかったんだと思います。
(わたしは大人しくディレクトリごとゴミ箱に放り込んで、またプロジェクトを作成するコマンドを打ち直しました)

無事、8000番が表示される

さきほど作成したディレクトリに移動して(cdで移動しましょう)、次のコマンドを実行します。

$ gatsby develop

うまくいくと、http://localhost:8000/でスターターキットどおりのページがあらわれます。
ここまで3時間ほどかかりました。

タイトルとURLをコピーしました