【Contentful編】モダンな感じのSPAブログを自作する - Qiita
はじめに Nuxt.jsとContentfulとNetlifyでモダンな（？）SPAブログを作りました。こちら 何回かにわけて構築の記録を残しているシリーズの第３回です。 前回つくったSPAブログを、APIベースのCMS「Contentful」に対応させていきます。 【シリーズの予定】 - まえがき編 - Nuxt.js編 - Contentful編 ← この記事 - Netlify編 事前情報 Contentfulの構造 ContentfulはユーザーごとにSpace、Content Model、Entryという構造を持っていて、それぞれにIDが割り振られています。 Space以下を複数のユーザーで共有することもできるみたいですが、一人で使用する場合は、以下のような階層構造だと思ってもらえればいいかと。 セットアップ ユーザー登録 まずはこちらからユーザー登録をしましょう。GitHubア
Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら
nuxt generateの機能は、静的サイト生成とか、単に静的生成といわれることが多いですが、文中で多用するのがツラいので、より短く「SSG(Static Site Generation)」で統一しています。 Nuxt.jsにおけるビルドの選択肢 Nuxt.jsでは、SPA・SSR・SSGの中から、好きなものを選んで開発できます。 初期設定ではSSRで動作するようになっていますが、流れとして自然なのでSPAから順に利点と欠点をまとめました。それぞれのビルドを行うため設定は、ドキュメントにわかりやすく書いてあるので、そちらでご確認ください。 サーバーサイドレンダリング - Nuxt.js SPA（Single Page Application） 利点 実装しやすい サーバーの準備が楽 欠点 初期表示が遅い SEOに不安がある OGをページごとに設定できない SPAは、最もシンプルに実装でき
NuxtのasyncDataで静的ファイルを読み込む
概要 Nuxt.jsを使って色々作っていると、generate(静的出力)時の初期表示内容にJSONファイルの内容を取り込んで表示したい、という場面に出くわします(多分)。 そんなときにどうやって取り込めばいいのかという方法を書き残しておきます。 方法 asyncDataメソッドを使います。 また、ページが動的ルーティングの場合はroutesオプションも使う必要がでてきます。 これら2つで要件は満たせるのですが、その中でどうやって読み込まれるかによって出力されるJS(ランタイム=初期表示以降に読み込まれる内容)が変わってくるので使い分ける必要があります。 サンプルケース 説明/理解しやすいように、以下のサンプルケースを用いて説明をしていきます。 Nuxt.jsを使ってブログシステムを作成する 記事はMarkdownで書き、それらを変換した個別のJSONファイルがあるものとする 初期表示時に
Nuxt.jsとContentfulでブログ作ってみた - Qiita
これは Vue.js #3 Advent Calendar 2017 – Qiita 21日目の記事です。 デモ：https://hisako135.github.io/nuxt_blog/ リポジトリ：https://github.com/hisako135/nuxt_blog Nuxt.js 使ってみたいけど何をつくろうかな〜と思案していたらば、『SEO、OGP……Vue.js製SPAの「困った」を解決できる「Nuxt.js」が便利だ！』という記事でブログを作っていたので、なんだかちょうどよさそうと思い以下を追加してやってみることにしました。 Contentful から記事を取得する トップページに配置するコンポーネント（ components/PostPreview.vue ）をつくる 記事一覧ページと個別記事ページをつくる nuxt generate で静的ファイルを生成する Gi
【コードある】Nuxt + WordPress で netlify 運用が爆速すぎて神だった - Qiita
まずは作ったサイトを貼っておきます。 https://wp-nuxt-for-netlify.netlify.com/ いかがですか？現在住んでいるオーストラリアのADSLな爆遅回線でも、爆速です。 WordPress は heteml のレンタルサーバーですよ？ 感動しすぎたので、徒然なるままに〜。 ざっくり構成 WordPress側 リニューアル中の家族ブログ（ https://nishida.lol ） Heteml レンタルサーバー（月額 2000円） Heteml で無料SSL WP REST API でGET APIだけ利用 https://v2.wp-api.org/ フロント側 Nuxt Nuxt.js 1.0.0 nuxt generate で静的ファイル生成 netlify にホスティング https://www.netlify.com/ GitHub 上で nuxt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://github.com/yahsan2/wp-nuxt-for-netlify/blob/943004874d1e2a710eca9e65c66823bc04dbc76c/nuxt.config.js
https://github.com/kaydwithers/blog-in-5-minutes-demo/blob/master/nuxt.config.js
generate プロパティ
