kobaru

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

#Vue

2018/12/13

Table of Contents

JAMStack
静的サイトジェネレーター
まとめ

JAMStack

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

Fusic Tech Blog

Fusicエンジニアによる技術ブログ

tech.fusic.co.jp

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

静的サイトジェネレーターは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記事としてページネーションさせるようにしています。 authorや tags はデフォルトの返り値ではないですが、著者とタグを記事につけるので返り値として設定しています。ちなみにここの値は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をデータソースにしてのブログ作成ができるようになりました。