こんなにカンタン!

Gridsome

2019.04.03

About

mimi(yumi)

シュフ・ニジノハハ

HTML, Sass, npm-scripts, PHP,
Vue.js etc.

名前:

生業:

好きな技術:

 

気になる技術:

 

WordPress歴:

WordPressの好きなところ:

10年余

オープンソース、REST API

@miminari

Nuxt.js, Python, gridsome!

Vueなサイトジェネレーター。

GatsbyのVue版。

 

Vue.jsと同様、

取っつきやすくて、

カンタンかもと思わせる

敷居の低さが素敵です。

 

どこがカンタンなのか?其の一

Getting started が1ページだけ。

だから

コマンドが
すぐ分かる

1ページにまとまっているので、インストールはコレ、取り敢えず作ってみるのはコレ、というふうにコマンドがすぐ分かる構成。

 

npm install --global @gridsome/cli
gridsome create my-gridsome-site wordpress
module.exports = {
  plugins: [
    {
      use: '@gridsome/source-wordpress',
      options: {
        baseUrl: 'http://local.wordpress/', // required
        typeName: 'WordPress', // GraphQL schema name (Optional)
        perPage: 100, // How many posts to load from server per request (Optional)
        concurrent: 10, // How many requests to run simultaneously (Optional)
        routes: {
          post: '/:year/:month/:day/:slug', //adds route for "post" post type (Optional)
          post_tag: '/tag/:slug' // adds route for "post_tag" post type (Optional)
        }
      }
    }
  ]
}

Install

Create

Config

Build

gridsome build

ココがカンタンGridsome: 01

ドキュメントの構成からして

初学者への優しさに溢れている。

どこがカンタンなのか?其ノ弐

2ステップで
勝手に
GraphQL入門

gridsome develop

すればGraphQLが勝手に生成されます。

ココがカンタンGridsome: 02

GraphQLの入門にぴったり。

どこがカンタンなのか?其ノ参

デプロイまでが

あっという間。

既存のWordPressの
サイトURLさえあれば、

Netlifyにコピーサイトが5分で作れます。
 

弊ブログ

  1. gridsome create
  2. WordPressのURLをgridsome.config.jsに書く。
  3. gridsome build
  4. GitHubにpush
  5. Netlifyで公開。

弊ブログのコピーサイト

ココがカンタンGridsome: 03

5分間インストールならぬ

5分間デプロイ。

1. ドキュメントの構成
2. GraphQLの入門に最適
3. 5分間デプロイ

ココがカンタンGridsome

※個人の感想です。

WordCamp Tokyo 2019

11/1 - 2@新宿

 

 

Join US!

こんなにかんたん!gridsome

By mimitips

こんなにかんたん!gridsome

  • 623
Loading comments...

More from mimitips