microCMS がとても気になっていたので、シンプルなブログを作ってみることにしました。 https://github.com/hbsnow-sandbox/nextjs-micro-cms-example 完成品は上記のリポジトリにあります。 今回作るブログについて API は microCMS を使う ホームではブログの一覧を表示する ブログの記事はタグを持っている 記事についているタグのリンクはタグ一覧のリストに遷移する HTTP クライアントラッパーの aspida を使う 下書きの preview モードを実装する Next.js で ISG ISG にすることで Webhook を使用しなくても、microCMS で記事を公開状態にするだけでサイト側でも更新されます。Vercel にデプロイするのであれば特に設定が必要になることもありません。 記事の更新ごとに毎回ビルドされる
![[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/f6d494ad174018fcac776abbb705d03671cb033e/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
妻の歌人としてのブログ付き個人サイトをリリースしたので、技術的な観点をまとめておきたい。 Jamstack これがサイトの構成図で*1、最近流行りのJamstackというアーキテクチャで作ってみた。 Jamstackは、静的サイトジェネレーターを用いてCMS等で管理するコンテンツをビルド時にすべて取得して、ユーザーアクセス前に用意しておいたHTML、CSS、JavaScriptをCDN経由で配信することで、画面遷移が非常に速い優れたパフォーマンスのサイト構築を可能にする。 CMS更新時のWebhook通知で自動デプロイする仕組みを入れることで、開発者がソースコードを触ることなく、サイト編集者で完結したサイト更新を行うことができるため、ビジネスから趣味の活動まで、静的サイト開発・運用の手段として有力な選択肢になるだろう。 静的サイトジェネレーター Next.js, Nuxt.js, Gats
microCMSを使ってGatsbyブログに連載機能を実装した 2020.04.19 本ブログはGatsbyを使って、esa.ioで書いたコンテンツをNetlifyで配信しています。 esa.ioは情報共有サービスとして作られているので非常に書きやすいサービスです。しかし、（意図しない使い方をしているので）文章以外の情報を持たせるには不向きです。 ブログでシリーズ物の記事を書いてみたいが、連載情報をesa.ioに持たせるのは難しい。ただ、見た目とコンテンツの密を避ける意図でブログのソースコードには依存しない形にしたいと考えていました。 そこで目をつけたのが日本製のHeadless CMS「microCMS」です。 Headless CMSとmicroCMS 本ブログでも何度か取り上げていますが、簡単にHeadless CMSについて説明します。 通常WordPressのようなCMSはコンテ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事で紹介しているサービスの公式Twitterアカウントができました → @jslounge_info はじめに potato4d こと花谷拓磨です。 普段は ElevenBack という屋号のもと、フロントエンドを中心としながらも、デザインやサーバーサイドなどをも含めて作業することが多いのですが、屋号での活動の一環として、 JSLounge という渋谷で活動するハンズオン団体の運営を行っています。 その JSLounge にて過去に開催したハンズオン資料を入手できるサイトを構築することとしました。 通常、ハンズオンとなればその場でメ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
