VuePressはMarkdown作成に特化した静的サイトジェネレーター

データベースが不要で、一般的に読み込み速度も早いと言われる静的サイトジェネレーター。

汎用的に使えるものからシンプルに使えるものまで、オープンソースで色んなのがあります。

その中でも今回はVuePressという静的サイトジェネレーターを使ってみました。

環境構築も楽でMarkdownなので、簡単なマニュアルやメモ書きには重宝するかも。

VuePressとは!?

Vueを作られたEvan Youさんが始めた静的サイトジェネレーターです。

出来ることはMarkdownによるページ作成!!

公式に記載されている内容を抜粋。

・技術文書に最適化されたビルトインのMarkdown拡張

・Markdown内部でのVue活用

・Vueにより強化されたカスタムテーマシステム

・PWAのサポート

・Google Analyticsの統合

Markdown内でVueを使えるので、Vueを使い慣れている方にはアリ。

VuePressを使う理由

そんなVuePressですが、Nuxt.jsと被ってない!?と指摘される方もいます。

TaNA
あまりNuxt.jsを知らなかったのですが、こちらもVueを拡張しており、色んな機能(Babel・サーバー・コンパイラ・Webpack等)が標準搭載され、これ一つで開発が出来るとか。勿論静的サイトジェネレーターも実装済み。

確かにNuxt.jsでいいのでは!?と思いつつも、公式では以下のように紹介。

Nuxt is capable of doing what VuePress does, but it is designed for building applications. VuePress is focused on content-centric static sites and provides features tailored for technical documentation out of the box.

(Nuxt は VuePress の機能を満たしていますが、Nuxt はアプリケーションを作成することを主軸にデザインされているところが異なります。VuePressは、コンテンツを主軸に置いた静的サイトの作成にフォーカスし、技術文書の作成にぴったりの革新的な機能を提供します。)

VuePressはMarkdownでの文書提供に特化しているようです。

5分で環境構築

Nodeが導入済みであれば、環境構築は5分くらいで出来ます。

package.jsonに以下追記。

dev環境実行とビルドは以下で実行。

サイドバーやフロントページもMarkdownで実現可能。

サイドバー表示

まずはconfig.jsを新規作成。

config.jsに以下を追記。

装飾デザイン

以下のように記述すればカスタムコンテナが利用できます。

絵文字の利用も可能みたいです。

EMOJI CHEAT SHEET

GitHub Pagesにホスティング

そーいえば最近Githubへのホスティングが随分楽になりました。

以前まではgh-pagesのブランチを使っていましたが、masterのみで可能に!!

masterにdocsフォルダを作れば、Webページとして公開できます。

こちらの記事が参考になりますね。

GitHubのmasterブランチをWebページとして公開する手順

早速サンプルで作ってみたページを公開!!

my-utility