こんなにカンタン!

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分で作れます。
 

https://blog.photosynthesic.jp/

弊ブログ

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

https://gridsometest02.netlify.com/

弊ブログのコピーサイト

ココがカンタンGridsome: 03

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

5分間デプロイ。

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

ココがカンタンGridsome

※個人の感想です。

WordCamp Tokyo 2019

11/1 - 2@新宿

 

 

Join US!

Made with Slides.com