Nuxt.jsで作った静的サイトのビルド/テスト/デプロイを自動化して、毎朝10時に更新する。
AWSとCircleCIの力を借りて、Nuxt.jsで作った静的サイトの運用をできるかぎり自動化した話です。 3ヶ月ほど前からCIのサービスを使うようになり、入門記事はたくさんあって助かったのですが、具体的にどんな感じで使っているかの情報が少なかったので記事にしました。 もしかしたら、CIの使い方が間違っているかもしれないので、そのときは優しくコメントをいただけたら嬉しいです。 できあがった流れ 毎朝10時にLambdaを起こしてデータの更新を行い、静的ファイルを再生成してからデプロイする流れになっています。 対象のサイト ざっくりAWSという、AWSの料金を日本円でざっくり計算できるサイトです。 Nuxt.jsで作成したものを、静的サイトとして生成して、AWSのS3にホスティングしています。 計算に必要なAWSの価格や為替は、毎朝10時に取得したものをS3にJSONで保存し、そのJSON
【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.js redirect generate - Google 検索
2021/12/02 · 今回は表題のような構成のSSG環境におけるログインチェック・リダイレクトをしたい時に採用した方法についてまとめました。 また、ログイン管理の仕組みは ...
楽勝すぎるはずの netlify form を nuxt generate で頑張って使う - Qiita
netlify form が楽勝すぎる netlify は静的ファイルのホスティングサービスだが、フォームを簡単に埋め込むことができる。 受託制作において、これまで簡単なフォームを埋め込むために PHP が動く環境で動かしていたので、 netlify を使えば、簡単に組み込む事ができて便利。 詳細はドキュメントを見ていただければと思うが、 <form> タグに netlify の属性を追加するだけで、あとは通常どおり netlify 上で build して deploy すれば、なんとフォームが使えるようになる。 <form name="contact" method="POST" netlify> <p> <label>Your Name: <input type="text" name="name" placeholder="新垣結衣"></label> </p> <p> <label
Nuxt.jsとMDLで静的サイトを作る - Qiita
const { resolve } = require('path'); const iweee = require('./iweee.config.json'); module.exports = { head: { titleTemplate: `%s - IWEEE:International Workshop on Effective Engineering Education ${iweee.year}`, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: `IWEEE:International Workshop on Effe
マークアップエンジニアから見たNuxt.jsの可能性 - Qiita
この記事はVue.js #2 Advent Calendar 2017の21日目の記事です。 去年も参加させていただいたのですが、今年は４つもカレンダーが作成されてVue.jsの勢いすごいですね。 今回、自分がこの記事で書く内容は特にテック的なことではなく、Nuxt.jsへの感想記事や思い出記事みたいなのになりますので、Nuxt.jsの技術的な内容を期待していた方はすみません。こういった人間もいるのか程度にご覧いただけたら、という感じです。 テンプレートエンジン・プリプロセッサの多様化 いきなりVue.js、Nuxt.jsという主題から脱線してしますがご了承ください。 Node.jsというものが世に出てから、おそらく、宗教上の理由などを抜きにすれば、HTMLやCSSを素で書くことはなくなったと思います。いわゆるテンプレートエンジン・プリプロセッサの時代。 人々はHTMLをPug(Jade)
SEO、OGP……Vue.js製SPAの「困った」を解決できる「Nuxt.js」が便利だ！
Vue.jsでSPAを作ったものの、検索エンジンのクローラーやSNSのOGP取得といった問題で困ったことはありませんか？ サーバーサイドレンダリングを簡単に構築できるNuxt.jsの活用方法を解説します。 ユニバーサル（Isomorphic）JavaScriptはJavaScriptコミュニティで一般的な用語になりました。ユニバーサルJavaScriptとは、クライアントとサーバーの両方で実行できるJavaScriptコードのことです。 Vue.jsを含むモダンJavaScriptフレームワークの多くは、シングルページアプリケーション（Single Page Application : SPA）の構築を目的に作られています。シングルページアプリケーションはページがリアルタイムで更新されるので、アプリの動きが軽快でユーザーエクスペリエンスが向上します。さまざまな利点がありますが、欠点もありま
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hareku/mycode.rip
"nuxt generate" - Google 検索
Vue Fes Japan 2018 サイトの速度改善 / High Performance Vue Fes Japan Site
The generate Property
https://github.com/yahsan2/wp-nuxt-for-netlify/blob/943004874d1e2a710eca9e65c66823bc04dbc76c/nuxt.config.js
GitHub - sitepoint-editors/nuxt-ssr-blog: Serverless static-generated Nuxt.js Universal JavaScript web application. Demo app, accompanying the SitePoint article.
https://github.com/kaydwithers/blog-in-5-minutes-demo/blob/master/nuxt.config.js
GitHub - yahsan2/wp-nuxt-for-netlify
https://github.com/nuxt/docs/blob/master/en/api/configuration-generate.md
generate プロパティ
