- JAMSTACK Meetup #1 with microCMSに参加してきました。
| タイトル | 発表者 |
|---|---|
| Janstack × microCMS実装編 | 柴田さん(microCMS) |
| Nuxt.js + microCMS + Netlifyでコーポレートサイトをリニューアルした話 | カンボさん(Re:Build) |
| WordPress（Shifter）をHeadlessCMSにした自社サイトをGridsomeとNetlifyで作ってる話 | 阿部さん(necco) |
| Jamstack で開発してすると、今までのつらみ😇がなくなって、ちょっとコストも下がる話 | shota_coffeeさん |
| GitHub Actionsで始めるお手軽Jamstack | 西畑一馬さん(トューアール) |
Janstack × microCMS実装編
- 柴田さん(microCMS)
Jamstackとは
Jamstackのいいところ
microCMSとは
- 日本製HeadlessCMS
- 技術構成
- AWS Amplify
- サーバーレス
- React
microCMSのいいところ
- 開発者と非開発者が使うけど双方に使いやすく
- GUIでAPIを作成
- 項目を選択して入力フォームを作る
- 入力して投稿した内容をAPIで取得できる
- 権限管理もできる(有料プラン)
- APIの構成(記事の入力フォーム)の作成までできる権限
- 記事の投稿だけできる権限
- 記事の下書きのみできる権限
- 画像の加工もURLで対応できる
- サイズとか
Jamstackの実装(Nuxt)
- 主な静的サイトジェネレーター
| Rest API | GraphQL | |
|---|---|---|
| React系 | Next.js | Gatsby |
| Vue系 | Nuxt | Gridsome |
- 動的なコンテンツ
- ビルド時にAPI叩いてURLを生成
- ブログ記事一覧をとってきて、みたいな感じ
まとめ
- Jamstackは速くてセキュアで安い
- microCMSすごい
- 実装はちょっとむずい(SPA詳しければできちゃう)
Nuxt.js + microCMS + Netlifyでコーポレートサイトをリニューアルした話
- カンボさん(Re:Build)
JAMstackの実装
- コーポレートサイトをJAMstack化
- レスポンス速度が向上
- Nuxt + Netlify + microCMS
- NuxtをNetlifyにデプロイ
- ビルド時にmicroCMSを叩いてデータを取得
- GitLabのmasterにプッシュされたら自動でビルドデプロイ
- microCMS
WordPress（Shifter）をHeadlessCMSにした自社サイトをGridsomeとNetlifyで作ってる話
- 阿部さん(necco)
Jamstackのいいところ
- コンテンツとフロントエンドの開発を分離できる
- 非エンジニアがどんどんコンテンツを更新できる
構成例
- Shifter
- Gridsome
- Vueベース
- GraphQL
- Netlify
- ホスティング
- Gridsomeをビルド
Jamstack で開発してすると、今までのつらみ😇がなくなって、ちょっとコストも下がる話
- shota_coffeeさん
CMS導入事例
- JS
- Nuxt
- Next
- API
- microCMS
- markdown
- hosting
- Netlify
- Firebase
- 変更可能性のあるものは全てAPIにする
- 編集者はコンテンツを気軽に変更できる
- 開発者は何も待たずにサクサク開発できる
- コミュニケーションコストが大幅に下がった
GitHub Actionsで始めるお手軽Jamstack
- 西畑一馬さん(トューアール)
