$30 off During Our Annual Pro Sale. View Details »

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

Naruto
January 21, 2020

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

Naruto

January 21, 2020
Tweet

Other Decks in Programming

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. 2通りの方法で作ってみました 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)