mottox2 blog

GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げ

bloggatsby

本ブログでも使用されているReactによる静的サイトジェネレーターのGatsbyJSの入門記事です。

開発環境を整える

GatsbyJSは静的サイトを生成するためにNode.jsを使用します。
また、プロジェクトの作成にはgatsby-cliというCLIツールを使うのでインストールしておきましょう。

TODO

  • Node.jsをインストールする
    • v6以上が最低要件ですが、v8以降であると書きやすいと思います。
  • Gatsby CLIをインストール
    • npm install -g gatsby-cliを実行

Gatsbyのプロジェクトを作成

先程インストールしたgatsby-cliを使ってプロジェクトを作成します。gatsby-cliでは引数にGitHubのURLを渡すことで利用するテンプレートを変更することが出来ます。
GitHubのURLを渡さなかった場合、gatsby-starter-defaultという公式のテンプレートが使用されます。
ただし、2018/08/17現在ではGatsbyJS v1のデフォルトテンプレートが使用されてしまうため、明示的にv2の指定を加える必要があります。

sh
$ gatsby new [project名] [GitHubのURL(optional)]

今回はproject名をhello-gatsbyとし、GitHubのURLとしてはgatsby-starter-defaultのv2を指定します。すると以下のようなコマンドを実行しましょう。
実行するとhello-gatsbyディレクトリが生成され、npm installを実行してくれます。
cdでディレクトリ移動し、開発環境を立ち上げるコマンドを実行しましょう。gatsby-cliが提供するgatsby develop`というコマンドで開発環境が立ち上がります。

sh
$ gatsby new hello-gatsby https://github.com/gatsbyjs/gatsby-starter-default#v2
$ cd hello-gatsby
$ gatsby develop

実行するとしばらく待ったのちに以下のような文字が出力されます。同じような出力が出れば成功したと考えてください。

Screen Shot 2018-08-17 at 1.35.31.png (69.4 kB)

出力された指示通りに http://localhost:8000 を開きましょう。以下のようなページが立ち上がっているはずです。

Screen Shot 2018-08-17 at 1.36.31.png (177.6 kB)

これでプロジェクトの作成から、開発環境の立ち上げまでが成功しました。
次章では、開発環境でCSSやページの追加を行っていきます。

TODO

  • gatsby new hello-gatsby https://github.com/gatsbyjs/gatsby-starter-default#v2
  • cd hello-gatsby
  • gatsby develop
  • http://localhost:8000 を開きましょう

技術書展でGatsbyJS本を書く予定で、本記事は下書き的な扱いになります。頒布するものはブログ記事をまとめ、より体系的な構成にするつもりです。

B!
event

技術書典6にサークル参加したけど反省点が多すぎた

前回に引き続き、技術書典6にサークル主として参加させていただきました。 技術同人誌界隈はかつてない盛り上がりを見せており、今回のサークル当落発表の際は地獄のようなタイムラインになっていました。そうい

技術書典
summary

最近見つけた気になる作図系Webサービス3選

今年に入って見つけた作図、画像生成系のサービスをまとめてみました。 > BlobmakerBlobmaker 最近見かけることが多くなった、丸みのある形状をランダムで生成する画像メーカー。

dev

技術書典6でNetlifyとGatsby本を頒布します

技術書典6「か67」でNetlifyとGatsbyの本を頒布します。 Netlifyは92ページ、Gatsbyは100ページ超(執筆中)でどちらとも¥1,000で頒布を予定しています。 興味のあ

gatsbynetlify技術書典