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サイトを作る


    View full-size slide

  2. 株式会社TAM フロントエンドエンジニア

    菅家 大地 / Daichi Kanke
    元デザイナーのフロントエンドエンジニア

    福島→宮城→東京→宮城

    PWA Night / 仙台フロントエンドUG /v-sendai

    Vue.js / Nuxt.js / PWA / Monaca 

    daichi.kanke
    @kan_dai

    View full-size slide

  3. JAMstack?


    View full-size slide

  4. Jamstackは特定のテクノロジーに関するものではありません。これは、パフォー
    マンス、セキュリティ、スケーリングのコストを削減し、開発者のエクスペリエンス
    を向上させるWebサイトとアプリを構築する新しい方法です。

    事前にレンダリングされたサイトは、JavaScriptと、APIを介して利用可能なブラウ
    ザおよびサービスの拡張機能により拡張できます。

    https://jamstack.org/
    JavaScript
    APIs
    Markup

    View full-size slide

  5. https://employment.en-japan.com/engineerhub/entry/2019/12/10/103000

    View full-size slide

  6. https://employment.en-japan.com/engineerhub/entry/2019/10/24/103000
    宣伝:僕の記事もあります

    View full-size slide

  7. JAMstackが

    話題なのでなんか作りたい


    View full-size slide

  8. Portfolioサイトを作成中…
    仕組みの部分だけはできたので、今日はそこの部
    分をメインで紹介できればと思います

    View full-size slide

  9. 開発
    コンテンツ入力
    push
    ビルドを実行して、
    静的ファイルのみ配信
    記事更新などを
    トリガーにビルド実行
    構成

    View full-size slide

  10. ● React製の静的サイトジェネレータのGatsbyを参考に作られた
    Vue.jsの静的サイトジェネレータ
    ● GraphQLでのデータ取得
    ● WordPressやContentfulのプラグインをインストールするだけで、
    簡単にデータ取得ができるようになる
    ● 2020/1/21時点では v0.7.12のベータ版
    ● https://gridsome.org/

    View full-size slide

  11. /src/pages/index.vue

    View full-size slide

  12. ● 今話題のHeadless CMSの一つ。従来のCMSのようにテンプレートを表示す
    る部分を持たず、APIだけ提供することに特化している
    ● マークダウンファイルなどからのページ作成もできるが、興味あったので
    Headless CMS使いたかった
    ● 日本製のmicroCMSを使おうと思っていたが、Gridsomeのプラグインがある
    contentfulにした(自分で設定を書けば microCMSのデータも取得できるようです )
    ● 無料の範囲あり
    ● https://www.contentful.com/

    View full-size slide

  13. gridsome.config.js
    環境変数が使えるのでリポジトリに
    TOKENなどをアップしなくて良い

    View full-size slide

  14. $page.hoge で取得した要素に
    アクセスできる
    /src/pages/index.vue

    View full-size slide

  15. gridsome.config.js
    詳細ページなどを作る場合は
    テンプレートを指定する

    View full-size slide

  16. /src/templates/WorksDetail.vue

    View full-size slide

  17. ● 静的コンテンツのホスティングサービス
    ● GitHub / GitLab / Bitbucket のリポジトリと連携して、pushやmergeなどが
    あったらNetlifyCIがビルドやデプロイをしてくれる。とにかく簡単
    ● WebHookを使ったcontentfulとの連携も簡単
    ● 無料プランあり
    ● https://www.netlify.com/

    View full-size slide

  18. 環境変数の設定
    ビルドコマンドや出
    力先の設定

    View full-size slide

  19. NetlifyとContentfulの連携
    Netlify
    contentful

    View full-size slide

  20. 時間があればデモ


    View full-size slide

  21. https://github.com/KanDai/portfolio

    View full-size slide

  22. おまけ (Vueの静的サイトジェネレータ個人的所感)
    ● Nuxt.js → SPAなどのWebアプリ。SSR必要な時。
    ● Gridsome → 静的サイトやブログ
    ● VuePress → ドキュメント系?

    View full-size slide

  23. まとめ
    ● Headless CMSやJAMstack流行りそう
    ● GridsomeやHeadless CMSを使って
    簡単にJAMstackなサイトを作れる
    ● Vue.jsが使える場面が増えている
    (Vue.jsに限らないモダンなフロントエンド技術や開発手法)

    View full-size slide


  24. ご静聴ありがとうございました


    View full-size slide