triBlog

トリアナのブログ。

【静的サイトジェネレータ】WordPress不要!2020年注目のVuePressの特徴をまとめてみた

2020.1.10
新年から構築方法を書くのは面倒だったので、特徴だけまとめてます。
ライター画像
おくだ

みなさんは静的サイトジェネレーターって聞いたことありますか。

将来、WordPressに代わる存在になるのでは……とWEB業界で囁かれてる技術なんです。

今回はそんな静的サイトジェネレータの中でも、Vue.jsで構築するVuePressをご紹介します!

静的サイトジェネレータとは

将来、WordPressに取って代わる存在

更新可能なWEB制作といえば今でもWordPressが主流です。
WordPressは非エンジニアでも簡単に更新ができる上に、プラグインも豊富です。
しかし、セキュリティ対策を講じる必要があったり、
正しくチューニングしないとサイトが重くなったりしてしまいがちです。

そこで登場したのが「静的サイトジェネレータ」。
PHPを一切使わず、HTML、CSSで構築することで圧倒的な軽さを実現しています。

現在ではそこそこプログラムに精通している人しか扱いづらい状態ですが、
将来的に非エンジニアでも使えるようになればWordPressに取って代わる存在になると思います。

主流な静的サイトジェネレータは5つ

・Gatsby (React.js)
・Hexo (Node.js)
・Jekyll (Ruby)
・HUGO (Go)
・VuePress (Vue.js)

えらい読み方が難しいやつばっかりです。ギャッツビー、ヘクソ、ジキル、ヒューゴ、ビュープレス。
主に構築に必要な言語は()に書いてます。

HUGOってなんの言語だったっけなって調べたらあの出っ歯ネズミが出てきたのですぐGoだとわかりました。
(しかもHUGOの公式サイトにはスーパーマンみたいになってる出っ歯ネズミがいます。)

この中でVuePressを選んだ理由は、ちょび〜とVuePressで遊んだことがあるのと、社内で使う言語がVue.jsだったからです。
ついでにVue.jsで遊んでみた記事のリンクも貼っときます。
大分のWEB業界で大変盛り上がった記事です。(奥田調べ)

VuePressの特徴

VuePressはVue.jsを開発したEvan Youが開発しているので、継続的に開発されていくと思います。
以下がVuePress公式サイトですが、これもVuePressで構築されています。

それでは1つ1つ見ていきましょう。

管理が楽

まさかのDB不要です。

ページや記事などはすべてマークダウン形式で記述し、
それがコマンド1つでHTMLファイルとしてジェネレート(生成)されます。

なので例えばサイトを引っ越しする場合でもマークダウンファイルをコピペして移動させるだけでOK。
「DBとかバックエンドのことはわかんねえや」って人でも安心です。

そして、アップデートも不要っていう。最高じゃん。

セキュリティ的に安心

DBをハックされる心配がありません。だってDBないんだもん。
プライベートリポジトリ作ってGitでファイルを管理してれば記事データ全部そこに入ってるので、
バックアップも必要なし。

データ全部ぶっ飛んだら、過去のコミット参照して掘り起こせばOK。

圧倒的に軽い

これはもう明らかですね。
DBへの問い合わせがない上に、表示するのは純粋なHTMLとCSSのみ。

Google Page Speed Insightsでも100点、99点は当たり前です。

Vue.jsで作ったサイトにjQueryなんて入れるなよ

その他

サイトを作った時点でVuePressオリジナルのシンプルなデザインが適用されています。

が、シンプルすぎてこのまま使うと「絶対VuePressやん」ってバレちゃいますが、
技術メモをブログ化するような目的なら必要十分かと思います。
ちなみにそのデザインがVuePressの公式サイトです。

また、カスタマイズすれば全然問題なくブログも作れますが、
正式にはサポートしていないので今はドキュメントをまとめる用として使われているケースが多いです。

まとめ

なんだかんだVuePressのいいところばかり紹介しましたが、
プラグインがたくさん用意されているWordPressのほうがまだ汎用性は高いです。ドキュメントも多いし。

もっといえばテーマもVuePressは今はかなり少なく、自由度はそんなに高くありません。
しかし、Vue.jsおよびVuePress開発者のEvan Youはブログ機能の開発にも意欲的だそうなので、今後に期待ですね。

 

記事を書いた人

ライター画像
おくだ インターン

インタラクティブ表現とUIを極めたい。自称トリアナの新しい風。ミニマリスト。 常に焦りを感じながら、誰よりも戦略的に成長します。

ライター画像
おくだ インターン

インタラクティブ表現とUIを極めたい。自称トリアナの新しい風。ミニマリスト。 常に焦りを感じながら、誰よりも戦略的に成長します。

ページ上部へ