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!
dev

ブログのReactを16.8にあげてReact Hooksで書き換えてみた

2019/02/06にReact16.8がリリースされ、16.7のalphaから入っていたReact Hooksが安定版にやってきました。 そこで今回このブログで使われているReactを16.8に上

javascriptreact
blog

Netlifyのデプロイ通知をDiscordで受け取る方法

Netlifyでサイトをホスティングしていると、デプロイ開始から完了までのタイムラグがあることでデプロイの完了を把握するにはWeb UIを確認する必要があります。 しかし、デプロイごとにWeb UI

discordnetlify
dev

netlify-cliを使ってCLIでデプロイを行う

Netlifyには優れたUIを持つWeb画面が用意されていますが、CLI(コマンドラインインターフェース)も用意されており、CLIのみでのデプロイも可能になっています。 通常の開発ではWeb UIで

netlify