Gridsome × Headless CMSでJAMstackなWebサイトを作る

2020年1月21日に行われたv-sendai #5で使用したスライドです。

スライド内のリンク

JAMstack
https://jamstack.org/

エンジニアHubのJAMstackの記事
https://employment.en-japan.com/engineerhub/entry/2019/12/10/103000

エンジニアHubのPWAの記事
https://employment.en-japan.com/engineerhub/entry/2019/10/24/103000

Gridsome
https://gridsome.org/

contentful
https://www.contentful.com/

netlify
https://www.netlify.com/

ソースコード
https://github.com/KanDai/portfolio

Transcript

1. 2020.01.21 @ v-sendai #5
 株式会社TAM 菅家大地
 Gridsome × Headless CMSで
 JAMstackなWebサイトを作る

2. 株式会社TAM フロントエンドエンジニア
 菅家 大地 / Daichi Kanke 元デザイナーのフロントエンドエンジニア
 福島→宮城→東京→宮城
 PWA Night / 仙台フロントエンドUG /v-sendai
 Vue.js / Nuxt.js / PWA / Monaca 
 daichi.kanke @kan_dai
3. JAMstack?

4. Jamstackは特定のテクノロジーに関するものではありません。これは、パフォー マンス、セキュリティ、スケーリングのコストを削減し、開発者のエクスペリエンス を向上させるWebサイトとアプリを構築する新しい方法です。
 事前にレンダリングされたサイトは、JavaScriptと、APIを介して利用可能なブラウ ザおよびサービスの拡張機能により拡張できます。
 https://jamstack.org/ JavaScript APIs Markup
5. https://employment.en-japan.com/engineerhub/entry/2019/12/10/103000
6. https://employment.en-japan.com/engineerhub/entry/2019/10/24/103000 宣伝：僕の記事もあります
7. JAMstackが
 話題なのでなんか作りたい

8. Portfolioサイトを作成中… 仕組みの部分だけはできたので、今日はそこの部 分をメインで紹介できればと思います
9. 開発 コンテンツ入力 push ビルドを実行して、 静的ファイルのみ配信 記事更新などを トリガーにビルド実行 構成
10. • React製の静的サイトジェネレータのGatsbyを参考に作られた Vue.jsの静的サイトジェネレータ • GraphQLでのデータ取得 • WordPressやContentfulのプラグインをインストールするだけで、 簡単にデータ取得ができるようになる • 2020/1/21時点では v0.7.12のベータ版 • https://gridsome.org/
12. /src/pages/index.vue
13. • 今話題のHeadless CMSの一つ。従来のCMSのようにテンプレートを表示す る部分を持たず、APIだけ提供することに特化している • マークダウンファイルなどからのページ作成もできるが、興味あったので Headless CMS使いたかった • 日本製のmicroCMSを使おうと思っていたが、Gridsomeのプラグインがある contentfulにした(自分で設定を書けば microCMSのデータも取得できるようです ) • 無料の範囲あり • https://www.contentful.com/
17. gridsome.config.js 環境変数が使えるのでリポジトリに TOKENなどをアップしなくて良い
20. $page.hoge で取得した要素に アクセスできる /src/pages/index.vue
21. gridsome.config.js 詳細ページなどを作る場合は テンプレートを指定する
22. /src/templates/WorksDetail.vue
23. • 静的コンテンツのホスティングサービス • GitHub / GitLab / Bitbucket のリポジトリと連携して、pushやmergeなどが あったらNetlifyCIがビルドやデプロイをしてくれる。とにかく簡単 • WebHookを使ったcontentfulとの連携も簡単 • 無料プランあり • https://www.netlify.com/
24. 環境変数の設定 ビルドコマンドや出 力先の設定
25. NetlifyとContentfulの連携 Netlify contentful
26. 時間があればデモ

27. https://github.com/KanDai/portfolio
28. おまけ (Vueの静的サイトジェネレータ個人的所感) • Nuxt.js → SPAなどのWebアプリ。SSR必要な時。 • Gridsome → 静的サイトやブログ • VuePress → ドキュメント系？
29. まとめ • Headless CMSやJAMstack流行りそう • GridsomeやHeadless CMSを使って 簡単にJAMstackなサイトを作れる • Vue.jsが使える場面が増えている (Vue.jsに限らないモダンなフロントエンド技術や開発手法)
30. 
 ご静聴ありがとうございました