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

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

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

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

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

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

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

Nuxt.jsで作ってみる

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

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

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

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

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

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

nuxt generate --watch

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

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

A ボツ

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

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

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

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

B ボツ

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

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/

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/

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

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

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

やったー！

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

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

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

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

Naruto

Other Decks in Programming

Featured

Transcript