ドキュメントサイトのテンプレート VuePressがよかった

フロントエンド

投稿日

2018年辺りから、vue.js→nuxt.jsあたりに慣れてきて、vue.jsでの開発が増えてきました。 最近はサイトを作るならもうnuxt.js一択くらいの気持ちになってきています。 そんな中、ドキュメントのサイトを作る必要が出てきたので調べていたらVuePressのことを思い出してまた触ってみました。

VuePressとは

Vue.js の 作者であるEvan You 氏が新たに始めた Vue による静的サイトジェネレーターです。 nuxt.jsとの違いはMarkdown によるページの作成が可能なところなど、ブログやドキュメントのサイトを作るのに特化しているところです。 ブログの機能自体は開発中とのことですが、今はまだありません。 個人的にはブログの方はGridsomeに期待しています。

Vue Pressの良いところ

Vue.jsベースだからでしょうが、nuxt.jsと同じような感じで、.vuepress/config.jsの中に設定を書き込むだけでカスタママイズが可能です。 やはり一番の良さは手軽さで、npm install後少し、.vuepress/config.jsを設定するだけでいい感じのドキュメントに特化したサイトが作れるところになります。 ドキュメントとして使いやすい機能は下記になります。
  • Markdownの使用が可能
    • Markdown 内部でもVue.jsが使用可能
  • サイドバーにリンクが自動でつく
    • 見ているページのhedding の表示もされるので見やすい
  • 静的ページなのでWordPressと違いセキュリティの心配が少ない
  • 静的サイトなのに検索ができる(ページのタイトルのみですが。。)
使ってみたわかったのですが、静的サイトとしてデプロイできるので、netlifyを使うとサブドメインでも運用が可能なので手軽にサイト公開ができます。 もちろんgitで管理ができているので、あのサイトのデータどこだっけ?みたいな事はありません。 作って放置できる安心感は強いです。

使い方/始め方

下記の記事がかなりまとまっているので、こちらの参考に始めるのをオススメします。 VuePress入門 webサイト制作環境が変わる!VuePress入門 今後私も詰まった部分とかは追記していくと思います。

今後どう使っていく予定か

仕事で使うというよりは、何かサクッとサイトが必要なときにドキュメントや共有情報ようのサイトとして活用する予定です。 ちょっとしたノウハウの共有や勉強会のハンズオンサイトには結構使いやすいと思います。 ※LPのように縦長だとみんな結構話聞かずに進めてしまうので…。 一旦Webサイトの公開時用のチェックリストをVeuPressで作ってみて肌感やカスタマイズとかを見ていく予定です。