Nuxt.js ✕ Netlify
で作る
静的サイトは
いいものだ
rry（@ryamakuchi）
恵比寿にある会社で普段は Rails / Vue を書いてます。
@omiend は会社の上司です 🐥
今回話すこと
- Nuxt.js の generate 機能
- 静的サイトのユースケース
- Netlify のここがよい
今回話さないこと
- Vue.js って何？
- Nuxt の SSR や SPA の説明
- 他の JS ライブラリとの比較
- React, Anguler
- Next.js
「Nuxt で静的なサイトを作りたいときってどんなとき？」
という部分を話します。
Nuxt.js
Vue アプリケーションを作成するフレームワークです。
- 規約のある Vue アプリケーションを
作りたいとき- SPA モード
-
SSR したいとき
- Universal モード
- 静的なサイトを生成したいとき
generate コマンドで dist/ 配下に
静的ファイルを生成することができる
generate
Universal モードとの違い
-
静的なファイルは SSR する
必要がない- Node.js を動かす環境を
用意する必要がなくなる
- Node.js を動かす環境を
- 静的ファイルの生成
- CDN が利用できる
- めちゃくちゃ速い
まとめると
SSR する必要がないもの
どんな場合に generate を使うとよいか
何を求めているのか
- ビルドした時点で、公開する内容が決まっているもの
- LP
- ポートフォリオサイト
- 速さ
- 静的ファイルの生成がよい
Netlify
Web サイトをモダンにビルド、デプロイ、管理できる
ホスティングサービス
- 高機能ホスティングサービス
- GitHub と連携して、
master ブランチに変更があると
自動でビルドしてデプロイしてくれる - Webhook を使って色々できる
GitHub Pages とかも
あるけれど…
Netlify のほうがいいよな？ な？
- SSL
- 速さ
- 独自ドメイン
と、思っていた時期が、
私にもありました
Netlify
GitHub Pages
GitHub Pages
のほうが、速かった
😇
さいごに
Nuxt.js の generate 機能を使った導入事例
ご清聴ありがとうございました！
Nuxt.js ✕ Netlify で作る 静的サイトは いいものだ