Gridsomeでサイト作りを始めた

Vue.js製の静的サイトジェネレーターを見つけました。Gridsomeです。 最近よく聞くReact.js製のGatsbyと似たような構成のようです。

今回はサイトを作ってから、Netlifyにpushするまでを実施してみたいと思います。

環境構築

インストール

まずは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

Netlifyにアップロードする

NetlifyとGitHubを連携する

非常に直感的にも連携作業はできますが、公式のドキュメントを見てGitHubと連携します。

https://www.netlify.com/docs/continuous-deployment/

Buildコマンドの設定

Netlifyで設定する際、途中でBuildコマンドを設定するタイミングがあります。 下記の値を設定しましょう。

  • Build Command
    • gridsome build
  • Publish directory
    • dist

https://gridsome.org/docs/deploy-to-netlify

Netlify上で見れるか確認する

サイトをデプロイしたらアクセスして確認しましょう。 無事に表示できていたら完了です。

下記は自分がデプロイしているサイトです。

https://challenge-every-month.netlify.com

まとめ

  • Vue.js製のGridsomeについて簡単に調べて作ってみた。
  • challenge-every-monthのサイト作り頑張る。
  • 2019/03/03でver0.5.4
    • まだまだ開発中!
    • いろいろ貢献できそう!

参考にしました

https://qiita.com/ririli/items/ebd57c3c993e0b8403bd