Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Daichi
January 21, 2020

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

Daichi

January 21, 2020
Tweet

More Decks by Daichi

Other Decks in Programming

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/
  11. None
  12. /src/pages/index.vue

  13. • 今話題のHeadless CMSの一つ。従来のCMSのようにテンプレートを表示す る部分を持たず、APIだけ提供することに特化している • マークダウンファイルなどからのページ作成もできるが、興味あったので Headless CMS使いたかった • 日本製のmicroCMSを使おうと思っていたが、Gridsomeのプラグインがある

    contentfulにした(自分で設定を書けば microCMSのデータも取得できるようです ) • 無料の範囲あり • https://www.contentful.com/
  14. None
  15. None
  16. None
  17. gridsome.config.js 環境変数が使えるのでリポジトリに TOKENなどをアップしなくて良い

  18. None
  19. None
  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. 
 ご静聴ありがとうございました