GatsbyでHello, worldからサイトを作ってみる

2019.5.18 12:00

概要

Gatsbyは、ホームページ・ビルダーやDreamweaverと同じく、ユーザが作成したコンテンツを組み合わせパブリッシュを行うことで、最終的にHTMLやJS、CSSのWebサイト用データを出力する、静的サイトジェネレータというソフトウェアである。出来上がったファイルはFTPサイトなりGithub Pagesなりにアップロードすれば、HTTPサーバの仕組みだけでWebページが公開できるため運用がカンタンである。

1-1

Gatsbyはサイトづくりに便利な仕組みが最初から揃っており手間が少ない反面、ちょっと凝ったことをやろうとすると何がどうなっているのか分かりづらく、途端に難しく感じてしまう面もあると感じた。

そこで、あえてイチから始めてみたところ、Gatsbyがどんな感じでサイトを生成しているのかを少し理解できたので、ポートフォリオサイトを作るケースを題材にして、サイト制作に取り組んでみたいと思う。

前提

下記のツールがインストールされている前提で進める。

  • Node.js
  • yarn
  • Gatsby CLI (yarnからインストール可能)

また、GatsbyはUIライブラリにReact.jsを使用しているが、React.jsやJSXの説明を始めるとGatsbyの話からは逸れてしまうため、今回は省くことにした。

準備

まずはGatsby CLIでプロジェクトを作成する。

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

作成が終わったら、なにはともあれ、devモードで起動してみる。

$ cd portfolio
$ yarn start

webブラウザで http://localhost:8000/ にアクセスするとHello world!と表示される。

2ページ目を作る

次に、別のページを作ってHello world!からリンクしてみる。

src/pagesの中にhogehoge.jsを作成して、下記の内容を記載する。

import React from "react"

export default () => <div>HogeHoge</div>

ブラウザから http://localhost:8000/hogehoge にアクセスするとHogeHogeと表示される。

Note

src/pagesの中に<filename>.jsというファイルを作成すると、自動的に/<filename>のページが作成される。

また、src/page/index.jsを下記の通り修正する。

  import React from "react"
+ import {Link} from "@reach/router"
  
- export default () => <div>Hello world!</div>
+ export default () => (
+   <div>
+     <h2>Hello world!</h2>
+     <Link to="/hogehoge">Go to hogehoge</Link>
+   </div>
+ )

ブラウザから http://localhost:8000/ にアクセスするとHogeHogeへのリンクが表示される。

Note

<Link>タグでページ遷移ができる。

Next

次回はレイアウトの作成を行っていく。とくにページの実装をシンプルに保つ方法を紹介する。

gatsby