炎上速(blazing-fast) 静的サイトジェネレーター GatsbyJs を試してみる

はじめに: Gatsby 導入する理由

このブログは、Hugoで運営している。(https://futurismo.biz/2018/04/wordpress-2-hugo/)

React 製のサイトジェネレーターである、 Gatsby へ移行しようと決意した。

https://www.gatsbyjs.org/

その理由は、モダンなフロントエンド技術を使っているので。

私は、React エンジニアを目指すことに決めた。Gatsbyは Reactでかかれている。そこで、ブログ製作をつうじで Reactに慣れ親しみ、改造できればいいなと思った。

Gatsbyについて

Gatsbyは、React で書かれた静的サイトジェネレーター。

Getting Started

gatsbyを npmでインストールする。

今後のメンテナンスを考え、インストールは v1ではなくv2とする

$ npm install --global gatsby-cli@2.0.0-beta.3


$ gatsby -v
2.0.0-beta.3

続いて、サイト生成。

# テンプレートからサイト作成
$ gatsby new futurismo3 https://github.com/gatsbyjs/gatsby-starter-default#v2
$ cd futurismo3

# 開発用サーバ起動
$ gatsby develop

まずは、デフォルトのページが生成された。これに改造を加えていく。下記リンクによると、いろいろと手順があるようだ。

Creating a Blog with Gatsby | GatsbyJS

というわけで、まずは単一のMarkdownを表示するところからはじめます。

Markdownの記事を表示

ファイルシステムからデータを読み込む gatsyby-source-filesystem plugin, Markdown形式を HTMLに変換する gatsby-tarnsformer-remark pluginをいれる。

$ yarn add gatsby-source-filesystem
$ yarn add gatsby-transformer-remark

それから、ブログ内の別ページにリロードなしで遷移する gatsby-plugin-catch-links, head で囲まれた部分を制御するための、gatsby-plugin-react-helmetを入れる。

$ yarn add gatsby-plugin-catch-links gatsby-plugin-react-helmet

gatsby-config.jsに以下を書く。

plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/src/pages`,
      name: "markdown-pages",
    },
  },
  `gatsby-plugin-catch-links`,
  `gatsby-plugin-react-helmet`,
  `gatsby-transformer-remark`,
];

ではでは、はじめの記事を投稿します。src/pages/06-09-2017-getting-started/index.md に以下の内容を書き込み。

---
path: "/hello-world"
date: ""2017-07-12T17:12:33.962Z""
title: "My First Gatsby Post"
---

Oooooh-weeee, my first blog post!

続いて、記事のテンプレートを src/templates/blog-post.jsに作成。

import React from "react";
import Helmet from "react-helmet";

// import '../css/blog-post.css'; // make it pretty!

export default function Template({
  data, // this prop will be injected by the GraphQL query we'll write in a bit
}) {
  const { markdownRemark: post } = data; // data.markdownRemark holds our post data
  return (
    <div className="blog-post-container">
      <Helmet title={`Your Blog Name - ${post.frontmatter.title}`} />
      <div className="blog-post">
        <h1>{post.frontmatter.title}</h1>
        <div
          className="blog-post-content"
          dangerouslySetInnerHTML={{ __html: post.html }}
        />
      </div>
    </div>
  );
}

そして最後、動的ページ生成を可能にする NodeAPI を作成。(gatsby-node.js)

const path = require("path");

exports.createPages = ({ boundActionCreators, graphql }) => {
  const { createPage } = boundActionCreators;

  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);
};

これでできるかな？？？できた！

次回は、Hello World テンプレートを試します。

References

日本の Gatsbyユーザの方

まだそんなに GatsbyJsをつかってブログ作成している人は少なさそうなので、検索で引っかかったブログを集めてみた。

はじめに: Gatsby 導入する理由#

Gatsbyについて#

Getting Started#

Markdownの記事を表示#

References#

日本の Gatsbyユーザの方#