Vueで静的ブログを作りたい！

Transcript

1. Vueで静的ブログを作りたい！
   Ishikawa Naruto
   @garypippi
   

   View Slide

2. Vueで静的ブログを作りたい！
   

   View Slide

3. Vueで静的ブログを作りたい！
   

   View Slide

4. Markdownで記事を書きたい！
   Vueで静的ブログを作りたい！
   

   View Slide

5. Markdownで記事を書きたい！
   記事はデータベースを使わず
   ファイルで管理したい！
   Vueで静的ブログを作りたい！
   

   View Slide

6. Markdownで記事を書きたい！
   記事はデータベースを使わず
   ファイルで管理したい！
   とにかくVueで作りたい！
   Vueで静的ブログを作りたい！
   

   View Slide

7. Markdownで記事を書きたい！
   記事はデータベースを使わず
   ファイルで管理したい！
   とにかくVueで作りたい！
   自作したい！
   Vueで静的ブログを作りたい！
   

   View Slide

8. Nuxt.jsで作ってみる
   

   View Slide

9. Nuxt.js
   Vue.jsベースのフレームワーク
   SSR（サーバーサイドレンダリング）
   SPAモード（SSRしないモード）
   静的ファイル生成！
   https://nuxtjs.org/guide
   

   View Slide

10. nuxt generate
    Nuxt.jsが提供するコマンド
    静的ファイル生成
    関数を使って動的ルートにも対応
    データをページコンポーネントに渡すことが可能
    https://nuxtjs.org/api/configuration-generate
    

    View Slide

11. ２通りの方法で作ってみました
    A
    B
    

    View Slide

12. PLAN A の概要
    PLAN A の概要
    静的ファイル生成の設定で
    動的ルートを生成しつつ
    記事情報をページコンポーネントに渡す
    

    View Slide

13. PLAN A
    PLAN A
    記事
    Nuxt.js設定ファイル（nuxt.config.js）
    ルート生成
    記事情報処理
    nuxt generate
    HTML
    

    View Slide

14. PLAN A のいいところ
    PLAN A のいいところ
    静的サイトは生成できる
    

    View Slide

15. nuxt generate --watch
    

    View Slide

16. そのようなオプションはありません
    

    View Slide

17. 静的ファイル生成ではコードの変更を監視して
    自動的に再生成する機能はない
    

    View Slide

18. A ボツ
    

    View Slide

19. PLAN B の概要
    PLAN B の概要
    記事情報を提供するコンテンツサーバーを用意し
    ページコンポーネント内で記事情報を取得
    Nuxt.jsの開発サーバーが使える
    

    View Slide

20. PLAN B
    PLAN B
    Nuxt.js設定ファイル
    （nuxt.config.js）
    記事
    コンテンツサーバー
    ページコンポーネント
    記事一覧
    記事本文
    日付...etc
    ルート生成
    nuxt generate
    （静的サイト生成）
    nuxt
    （開発時）
    HTML
    

    View Slide

21. PLAN B のいいところ
    PLAN B のいいところ
    静的サイトは生成できる
    コードの変更を監視できる
    サイトを確認しながら記事を書ける
    

    View Slide

22. PLAN B の気になる点
    PLAN B の気になる点
    手元に記事ファイルがあるのに
    コンテンツサーバーを立てている？
    サイト生成時のみ使うコードが
    ブラウザ用にもバンドルされる（Aも同様）
    

    View Slide

23. B ボツ
    

    View Slide

24. Vue Server Renderer と Webpackプラグイン
    を使って作ってみる
    

    View Slide

25. Vue Server Renderer
    Vue.jsでのサーバーサイドレンダリングを提供
    import Vue from 'vue'
    import { readFileSync } from 'fs'
    import { createRenderer } from 'vue-server-renderer'
    const renderer = createRenderer({
    template: readFileSync('/path/to/template').toString()
    })
    const vm = new Vue({ render: h => h('div', 'hello') })
    renderer.renderToString(vm, {}).then(html => {
    console.log(html) // => hello
    })
    https://ssr.vuejs.org/
    

    View Slide

26. Webpackプラグイン
    import { Compiler } from 'webpack'
    export default class {
    apply(compiler: Compiler) {
    compiler.hooks.run.tap('MyPlugin', compilation => {
    console.log('Build process is starting!!!');
    });
    }
    }
    https://webpack.js.org/concepts/plugins/
    

    View Slide

27. PLAN C の概要
    PLAN C の概要
    ルート生成
    記事情報の取得と処理
    静的ファイルの保存
    上記やその他もろもろWebpackプラグインで実装
    

    View Slide

28. PLAN - C
    PLAN - C
    記事
    Webpackプラグイン
    ルート・記事情報の取得と処理
    HTML描画 HTML
    編集の監視
    index.js
    webpackビルド
    

    View Slide

29. PLAN C のいいところ
    PLAN C のいいところ
    静的サイトは生成できる
    各種監視できる
    静的サイト生成に関するコードは
    バンドルに含まれない
    最終的にこの方法で作りました
    

    View Slide

30. やったー！
    

    View Slide

31. Vueで静的ブログ制作のまとめ
    Nuxt.jsはオーバスペックかもしれない
    Webpackプラグインで作るのがよさそう
    

    View Slide

32. 静的ブログ自作の課題
    記事読み込み処理の省メモリ化
    ブログに関する様々な機能の実装
    （次・前の記事へ...etc）
    

    View Slide