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

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

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

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

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

    私は、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

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

    というわけで、まずは 単一の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をつかってブログ作成している人は少なさそうなので、検索で引っかかったブログを集めてみた。