Nuxt.js + microCMSでヘッダのまとめサイトを作ってみた
Jamstackでどんな生徒でもアクセスできるサイトを作りたい(Next.js,microCMSでサイトを作った話) | Ryusou Blog
Jamstackでどんな生徒でもアクセスできるサイトを作りたい(Next.js,microCMSでサイトを作った話)JamstackNext.jsmicroCMS この記事はJamstack Advent Calender 5日目の記事です。 はじめまして。りゅーそう(@ryusou_mtkh)です。 現在、埼玉県の高校で地歴科の教員をしています。教員の業務軽減や生徒の学びの場や手段を増やすためにプログラミングを勉強しています。 先日、WEBサイトで歴史について学べるHisTubeというメディアサイト的なものを公開しました。 このサイトは以下のような技術を使って制作しています。 Next.js(TypeScript)storybookstyled-componentsmicroCMS 今回はそのサイトを作って得た知見を共有できたらと思います。 なぜHisTubeを作ったのか？ まずはじめに
Is Jamstack Officially Finished? Brian Rinaldi | Wednesday, July 26, 2023 Earlier this week, Netlify officially killed The Jamstack Community Discord. It was a rather abrupt end, with little more than a week’s notice. Here’s a portion of the announcement: Over time, we have noticed a decline in activity and engagement within the server. After careful consideration, we have come to the decision to
ぐるなびでフロントエンドを担当している原田です。 今回は、コーポレートサイトをリニューアルしたお話です。 リニューアルとはいえ、ページの見た目は全く変わっていないので、気づく人はほとんどいないと思いますが……裏側でどんなことが行われ、どう変わったのかをお伝えしようと思います。 corporate.gnavi.co.jp 目次 リニューアル前のコーポレートサイト システム構成 問題点 管理できていないシステム 運用上の問題 移行不能なデータ リニューアル Jamstackとは システム構成と技術スタック APIを担うヘッドレスCMS 工夫したところ ビルド時間の短縮 ビルド対象の絞り込み Github Actions でのキャッシュ利用 その他 リニューアル後の変化 障害が起きにくい環境、起きても発見しやすい環境へ ページのパフォーマンスが大幅に改善 パフォーマンス改善の要因 まとめ リニュ
いきなりですが。 運営して間もないJAMstack構成な当ブログですが CMSをmicroCMSに乗り換えました！👏 （正確に言うとNetlifyCMSも併用していますが。笑） そこで今回、NetlifyCMSで感じた課題、microCMSの便利な点、microCMSでの課題など 観点ごとに思った事をまとめてみました。 HeadlessCMSを導入する際の参考になれば良いかなと思います！ まず、それぞれのCMSに関して簡単にまとめます。 NetlifyCMSとはNetlifyCMS（https://www.netlifycms.org/） アメリカのNetlify社が運営する静的ホスティングサービス、「Netlify」のひとつの機能として搭載されたCMSです。 設定ファイル(ymlファイル)一つで管理画面をカスタマイズする事ができ、非常に簡単に管理画面を構築できます。入稿した記事はGit
この記事はBASEアドベントカレンダー 19日目の記事です。 devblog.thebase.in Webアプリの解体 こんにちは。フロントエンドエンジニアの松原(@simezi9)です 近年、Webアプリはクラウドの発展とともにそのあり方を大きく変質させてきました。 具体的にはXaaSの発展により、Webアプリはその構成要素をあらゆるレイヤにおいて細かく分解され、それらを開発者が組み合わせることで作られるようになりました。 このアプローチによりシステムはプラガブルになり可用性の面でも品質面でも大きく進化しました。 その反面で当然このアプローチにも問題があります。その最たるものが組み合わせの複雑度の増加だと思います。 あらゆるものがプラガブルになった反面、それぞれのサービスをどのように組み合わせてWebアプリを構築していくのか自体が一つの知見・分野となり、「昔はWebアプリフレームワーク一
Modern Web Development on the JAMstack: Modern Techniques for Ultra Fast Sites and Web Applications
Really pause and think about how much time and effort web teams around the world have spent building and managing infrastructure. For many years, launching a site or web application has been as much about deploying complex server environments as it’s been about building actual application code. The cloud made provision- ing all these resources faster but no less complicated. The JAMstack was born
使えばわかる！Jamstackの前に microCMS × PHP から始めてみる
という選択肢 | 東京都・駒込のWeb制作 ペンタプログラム
佐藤あゆみ（旧姓:古庄）屋号Pentaprogram／Web制作者／著書「Webページ高速化超入門」／計算メモ帳アプリ「Kanau」制作／Mastodon:@ayumisato@hachyderm.io
前置きと自己紹介 今回はKINTOテクノロジーズでフロントエンドを担当しているイケダがお送り致します。最近はKINTO ONEの開発運用や新規サービス・プロジェクトの立ち上げなどをしています。 自己紹介もそこそこに前置きへ。 前置き 昨今、React / Vue.js / AngularJS / Preact / Ember など様々なJSフレームワークが台頭しています。ここ最近ですとSvelteとSolidの勢いがありますね。(個人的にMithril.jsにもっと伸びてほしい)もっと知りたい方はこちらへ https://mithril.js.org/ その中でも今回はKINTOのコーポレートサイト、KINTOテクノロジーズのコーポレートサイト、そして現在進行しているプロダクトでも採用しているSvelteを使用してみての所感、そして簡単なSGまでのコードを紹介したいと思います。 本記事で紹
こんにちは、柴田です。 Nuxt.jsはv2.13よりFull Static Generationが出来るようになり、益々便利になりました。 全てを静的化し、Jamstack構成にしている方も多いと思います。 Jamstack構成であれば、ブラウザからAPIをコールされる心配はなくなりますが、実はAPIキーがソースコードの中に残っているケースが多いです。（検索したところ、間違った情報を発信しているサイトも多いです） ちなみに良く見かける以下の方法ではAPIキーの隠蔽ができていません。 NG1: process.env経由での利用環境変数としてAPIキーを定義し、APIリクエスト時にprocess.env.API_KEYで参照する方法です。 こちらは一見正しそうに見えますが、サーバでのビルド時にWebpackにてprocess.env.API_KEYの値は定数に変換されてしまいます。 よって
本投稿はJamstackその２ Advent Calendar 2020の15日目です。その1と比べてその2は過疎化しているので今からでも間に合いますよ！ はじめに Jamstackとは Jamstackは新しい何かなのか？ 結局、Jamstackとは何なのか 結論 余談 はじめに 勢いで登録したもののいまさら見直してみると、 Next.js / Nuxt.js / Gatsby / Gridsome / Vercel / Netlify / Amplify / CDN / サーバーレス / ヘッドレスCMS 等々、関連する話なら何でもOK ということで実際にNext.jsとかGatsby、CMS周りの話が多い様子。では自分は何について書こうかと考えたときに最近こんなツイートをしたことを思い出しました。 Jamstackって言わんとすることはわかるんだけどどうにもなんか腹に落ちきらないんだ
このnoteの対象者： - Headless CMSというのを聞いたことがある（あるいは勉強したい） - エンジニアではないので、専門用語難しい - 簡単にHeadless CMSの使い方を知りたい。 【注意】 このnoteの情報は古い可能性があります。正確なMicro CMSの情報は、Micro CMSの公式ドキュメントをご確認ください。 『Headless CMSとは？』『Micro CMSとは？』『Micro CMSの利用方法』- Headless CMSとは Headless CMSとは何か、Micro CMSの方が書いているこちらのブログがわかりやすかったです。 Micro CMSは日本語であることと、ある程度マニュアルがまとまっているので、ドキュメント確認していただければ基本的には理解できると思います。 ここからは、使っていて気になったり、私自身が止まってしまった箇所を細く入れ
A Complete Guide To Incremental Static Regeneration (ISR) With Next.js — Smashing Magazine
Incremental Static Regeneration (ISR) is a new evolution of the Jamstack, allowing you to update static content instantly without needing a full rebuild of your site. The hybrid approach of Next.js allows you to use ISR for e-commerce, marketing pages, blog posts, ad-backed media, and more. A year ago, Next.js 9.3 released support for Static Site Generation (SSG) making it the first hybrid framewo
Allow a client to request static assets while waiting for the HTML response. Set up an A/B test by controlling what response is served based on cookies. This version supports passing the request through to test and control on the origin, bypassing random assignment.
CircleCI × Contentful × S3で作るJamstackなブログ環境。 | DevelopersIO
こんにちは、ベルリンオフィスの小西です。 最近日本語の記事も充実してきたJamstack。説明はこちらの記事で書かれているので省略しますが、要はサイト表示が高速でセキュリティも強くてスケーラビリティもある環境構成のことです。 今回は爆速にページを表示でき、記事データの管理も楽で、かつセキュリティもあまり気にしなくていいブログサービスを構築したいと思います。 目次 環境構成 前提 1. Contentfulの準備 2. Gatsbyアプリの立ち上げ 3. S3へのアップロード 4. CircleCIのセットアップ 5. ContentfulとCircleCIの連携 さいごに 記事が長めで初歩的なことも書いてたりするので、適宜必要な見出しまで飛んでってください。 ローカルでアプリ立ち上げたいだけなら1と2だけ、既にContentfulアプリがあってCircleCIと連携したい人は5だけ読んでい
Next.js + microCMS + NetlifyでJAMstackな世界に入門する - Qiita
追記: Next.js v9.3以降SSGに関するAPIの変更や、環境変数の扱い方が変わったので、対応した記事に書き換えました。 はじめに この記事はJAMstack Advent Calendar 2019 7日目の記事です。 こんにちはかみむらです。最近は、Twitter上でJAMstackアーキテクチャーについての情報をシェアしています。 先日、個人のポートフォリオをJAMstackアーキテクチャーな構成で立ち上げました。このサイトの技術スタックはNext.js(静的サイト) + microCMSでホスティングサービスにNetlifyを利用しています。 JAMstackは静的なJavaScript、独立したAPI、ビルド済みのマークアップを総称したアーキテクチャーで、今回作成したウェブサイトはこれらの要件を満たしていることになります。もしJAMstackアーキテクチャーをもっと詳しく
要約 JAMstack手習で、 Nuxt + Strapi + Apollo のブログを作ってみます。 手本記事(チュートリアル) [strapi.io] Build a blog with Nuxt (Vue.js), Strapi and Apollo https://strapi.io/blog/build-a-blog-using-nuxt-strapi-and-apollo 手元環境 macOS Catalina (10.15.1) anyenv (1.1.1) nodenv (1.3.0) Node.js 12 LTS (v12.13.0) Yarn (v1.19.1) Google Chrome (78.0.3904.108 (Official Build)) 拡張機能: Vue.js DevTools (5.3.3) 拡張機能: JSONView (0.0.32.3) Vi
Kuroco | Kuroco is a headless CMS
Maximizing your customer experience with our API-centric platform design Develop system-free applications with an enterprise headless CMS. Our backend-for-frontends (BFFs) platform enables a smooth UI/UX that is key to customer experience. Cut development costs by using your favorite programming languages as is. Say goodbye to the backend nightmares of traditional system development. Pick and choo
はじめまして。テクニカルディレクターの横川です。CINRA, Inc.でクライアントワークや自社メディアCINRAなどに携わっています。 今回は、ウェブサイトを構築するうえで、土台ともいえる技術選定についてお話したいと思います。 エンジニア向け記事に見えますが、ウェブサイト構築の技術選定は、スケジュールやデザイン、そのあとの運用など、開発フェーズ以外の与件も考慮して決定されるため、自分には関係ないと思った非エンジニアの方（とくにウェブディレクター、プロジェクトマネージャーなどサイト制作全体のディレクションをする方々）にもぜひ読んでいただきたい記事です。 技術選定はエンジニアのものだけではない ウェブサイト（アプリケーション）は、複数の技術の組み合わせによって実現されます。技術の組み合わせが示す範囲はさまざまですが、ある程度パターン化され、SPA、Jamstack、SSR、SSG……といった
microCMS & Astro で永久0円のJamstack爆速ブログを作成する丁寧なハンズオン - Qiita
アイレット株式会社 22新卒 Advent Calendar 2022 1日目の投稿です！ 社外へアウトプットする習慣を作ることを目的として、このアドベントカレンダーを企画しました 同期25人で最後まで完走することを目標に頑張ります！ 概要 このハンズオンでは、microCMS・Astro・Vercelを利用し、永久0円の個人ブログを作成します。 所要時間 1 時間 流れ & 学べること 前知識 : 必要な知識を確認します。 microCMS : microCMS の会員登録 / サービスを作成します。 Astro : Astroプロジェクトを作成し、microCMSと連携します。 Vercel : Vercelにデプロイし、microCMSとのデプロイフック連携をします。 前知識 なぜ 0円 なのか このハンズオンでは、記事の管理（CMS）に microCMS、ブログのデプロイに Ver
本ブログはGatsbyを使って、esa.ioで書いたコンテンツをNetlifyで配信しています。 esa.ioは情報共有サービスとして作られているので非常に書きやすいサービスです。しかし、（意図しない使い方をしているので）文章以外の情報を持たせるには不向きです。 ブログでシリーズ物の記事を書いてみたいが、連載情報をesa.ioに持たせるのは難しい。ただ、見た目とコンテンツの密を避ける意図でブログのソースコードには依存しない形にしたいと考えていました。 そこで目をつけたのが日本製のHeadless CMS「microCMS」です。 > Headless CMSとmicroCMSHeadless CMSとmicroCMS 本ブログでも何度か取り上げていますが、簡単にHeadless CMSについて説明します。 通常WordPressのようなCMSはコンテンツの管理層とプレゼンテーション層を持つ
Next.js×TypeScript×microCMS×MantineUI×Netlifyでブログを作成したのでまとめと感想
Next.js×TypeScript×microCMS×MantineUI×Netlifyでブログを作成したのでまとめと感想 はじめに この記事は、タイトルに記載の通りの技術スタックで趣味の芝生管理用のブログを作成したので、簡単にまとめと感想を書いておこうと思います。 実際のブログはこちら GitHubリポジトリはこちら（参考になった方は🌟をポチッと🙏） ブログ作成の動機 普段業務でNextjs(React)を触っているがSSRする必要がないアプリケーションということもあり、ファイルルーティングの機能くらいしか触っていなかったため、SSGやSSRの機能をちょっと触っておきたかったのと、最近流行りのJAMStack構成をmicroCMSを用いて経験しておきたかったという2点が主な動機です。 あと、勤めている会社でホームページを作り直す話があがっていたので、JAMStack構成を提案するた
こんにちはかみむらです。個人的な肌感で、Jamstackアーキテクチャーの構成でWEBサイトを公開する企業が増えてきた気がします。最近では日本製Headless CMS「microCMS」も登場して、だいぶ日本でも採用しやすい環境が整ってきました。 私もJamstackアーキテクチャー推しな一人なので、現在色々な構成で試作をしています。 Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ) 作者:エビスコム発売日: 2020/06/01メディア: Kindle版 今回は、Ghostのブログ記事に触発されて、GatsbyJS + Ghostの構成をローカルで動かしてみます。GhostはNode.js製のヘッドレスCMSで、オープンソースで公開されています。Ghostの環境はDockerで準備します。 ghost.org Jamstackアーキテ
待望のSvelteKit 1.0がリリースされましたね！ https://svelte.dev/blog/announcing-sveltekit-1.0 早速、microCMSとの連携を試してみたいと思います。 Svelteとはビューを生成するライブラリです。 ReactやVueと異なる点は、ライブラリのコードをほとんど含まないVanilla JSに近い形でコンパイルされるという点です。 そのためコンパイル後のJSファイルのサイズが小さく、高いパフォーマンスが期待できます。 「ライブラリのコードをほとんど含まない」ことを実現するために、SvelteではVirtual DOMを敢えて採用せず、代わりにコンポーネントを非常に効率的な命令型コードに変換して、DOMをピンポイントに更新します。 SvelteKitとはSvelteと組み合わせて使うアプリケーションフレームワークです。 NextやN
How Smashing Magazine Manages Content: Migration From WordPress To JAMstack
WordPress adoption is massive. So why would a WordPress site consider moving to JAMstack? In this technical case study, Sarah Drasner will cover what an actual WordPress migration looks like, using Smashing Magazine itself! She’ll talk through the gains and losses, the things she wishes she knew earlier, and what she was surprised by. Let’s dig in! This article has been kindly supported by our dea
この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの10日目の記事です。 JAMstackとは2016年ごろにNetrifyの創設者Matt Biilmann氏が提唱した新しいフロントエンドスタックです。リクエストを受けてからサーバー上で処理を行いレスポンスを返す従来のWebサイトの配信方法とは異なり、JAMstackでは事前にビルドされたHTMLをCDN上で配信します。 最近、特に注目が集まっているこのJAMstackについて、基礎知識編と構築編の2回に分けてご紹介したいと思います。 JAMstackとは JAMstackの公式サイトによるとJAMstackとは、 A modern architecture -- Create fast and secure sites and dynamic apps with JavaScript, APIs, and prere
Jamstack gives developers full-stack powers Findings from the Jamstack Community Survey 2022 The third year of the Jamstack Community Survey found a mix of things we expected – indeed, things we predicted last year – as well as some big surprises about the many diverse members of our community. Some key takeaways include: Four out of five developers are now working remotely most of the time, and m
Boost Performance and Developer Productivity with Jakarta EE 11
What is the Jamstack? | Jamstack
What is Jamstack? Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity. The core principles of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before. Explore more of the bene
JAMstackの紹介
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
The Qiita Advent Calendar 2019 is supported by the following companies, organizations, and services.
Jamming into the Mainstream: Jamstack Community Survey 2021 | Jamstack
Jamming into the Mainstream: Jamstack Community Survey 2021 This year we saw Jamstack go mainstream, with big changes in working patterns for Jamstack developers in every region. Our community has grown, adding not only experienced developers but also becoming the first stop for those just breaking into the industry. We also learned that the move to remote work has been significant and lasting amo
JAMstack Tools And The Spectrum Of Classification | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! With the wonderful world of JAMstack getting big, all the categories of services and tools that help it along are as important as ever. There are static site generators, headless CMSs, and static file hosts. I think those classifications are handy, and help conversations along. But there is
MOONGIFT.dev #1「ヘッドレスCMS」
MOONGIFT.devはあらゆるテクノロジー、技術ワードについて探求するコミュニティです 従来のサーバサイドでHTMLを生成するCMSに対して、ここ数年盛り上がっているのがヘッドレスCMSになります。フロントエンドは別途開発することで、コンテンツはAPIベースで配信されます。政府統一WebサイトがヘッドレスCMSであることが望ましいとされるなど、注目される技術です。 そこで、今回はヘッドレスCMSを提供、活用する各社を招いてパネルディスカッションを行います。ヘッドレスCMSが何なのかはもちろんのこと、何ができて何ができないのか、採用することによる利点や、考えるべきポイントなどをディスカッションします。 続きを読む
Adways Advent Calendar 2019 14日目の記事です。 http://blog.engineer.adways.net/entry/advent_calendar_2019 こんにちは、swfzです。 先日 Angularでの静的サイトジェネレーターscullyが公開されました github.com ReactだとGatsby、VueだとGridsomeなど、静的サイトジェネレーターと言われる部類のものがありましたがAngularは（僕が観測している範囲では）今までありませんでした 個人的に待望だったのでまだ変更等ありそうですが一足早く使ってみたいと思います チュートリアル動画は下記にあります Introducing Scully: Angular + JAMStack - YouTube www.youtube.com JAMstackとは JAMstack | J
Let’s pretend I own a service and I want to grant other services access to my service on behalf of my users. The familiar OAuth 2.0 is the industry standard used by the likes of Google sign in, Facebook, etc. to communicate safely without inconveniencing users. Implementing an OAuth Authentication server is conceptually simple but a pain in practice. We can leverage the power of Cloudflare Workers
技術同人誌（PDF） / 58ページ / ￥1000 新しいWeb開発アーキテクチャ SPAとSSRを超えるJAMstackの仕組み ※この商品はPDFの「ダウンロード販売」です！ ------------------------------------------------------- ● 本書のポイント！ ・NetlifyのCEOが提唱 ・サイトの読み込みが10倍高速化 ・サーバー代$5000/月が$5/月に！ ・マイクロサービスの活用 ・GatsbyJS、Nuxt.jsを使ったモダンフロントエンド開発 ------------------------------------------------------- ● 本書の概要 フロントエンドやその周辺技術はこの10年ほどで大きく変化しました。 昔は片手間であったものが、いまや複雑なものになっています。また、流行した技術がほんの1
AWS x JAMstack で構築・運用する サーバーレスな Web Front | Slides | Riotz.works
「JAWS DAYS 2019」にて発表した際のスライドです。
Faust.js™
A JavaScript framework that makes building headless WordPress simple and easy. Faust Toolbar A familiar publisher experience, providing a cohesive experience with wp-admin. Easily extensible with built in filters, empowering developers to customize for different use cases. Gutenberg Block Editor Regain a drag-and-drop WYSIWYG editing experience in a headless WordPress environment. Faust's blocks p
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Remote Synthesis | Is Jamstack Officially Finished?
コーポレートサイトをリニューアルしました - ぐるなびをちょっと良くするエンジニアブログ
【CMS比較】NetlifyCMSからmicroCMSへ乗り換えたら幸せになった話
Stackbitを触って感じるWebアプリ構築の進化のひとつの形 - BASEプロダクトチームブログ
SvelteKit + Svelte を1年間くらい使ってみた知見など
NuxtのJamstack構成におけるAPIキーの隠蔽方法について
結局、Jamstackとは何なのか - Sweet Escape
【超初心者向け】「Micro CMS」のはじめ方。｜Koushi Kagawa
Examples | Cloudflare Workers docs
Nuxt(Vue.js)+Strapi(headless CMS)+Apollo(GraphQL)でブログを作る - Qiita
オウンドメディアやコーポレートの技術選定どうしてる？ 非エンジニアでもわかる基礎知識｜CINRA, Inc.
microCMSを使ってGatsbyブログに連載機能を実装した - mottox2 blog
GatsbyJS + GhostでJamstackなブログを作成する - hiro08gh
SvelteKit + microCMS のブログ作成チュートリアル
AWSでJAMstackことはじめ（基礎知識編） | フロントエンドBlog | ミツエーリンクス
Jamstack Community Survey Results 2022 | Jamstack
Pros and Cons of SSR and JAMstack
JAMstack - Qiita Advent Calendar 2019 - Qiita
AngularにJAMstackが??? - Adwaysエンジニアブログ
JAMstack｜Micro Frontends Architecture Patterns
OAuth Auth Server through Workers
JAMstack 完全入門 ハイパフォーマンス Web サイト構築 - soussune Shop - BOOTH
weekly-net.co.jp
www.yomiuri.co.jp
www.riken.jp
www.marines.co.jp
zip358.com
bobobrazilweb.com