本文書では、GatsbyJSを利用してスクラッチからブログサイトの構築方法を確認していきます。

Gatsbyとは

GatsbyはStatic Site Generator(静的サイトジェネレーター)で、Reactを元に作成されており、外部からデータを取得する際にはGraphQLを利用します。GraphQLを使ってMarkdownファイル、データベース、CSVファイルやContantfulやWordPressなどさまざまなリソースからデータを取得することができます。またWordPressのテーマに対応するStarter(スターター)やPlugin(プラグイン)もあるため効率的にサイト構築を行うことができます。

Gatsbyを利用する理由には以下のようなものが挙げられています。

  • Speed, Perfomance(スピード, パフォーマンス)
  • Security(セキュリティ)
  • Technology(テクノロジー)

GatsbyJSのインストール

Mac OSを利用して動作確認を行います。Gatsbyをインストールするためには事前にnode.jsをインストールしておく必要があります。

GatsbyJSでのサイト構築は以下の3つのステップを実行することで簡単に開始することができます。

  1. npmコマンドでグローバルにgatsby-cliのインストール
  2. gatsbyコマンドを利用して新しいサイトを作成(gatsby new gatsby-site)
  3. 開発サーバの起動(gatsby develop)

gatsby cliのインストール

npmコマンドを使ってGatsbyJSのCLI(コマンドラインインターフェイス)のインストールを行います。GatsbyJSのCLIをインストールするとgatsbyコマンドを利用することができます。


 $ npm install -g gatsby-cli

インストール終了後、gatsby –helpを実行してメッセージが表示されたらインストールは正常に完了しています。

サイトの作成

サイトの作成はインストールを行なったgatsbyコマンドで行います。gatsbyコマンドの書式は下記の通りです。


gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]

SITE_DIRECTORY_NAMEには任意の名前のディレクトリ名をつけます。任意の名前のディレクトリ下にGatsbyに関連するファイルがインストールされます。

Gatsbyには作成したいサイトの目的に応じたテンプレートがいくつもアップされており、starter(スターター)を利用すると短時間で目的のサイトを作成することができます。starterを指定したい場合は、URL_OF_STARTER_GITHUB_REPOにgithubのURLを指定します。指定しない場合はdefault starter(デフォルトスターター)を元にサイトが作成せれます。

starterはhttps://www.gatsbyjs.org/starters/?v=2から見つけることができます。

default starterの中身はhttps://github.com/gatsbyjs/gatsby-starter-defaultで確認することができます。

ここではHello-worldのスターターを利用するのでURL_OF_STARTER_GITHUB_REPOにhttps://github.com/gatsbyjs/gatsby-starter-hello-world


 $ gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world
gatsby cliをインストールしていない場合でもgatsbyコマンドの前にnpxをつけて実行するとサイトの作成を行うことができます。

開発サーバの起動

サイトの作成が完了したらインストールディレクトリに移動して、下記のコマンドを実行します。起動後のメッセージhttp://localhost:8000/とあるようにブラウザでhttp://localhost:8000/にアクセスします。


 $ cd gatsby-site/
 $ gatsby develop
 ・
You can now view gatsby-starter-hello-world in the browser.
⠀
  http://localhost:8000/
 ・

画面にHello World!が表示されることを確認してください。Hello World!が表示されたらここまでの設定は問題なく行われています。

Hello World!の表示
Hello World!の表示

Hello World!が記述されているファイルははsrc/pagesの下のindex.jsファイルです。このファイルを更新するとトップページの内容を書き換えることができます。

Gatsbyのディレクトリ構成
Gatsbyのディレクトリ構成

【参考】Blog Starterでサイト作成

もしブログ用のstarterを利用したい場合はどのように行うのか確認しておきます。gatsby newコマンドのGithubのURLには https://github.com/gatsbyjs/gatsby-starter-blog を指定します。


 $ gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog

インストール後gatsby-blogディレクトリに移動してdevelopコマンドを実行します。


 $ cd gatsby-blog/
 $ gatsby develop
マシンのスペックによるgatsby developに時間がかかる場合があります。

ブラウザで確認するとブログ用のスターターなのでブログのトップページと3つの記事へのリンクが表示されています。

blog starterの初期画面
blog starterの初期画面

記事を変更したい場合には、インストールディレクトリのcontent¥blogの下のタイトル名のディレクトリの下にMarkdown(マークダウン)で記述されたindex.mdファイルが入っているでそのファイルを更新すると即座に変更が反映されます。

実際にhello-worldディレクトリのindex.mdのtitleをHello WorldからHello Gatsbyに変更すると下記のように反映されます。


---
title: Hello Gatsby
date: "2015-05-01T22:12:03.284Z"
description: "Hello World"
---

This is my first post on my new fake blog! How exciting!
記事の更新
記事の更新
新しい記事を作成したい場合はcontent¥blogの下にタイトル名のフォルダを作成し、index.mdファイルに記事の内容を記述すると記事を追加することが可能です。

このようにstarterを利用するとReactやGraphQLの知識がなかったとしても記事の更新や追加を行うことができます。

ブログサイトの構築

hello-worldのstarterで作成したサイトを更新しながらブログサイトを構築していきます。ファイルの更新を行う場合は必ず下記のコマンドを実行しておきます。


 $ gatsby develop

トップページの変更

src¥pagesディレクトリにあるindex.jsファイルを下記のように更新します。


import React from "react"

