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 を動かす環境を
      用意する必要がなくなる
  • 静的ファイルの生成
    • CDN が利用できる
    • めちゃくちゃ速い

まとめると

SSR する必要がないもの

どんな場合に generate を使うとよいか

何を求めているのか

  • ビルドした時点で、公開する内容が決まっているもの
    • LP
    • ポートフォリオサイト
  • 速さ
    • 静的ファイルの生成がよい

Netlify

Web サイトをモダンにビルド、デプロイ、管理できる

ホスティングサービス

  • 高機能ホスティングサービス
  • GitHub と連携して、
    master ブランチに変更があると
    自動でビルドしてデプロイしてくれる
  • Webhook を使って色々できる

GitHub Pages とかも

あるけれど…

Netlify のほうがいいよな？　な？

 

  • SSL
  • 速さ
  • 独自ドメイン
     

と、思っていた時期が、
私にもありました

Netlify

GitHub Pages

GitHub Pages
のほうが、速かった

😇

さいごに

Nuxt.js の generate 機能を使った導入事例

ご清聴ありがとうございました！

Made with Slides.com