Help us understand the problem. What is going on with this article?

Gridsomeでブログを作る

More than 1 year has passed since last update.

この記事のターゲット

  • Gridsomeって聞いたことある
  • ちょっと使ってみたいけど何作ろうか
  • とりあえずブログでも作って見るか

Gridsomeってなにさ

https://gridsome.org/

大枠的にはStatic Site Generator、つまるところ静的なwebページを吐き出すツール。
特徴はなんといってもVueでできていること。
実際に利用する際もコンポーネント指向で開発ができ、.vueファイルのように一つのファイルにHTML, CSS, JavaScriptを記述できる。
ReactでいうところのGatsbyにあたる(らしい。こっちも使ってみたい)。
rubyでいうところのjekyll。

ブログ作り開始

インストール

npmでinstall

npm install --global @gridsome/cli

プロジェクト作成

プロジェクトを作成して移動、用意されているコマンドを実行。

$gridsome create my-gridsome-site
$cd my-gridsome-site
$gridsome develop

開発用サーバーが立ち上がるのでlocalhostにアクセス

http://localhost:8080

無事に表示されれば成功!
表示されない場合は8080番ポートを他で占有してしまっていないか確認。

ブログの用意

Gridsomeでは様々なCMS(contentful, wordpress, filesystemなどなど)をデータソースとして指定することができる。
ただし、今回は簡単のために外部サービスは利用せずにfilesystemをデータソースとする。

npm install @gridsome/source-filesystem

また、ブログをMarkdownで記述するために以下のモジュールをinstallしておく。

npm install @gridsome/transformer-remark

2つのモジュールのinstallができたらこれらのモジュールを利用するための設定を自動で生成されているgridsome.config.jsに以下のように記述する。

// 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: 'BlogPost',
        route: '/blog/:year/:month/:day/:slug',
        remark: {
          plugins: [
            // ...local plugins
          ]
        }
      }
    }
  ]
}

サンプル記事を用意

一旦表示確認のためのダミー記事を2,3個ほど用意。
ファイルはgridsome.config.jsで指定した通り以下のルールにしたがって配置する。(blog/test/sample1.md など)

        path: 'blog/**/*.md',

中身はyaml形式の記述ができるので先ほどテンプレートでgraphqlのクエリに記載したパラメータを宣言しておく。
(BlogPost型がもともと持っている_idやpathなどはここで記述する必要はない)

sample1.md
---
title: タイトル
date: 2018-09-15 01:00:00+09:00
description: "hogehoge"
tags: "hoge"
---

contents

ブログのトップ画面を用意

src/pages/index.vueを編集。

index.vue
<template>
  <Layout>
      <h1>Blog Posts</h1>
      <div v-for="item in $page.allBlogPost.edges" :key="item.path" class="post">
        <h2>
          <g-link :to="item.node.path">{{ item.node.title }}</g-link>
        </h2>
        <dl>
          <dt>{{ item.node.date }}</dt><dd>{{ item.node.fields.tags}}</dd>
        </dl>
        <p>{{ item.node.fields.description }}</p>
        <g-link :to="item.node.path" class="continue-link">続きを読む ></g-link>
      </div>
  </Layout>
</template>

<page-query>
  query Home ($page: Int) {
    allBlogPost (page: $page) {
      edges {
        node {
          _id
          title
          date (format: "YYYY年MM月DD日 HH:mm:ss")
          fields {
            description
            tags
          }
          path
        }
      }
    }
  }
</page-query>

<script>
  export default {}
</script>

※graphqlについて
本筋ではないので簡単に流しますが、gridsomeではデータソースへのアクセスにgraphqlを採用しています。
今回では定義されているBlogPost型のデータを全て取得するのでallBlogPost、各BlogPostの取得したいパラメータがnode配下で指定されています。
これらのパラメータは先ほど用意したmdファイルにて設定してます。
(正直graphqlよくわかってないマン、変なこと書いてたら詳しい方教えてくださいorz)

ページのテンプレートを用意

src/templates/BlogPost.vueというファイルを作成。
これが各ブログ記事の中身が挿入されるテンプレートになる。

BlogPost.vue
<template>
  <Layout>
      <h1>{{ $page.blogPost.title }}</h1>
      <dl>
        <dt>{{ $page.blogPost.date }}</dt><dd></dd>
      </dl>
      <div class="content" v-html="$page.blogPost.content" />
  </Layout>
</template>

<page-query>
query MarkdownPost ($path: String!) {
  blogPost (path: $path) {
    title
    date (format: "YYYY年MM月DD日 HH:mm:ss")
    content
  }
}
</page-query>

<script>
  export default {}
</script>

リンクが正しく機能すれば成功!

まとめ

まだまだ新しい技術で公式サイトも情報が少なかったりして苦戦したので同じ道をたどる迷える子羊を救えたらと思います。
wordpressなどで管理するよりもページへのアクセスが静的ファイルなので圧倒的に早いはず。
netlifyなどへのデプロイも簡単なのでぜひお試しください。

ririli
Podcastやってます。 https://wakateossan.github.io/ 若手とおっさんの年齢差をコンセプトにテック系や健康、時事ネタなどを話しています。
https://www.ririli.net/
Colorkrew
東京・秋葉原にあるIT企業、株式会社Colorkrew。 ”世界のシゴトをたのしくするビジョナリーカンパニー”をビジョンに掲げています。 管理職0(ゼロ)、階層0(ナシ)、 チーム力∞(無限大)の組織運営、バリフラットモデルを策定・導入。OpenWork(旧Vorkers)が選ぶ自由主義で個性を活かす企業、性格のいい会社に上位ランクイン!
https://www.colorkrew.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away