2回めのStripeさんオフィス。
やはり可愛格好良くて痺れました。
こんにちは、みみです。
4/3 (水) 開催 Shiftup! JP_Getshifter Vol3！はじめてのスタティックサイトジェネレーター｜EventRegist（イベントレジスト） にて、ここ半年ぐらいストーキングしている gridsome についてお話してきました。
https://slides.com/mimitips/aboutgridsome#/
前日に書いた、もっそい内容の薄いスライドで申し訳ないのですが、めちゃくちゃ使いやすい子っていうのはなんとなく分かっていただけるのではないかと。
そんなことよりShifterの進化がヤバい
まあそんな、私の拙い発表なんで置いといてですね。前回からたった2ヶ月なのにShifterの進化がエグい感じなのですよ。
ShifterでWebhookによる外部デプロイが可能になりました！ | デジタルキューブ
という記事がイベント直前に公開されていまして、凄いなーと思っていて。イベントでよくよく内容を拝聴していたんですが、あれ、これ行けるんじゃない？
ShifterにWordPressのお守りを任せておいて、gridsomeでオレ好みに高速変身させたのを打ち返してNetlifyにどーん、とかできそうじゃない？
という妄想が、@lulzneko さんらとのお話の中で出てきて盛り上がったのでした。そんなザックリ言われても全然分からんがな、と思われた方は、安心してください、ゆくゆくlulzneko 先生がキッチリ解説してくださるはず（丸投げ）。
そう、先生って付けたくなる程の名解説ぶりだったlulzneko先生のスライドはこちらから。
私的にも、もわもわっとした理解だったものをサクッとピシッと整理してくださって、爽快感がパないです。JAMStack気になってる勢は勉強会に先生をお呼びすると話が早いと思います。
…トコロでgridsomeの話は？
シュフとニジノハハの合間に（いや、趣味の合間に家事かも）コソコソ仕事している身分なので、まだ実務投入するような案件はなくて趣味でイジっているだけですが、4月現在バージョンは0.5ながら、多分もう全然イケちゃう仕上がりになっております。
そんなわけで、試してみようかな、という方に贈る、
gridsome事始め
「gridsome、去年10月にちらっと試した時は確か日本語URLでうまくいかなかったけれども、ロゴもサイトデザインもぐっと良くなって、色々とアップデートされていたので、放置しっぱなしの趣味ブログをテコ入れするのに使ってみました」…っていう記事を書きかけたままになってたやつを掘り返して、先の弊スライドに書いた5ステップ部分をもうちょっと説明しておきます。
前提として、NpmかYarnが要ります（私はnpm派）。あ、gitも。
1. まずはインストール
Getting started – Gridsome （この記事の存在意義が無くなるほどの分かりやすい公式ドキュメント）の通りにコマンドを入れたらインストールが始まります。
npm install --global @gridsome/cli2. WordPressのスターターキットを使う
好きなディレクトリに移動して
gridsome create my-website wordpressmy-websiteの部分がプロジェクトのディレクトリ名となり、my-website以下にファイルが生成されます。
3. WordPressのURLを指定する
gridsome.config.jsを開いてbaseUrl:に使いたいWordPressのURLを指定します。
で、ひとまず初期設定完了。
gridsome developすればローカルサーバーと、GraphQLのURLが自動生成されるのが超便利。WP REST API をいい感じに読み替えてくれるのでクエリが書きやすくていいですね。
4. Git & Netlify でデプロイ
Git-based deploying が一番オススメらしいので、やってみましょう。
git commit して、GitHub（GitLabでも）にアップし、Netlifyの設定をしてぽちっとデプロイすると、
https://gridsometest02.netlify.com/
という感じでコピーサイトが出来ます。これはこのブログのコピーサイトです。デプロイしない限りアップデートしないからこの記事はまだ反映されていない。スターターのソースを全くいじってない状態で、静的だし凄いシンプルだから当然だけど鬼速です。
画像ファイルの置き換えとか、固定ページまではデフォルトで入っていないんですが、GraphQLとVueがあるので其の辺りのカスタムもサクサク。
Netlifyの頑張り次第だけど、バニラを試すだけなら、ほんとに5分ぐらいで終わるのでちょっとお試しあれ。
Gutenberg（新エディター）用のスタイル、phpのプレビュー版スタイル、そしてVueで書いたスタイルの統合が出来るようにしたら、かなり美味しい子に仕上がる気がします。もちろん、WordPress以外の使い途もありますし。
勉強会後のビールは美味い。
そんなわけで、またもや美味しいビールが、いっそ美味しく感じる楽しい勉強会でありました。5月は連休なのでお休みですが、次回は6月を予定しているとのことです！
ここのとこ、珈琲じゃなくてビールばっかり呑んでる人になってる…。ロースターdeコワーキングとかもやりたい（迷惑）。
もうアップされてた、lulzneko先生の参加レポートはこちら！
レポートもキッチリされてる！
3部作だそうです。たのしみっ。
