Edited at

Gatsby.jsで静的なWebサイトをサクッと作る(インストールからHTML編集篇)

週末でGatsby.jsを触ってみたので、その共有です。

いろいろできるGatsby.jsですが、公式のHello WorldをベースにCSS(SCSS)メタ情報の設定くらいまでを、何度かに分けて解説します。最終的には、静的なWebサイトをNetlifyあたりにデプロイするまで書こうと思っております。

今回は、インストールからローカルサーバの立ち上げ、HTMLの編集くらいまでいきます。


Gatsby.jsとは?

Gatsby.jsはReact.jsベースの静的サイトジェネレーターです。GraphQL、PWA等のモダンな技術に対応しています。


Gatsby.jsのインストール

まずは、CLIをnpmでインストールしましょう。

$ npm install --global gatsby-cli

(Node.jsのインストールがまだの方は、こちらからインストールするか、nodenv等を使ってください)

完了したら、無事にインストールされているかどうか、以下のコマンドでバージョンを確認してみましょう。

$ gatsby --version

バージョンの数字が表示されれば、成功です。


開発環境の設定

シンプルな構成のgatsby-starter-hello-worldを使い、開発環境を構築しましょう。

まずは、適当な場所にディレクトリを作成し、gatsby new {プロジェクト名} {Githubのパス}gatsby-starter-hello-worldをダウンロードします。

$ mkdir gatsby-demo

$ cd gatsby-demo
$ gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

すると、こんな感じのファイルが生成されていると思います。

.

└── hello-world
├── .gitignore
├── LICENSE
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── src
│   └── pages
│   └── index.js
├── static
│   └── favicon.ico
└── yarn.lock

これで準備完了です。


ローカルサーバーを起動させ、HTMLを編集する

ターミナルで $ npm run develop を実行するとローカルサーバーが立ちあがります。たぶん、http://localhost:8000なので、こちらをブラウザで見てみましょう。ブラウザ上にHello world!が表示されていると思います。

では、HTMLを変更してみましょう。

src/pages/index.jsファイルを開きます。


index.js

import React from "react"

export default () => <div>Hello world!</div>


export default () =>の後ろが<div>Hello world!</div>になっていますね。こちらにHTMLを書いていきます。ためしに、テキストを変更してみてください。リロードしなくてもテキストが変更されると思います。便利ですね。

ただ、このままですとHTMLが書きづらいので、少し変更しましょう。


index.js

import React from "react"

export default () => (
<div>Hello world!</div>
)


()を使うことにより、よりHTMLらしく書くことができます。

注意点として、()のなかに要素はひとつしか書けません。兄弟要素を書くとエラーになります。


index.js

import React from "react"

// これはエラー
export default () => (
<div>Hello</div>
<div>world!</div>
)



index.js

import React from "react"

// これならOK
export default () => (
<div>
<p>Hello</p>
<p>world!</p>
</div>
)


今回はここまで!


19/2/3: CSS・SCSS篇を公開しました!