Gridsomeのmarkdownブログお試し編

はじめに

React製GatsbyをインスパイアしたVue製のGridsomeが公開されたので、Markdownで書かれたかなり簡素なブログサイトを作ってみた手順です。
基本的な仕組みについては公式のドキュメントをさらさら流し読みしていただいたほうが良いかもしれません。

今回の完成品はこちらのGithubと同様となります。

Gridsome/GraphQL勉強中のため、変な使い方があるかもしれません。

プロジェクトの初期化

https://gridsome.org/docs https://gridsome.org/docs

cliをインストールします。

npm install --global @gridsome/cli

次に、テンプレートサイトを作成します。

gridsome create my-gridsome-site

必要なプラグインのインストール

https://gridsome.org/plugins/transformer-remark

Gridsomeには現状remarkでMarkdownを変換するプラグインがありますので、これをインストールします。
configの中でsource-filesystemを使っていたりするので、ドキュメントとは違いますが、source-filesystemもインストールします。

npm i @gridsome/source-filesystem @gridsome/transformer-remark

configの設定

https://gridsome.org/plugins/transformer-remark

こちらは公式の記述を gridsome.config.js にそのまま記述します。

module.exports = {
  transformers: {
    remark: {
      externalLinksTarget: '_blank',
      externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
      anchorClassName: 'icon icon-link',
      plugins: [
        // ...global plugins
      ]
    }
  },

  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        typeName: 'Post',
        remark: {
          plugins: [
            // ...local plugins
          ]
        }
      }
    }
  ]
}

サンプルMarkdownの作成

内容は何でも良いのですが、２・３個ブログ配下に blog/xxx.md というような形で作ります。
(上記の blog/**/*.md を変更した場合はその限りではありません。)

yaml形式のメタ記述が使えて、後で一覧に使いたいので title を設定しておいてください。

---
title: タイトル
---

contents here

Templateの作成

src/templates/Post.vue を作成し、中身を下記のようにします。

<template>
  <Layout>
    <div v-html="$page.post.content"/>
  </Layout>
</template>

<page-query>
query MarkdownPost ($path: String!) {
  post (path: $path) {
    content
  }
}
</page-query>

<script>
  export default {}
</script>

トップに一覧リンクを置いてみる

src/pages/Index.vue に下記の page-query を追加します。

<page-query>
query posts {
  allPost{
    edges {
      node {
        path
        title
      }
    }
  }
}
</page-query>

この page-query で取得したコンテンツはVueインスタンスから $page を経由して取得できます。
適当ですが、投稿一覧を表示してみます。

<div>
  <h2>Blog Posts</h2>
  <div v-for="item in $page.allPost.edges">
    <g-link :to="item.node.path">{{ item.node.title }}</g-link>
  </div>
</div>

おわりに

詳細まではまだ追えていないので、ある程度無責任な発言ではありますが、色々とNuxtより早く表示できる仕組みが多いように思います。
ただし、現状だとGatsbyではあるような sitemap.xml の出力等、基本的な部分がなかったり、pluginのAPIのドキュメントもなかったりするので、今選択するにはある程度開発もしていくという覚悟が必要そうです。

それも楽しそうだなというモチベーションと共にリニューアルをGridsomeで進めていってみようかなと思います。

それでは！

そして公開しようと思ったらblog-starterができてました！
https://github.com/gridsome/gridsome-starter-blog

Gridsomeのmarkdownブログ お試し編