const BlogPage = () => {
    return (
        <div>
            <h1>Gatsby Blog Site</h1>
        </div>
    )
}

export default BlogPage

ブラウザで確認するとGatsby Blog Siteが表示されます。

トップページの変更
トップページの変更

aboutページの追加

index.jsファイルを元にabout.jsファイルをsrc¥pagesディレクトリの下に作成します。


import React from "react"

const AboutPage = () => {
    return (
        <div>
            <h1>About Page</h1>
        </div>
    )
}

export default AboutPage

ブラウザで/aboutページにアクセスするとAboutページが表示されます。

aboutページを追加したように他にも追加したいページがある場合は同様の方法で行うことができます。

ページ間にリンクを貼る

トップページとaboutページを作成しましたが、現時点ではaboutページにアクセスするためにブラウザのURLに/aboutを入力する必要があります。通常のHTMLのようにaタグをつけてリンクを貼ることができますが、Gatsbyではこの方法は行いません。

Gatsbyでリンクを貼るためにはLinkコンポーネントを利用します。Linkコンポーネントをgatsbyからimportします。


import { Link } from "gatsby"

aboutページへのリンクを貼るためにLinkタグを下記のように記述します。toにAboutページのurlを指定します。


import React from "react"
import { Link } from "gatsby"

const BlogPage = () => {
    return (
        <div>
            <ul>
                <Link to="/about">About</Link>
            </ul>
            <h1>Gatsby Blog Site</h1>
        </div>
    )
}

export default BlogPage

ブラウザで確認するとAboutページへのリンクが貼られます。クリックするとAboutページ全体の読み込みが行われずスムーズにAbout Pageが表示されることが確認できます。

aboutページへのリンク
aboutページへのリンク
外部のページにリンクを貼りたい場合はaタグを利用してリンクを貼ってください。

ヘッダーとフッターコンポーネントの作成

index.jsとabout.jsページの2つかありませんが、2つのページのリンクを表示するためにHeaderコンポーネントを追加します。srcディレクトリの下にcomponentsディレクトリを作成します。

componentsディレクトリ作成後その下にheader.jsファイルを作成します。

header.jsファイルには各ページへのリンクを追加します。


import React from 'react'
import { Link } from 'gatsby'

const Header = () => {
    return (
        <header>
            <nav>
                <ul>
                    <li><Link to="/">top</Link></li>
                    <li><Link to="/">about</Link></li>
                </ul>
            </nav>
        </header>
    )
}

export default Header

index.jsでは作成したHeaderコンポーネントをimportします。index.jsでは直接Linkコンポーネントを利用しないのでLinkのimportを削除します。


import React from "react"
import Header from "../components/header.js"

const BlogPage = () => {
    return (
        <div>
            <Header/>
            <h1>Gatsby Blog Site</h1>
        </div>
    )
}

export default BlogPage

Aboutページもindex.jsと同様にHeaderコンポーネントをimportして利用します。


import React from "react"
import Header from "../components/header.js"

const AboutPage = () => {
    return (
        <div>
            <Header/>
            <h1>About Page</h1>
        </div>
    )
}

export default AboutPage

Aboutページの上部にリンクが表示され、リンクをクリックするとページが更新されます。トップページも同様に表示されます。

上部にリンクが表示
上部にリンクが表示

Footerコンポーネントの作成も行います。header.jsと同様にcomonentsディレクトリの下にfooter.jsファイルを作成します。


import React from 'react'

const Footer = () => {
    return (
        <footer>
            <div>© Gatsby Blog Site { (new Date()).getFullYear() }</div>
        </footer>
    )
}

export default Footer

Headerコンポーネントと同様にFooterコンポーネントもimportします。


import React from "react"
import Header from "../components/header.js"
import Footer from "../components/footer.js"

const BlogPage = () => {
    return (
        <div>
            <Header/>
            <h1>Gatsby Blog Site</h1>
            <Footer/>
        </div>
    )
}

export default BlogPage

ブラウザで確認すると上部にHeaderコンポーネントと要素、下部にFooterコンポーネントの要素が表示されることが確認できます。

HeaderとFooterが表示
HeaderとFooterが表示

Layoutコンポーネントの作成

HeaderとFooterコンポーネントを作成しましたが、これらのコンポーネントを含むLayoutコンポーネントを作成します。各ページはLayoutコンポーネントを使って各ページのコンテンツ以外を共通化します。

まだLayoutコンポーネントの作成は完了してませんが、index.jsファイルにLayoutコンポーネントをimportし下記のようにLayoutタグで囲みます。


import React from "react"
import Layout from "../components/layout.js"

const BlogPage = () => {
    return (
        <div>
            <Layout>
            <h1>Gatsby Blog Site</h1>
            </Layout>
        </div>
    )
}

export default BlogPage

次にlayout.jsファイルに以下を記述します。これまではHeader、Footerコンポーネントは各ファイルからimportしていましたが、Layoutコンポーネントの中でimportします。index.jsファイルでLayoutタグの間にコンテンツを入れていましたが、コンテンツはpropsを使って受け取ることができます。


import React from 'react'
import Header from './header'
import Footer from './footer'

const Layout = ( props ) => {
    return (
        <div>
            <Header/>
                { props.children }
            <Footer/>
        </div>
    )
}

export default Layout

Layoutコンポーネントを追加しましたが、ブラウザからは先程までと同じ内容が表示されます。

続く