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

Transcript

1. Vueで静的ブログを作りたい！ Ishikawa Naruto @garypippi
2. Vueで静的ブログを作りたい！
3. Vueで静的ブログを作りたい！
4. Markdownで記事を書きたい！ Vueで静的ブログを作りたい！
5. Markdownで記事を書きたい！ 記事はデータベースを使わず ファイルで管理したい！ Vueで静的ブログを作りたい！
6. Markdownで記事を書きたい！ 記事はデータベースを使わず ファイルで管理したい！ とにかくVueで作りたい！ Vueで静的ブログを作りたい！
7. Markdownで記事を書きたい！ 記事はデータベースを使わず ファイルで管理したい！ とにかくVueで作りたい！ 自作したい！ Vueで静的ブログを作りたい！
8. Nuxt.jsで作ってみる
9. Nuxt.js Vue.jsベースのフレームワーク SSR（サーバーサイドレンダリング） SPAモード（SSRしないモード） 静的ファイル生成！ https://nuxtjs.org/guide
10. nuxt generate Nuxt.jsが提供するコマンド 静的ファイル生成 関数を使って動的ルートにも対応 データをページコンポーネントに渡すことが可能 https://nuxtjs.org/api/configuration-generate
11. ２通りの方法で作ってみました A B
12. PLAN A の概要 PLAN A の概要 静的ファイル生成の設定で 動的ルートを生成しつつ 記事情報をページコンポーネントに渡す
13. PLAN A PLAN A 記事 Nuxt.js設定ファイル（nuxt.config.js） ルート生成 記事情報処理 nuxt generate HTML
14. PLAN A のいいところ PLAN A のいいところ 静的サイトは生成できる
15. nuxt generate --watch
16. そのようなオプションはありません
17. 静的ファイル生成ではコードの変更を監視して 自動的に再生成する機能はない
18. A ボツ
19. PLAN B の概要 PLAN B の概要 記事情報を提供するコンテンツサーバーを用意し ページコンポーネント内で記事情報を取得 Nuxt.jsの開発サーバーが使える
20. PLAN B PLAN B Nuxt.js設定ファイル （nuxt.config.js） 記事 コンテンツサーバー ページコンポーネント 記事一覧 記事本文 日付...etc ルート生成 nuxt generate （静的サイト生成） nuxt （開発時） HTML
21. PLAN B のいいところ PLAN B のいいところ 静的サイトは生成できる コードの変更を監視できる サイトを確認しながら記事を書ける
22. PLAN B の気になる点 PLAN B の気になる点 手元に記事ファイルがあるのに コンテンツサーバーを立てている？ サイト生成時のみ使うコードが ブラウザ用にもバンドルされる（Aも同様）
23. B ボツ
24. Vue Server Renderer と Webpackプラグイン を使って作ってみる
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/
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/
27. PLAN C の概要 PLAN C の概要 ルート生成 記事情報の取得と処理 静的ファイルの保存 上記やその他もろもろWebpackプラグインで実装
28. PLAN - C PLAN - C 記事 Webpackプラグイン ルート・記事情報の取得と処理 HTML描画 HTML 編集の監視 index.js webpackビルド
29. PLAN C のいいところ PLAN C のいいところ 静的サイトは生成できる 各種監視できる 静的サイト生成に関するコードは バンドルに含まれない 最終的にこの方法で作りました
30. やったー！
31. Vueで静的ブログ制作のまとめ Nuxt.jsはオーバスペックかもしれない Webpackプラグインで作るのがよさそう
32. 静的ブログ自作の課題 記事読み込み処理の省メモリ化 ブログに関する様々な機能の実装 （次・前の記事へ...etc）