コンテンツにスキップするには Enter キーを押してください

JAMStackでブログ開発 静的サイトジェネレーター編

本記事はFusic Advent Calendar 2018の10日目の記事です。

どうもこんにちは。小原です。
この前福岡でフロントエンドカンファレンスがあったりしてフロントエンドが盛り上がってきてますね。それにあやかって、弊社のブログもフロントエンドの技術も使ってかっこよくしたいと思っています。
ブログを開発する中でいろいろと技術選定をしていったのでその中で触っているものについて書いていきたいと思います。

JAMStack

JAMStackについては弊社の浦田が書いた記事があるので参考にどうぞ。

Netlify CMS + Gatsbyを使ったJAMstackなブログを考えてみる | Fusic Tech Blog

静的サイトジェネレーター

静的サイトジェネレーターはgridsomeを使っています。
gridsomeを選んだのは何個かありますが、大きく二つの理由があります。

  • Vueで作られてる
  • データとのやり取りがGraphQLになっている

Vueは社内でも使ってる人も多く、案件に導入もされているのもあり、Vue製ので選びました。
データのやり取り部分がGraphQLになっているのも選んだ要因の一つでGraphQLをよく触っているのとそのままのインターフェイスでデータとのやり取りができるのでわかりやすい部分もあったので選びました。
ただ、選んでからわかったことなのですが、データを取ってくるGraphQLのスキーマですが自分でカスタマイズしようとするとドキュメントもそんなに充実してないのもあり、記事のタグや著者での検索をするのに苦労しています。
なのでpluginなどのソースコードを読んで参考にしつつ、実装していかないと行けないので結構辛いです。

初期構築

ではまずは初期構築から。コマンドラインがあるのでインストール自体はnpmでサクッとインストールしていまします。

npm install --global @gridsome/cli

これで、gridsomeのコマンドラインが使えるようになります。では早速プロジェクトを作って見ましょう。

gridsome create blog

新しいプロジェクトができましたんで、動作確認ということで軽く動かして見ましょう。

cd blog
gridsome develop

Markdownを使う

次にデータソースをmarkdownファイルに置き換えるようにしましょう。
以下の二つのプラグインを利用します。

yarn add @gridsome/source-filesystem
yarn add @gridsome/transformer-remark

source-filesystemはスタティックファイルの読み込みを行います。そのスタティックファイルでmarkdownを扱えるようにするのがtransformer-remarkのプラグインとなります。
このインストールしたプラグインをgridsomeで使えるようgridsome.config.jsファイルを書き直しておきましょう。

module.exports = {
  transformers: {
    remark: {}
  },
  plugins: [
    {
      use: "@gridsome/source-filesystem",
      options: {
        path: "blog/**/*.md",
        typeName: "Post"
      }
    }
  ]
}

これで、/blog/ 配下にあるmdファイルはブログのデータソースとして扱えるようになりました。

では早速記事の一覧を表示させて見ましょう。

gridsomeでGraphQLを扱うには <page-query> タグ内に記載していきます。

<page-query>
query posts($page: Int) {
  allPost(perPage: 10, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
        path
        content
        date
        author {
          name
        }
        tags
      }
    }
  }
}
</page-query>

ページネーションも扱うので1ページ10記事としてページネーションさせるようにしています。
authortags はデフォルトの返り値ではないですが、著者とタグを記事につけるので返り値として設定しています。
ちなみにここの値はmdファイルに記載することで取れるようになります。

---
title: "ブログのタイトル"
author: {name: "kobaru"}
tags: ['Golang', 'API']
---

author をJSON形式で書いてると階層的に取れるみたいです。
tags は配列となっているので配列でデータを取得します。

次にページネーションで表示した項目から記事に飛んでみます。
そのためにはtemplatesフォルダ内に記事となるテンプレートを利用します。

src/
  |- templates/
           |- Post.vue

このPost.vueファイルに記事の取得用のGraphQLと記事を記載していきます。

<page-query>
query MarkdownPost($path: String!) {
  post (path: $path) {
    title
    path
    content
    date
    author {
      name
    }
    tags
  }
}
</page-query>

pathはgridsome.config.jsファイル内でsource-filesystemプラグインでパスを指定してたと思うんですが、
そのパスが入ります。URLのリンクもこのパスに従って決まってきます。
これで、一通りgridsomeでmarkdownをデータソースにしてのブログ作成ができるようになりました。

まとめ

  • gridsomeでGraphQLを使う場合のドキュメントが全然ないので拡張が難しい部分があります。
  • markdownの情報としてpathを指定とかしたけど、フォルダのパスで指定しないとうまく記事のページに行くことができませんでした。

まだドキュメントも少なく開発中っというのもあり、「あ、これやってくれないんだ」っとか「これどうするんだろう」っていうのが
結構ありました。今の段階で行くとReactを使えるならGatsbyの方がいい気もします。

インフラメインでやってるつもりです。特にネットワークとかとか。Erlang、Elixir、Golang書いてます。

チーム Atlasに所属

コメントする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です