環境構築

インストール

まずはnpmでインストールをおこないます。

npm install --global @gridsome/cli

プロジェクトを作成する

次にgridsome createコマンドでプロジェクトを作成します。そして、delelopコマンドを実行し開発用サーバを立ち上げます。

gridsome create gridsome-demo
cd gridsome-demo
gridsome develop

開発環境を立ち上げて確認

http://localhost:8080をブラウザで開くと、下の画面が表示されます。

f:id:yoshitaku_jp:20190303231612p:plain

ブログを書く準備

インストール

ファイルサービスを利用するために npm install --save @gridsome/source-filesystem を実行します。

Markdownで記述するために npm install --save @gridsome/transformer-remark を実行します。

設定ファイルを変更

gridsome.config.js で、先程インストールしたモジュールを有効にするため設定を変更します。

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

  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'goal/*.md',
        typeName: 'GoalPost',
        route: '/goal/:year/:month/:day',
        remark: {
          plugins: [
          ]
        }
      }
    }
  ]
}

投稿内容を表示する

内容を用意する

gridsome.config.js のPathに書いたようにファイルを作成します。今回はgoal/post1.mdとし、中身を記述します。

---
title: はじめての内容だよ
date: 2019-03-03 01:00:00
description: "はじめての内容"
tags: "contents"
---

はじめての内容が入るよ

一覧を表示する

src/pages/index.vueを作成します。

<template>
  <Layout>
      <h1>Contents</h1>
      <div v-for="item in $page.allGoalPost.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>
        <div class="content" v-html="item.node.content" />
      </div>
  </Layout>
</template>

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

<script>
  export default {}
</script>

これでURLhttp://localhost:8080/にアクセスすると下の画像が表示されます。

f:id:yoshitaku_jp:20190303231738p:plain