Vuepressの基本的な使い方を入門者向けに解説！基本機能を確認しよう！インストールから初期設定まで紹介。
この記事は静的サイトジェネレータ・Vuepressにスポットライトを当てています。
- Vuepressの基本
- Vuepressの魅力
- Vuepressのデメリット
- VuepressとWordPressとの違い
- Vuepressの導入について
- Vuepressの使い方
そういったVuepressに関することを網羅しています。
Vuepressはブログやサイトを作成している人には見逃せないツールの1つです。
Vuepressには、全世界で最も多くの人が利用しているWordPressにも勝る、ある「利点」があります。
この記事を読むことでVuepressを知らないという人も、その魅力に気づくことができるでしょう。
Vuepressに興味がある方はぜひご覧ください。
Vuepressとは
Vuepressとは具体的にどういったツールなのか知らない人も多いでしょう。
Vuepressは、静的サイトジェネレータです。
開発元
Evan You氏が生み出しました。
Evan You氏はVue.jpの作者でもあります。
利用目的
主に技術ドキュメントを作成するのを想定して作られています。
その他、IT系サイト・ブログなどに使用されることも。
公式サイト自体が見本
VuePressには公式サイトがあるのですが、この公式サイトはVuePressを使って作成されています。
Vuepressと静的サイトジェネレータ
Vuepressを含む「静的サイトジェネレータ」。
Vuepressを語るには、まず静的サイトジェネレータのことを語らねばなりません。
名称
静的サイトジェネレーターは英語で「Static Site Generator(SSG)」といいます。
どんなもの？
Markdownなどで記述されたファイルを基にし、静的なコンテンツテンプレートだけでサイトを作り出すサイト作成のフレームワークです。
静的(Static)サイトとは？
「動的サイト」と反対の趣旨を持つものです。
要は、ソースとして記述したものと表示されるものとが変わらないサイトのことです。
シンプルなHTML・CSS・JavaScriptで構成されたものと思っておいて良いでしょう。
Vuepressの特徴
ここでは、VuePressの特徴についてご紹介します。
マークダウン形式で記述
VuePressの特徴としてあげられるのが「マークダウン(Markdown)」で記述する方式です。
Vue.jsを使ったWebサイトを簡単に作り上げることができます。
Node.jsで動く
VuePressはNode.jsの上で動きます。
VuePressを動かすためにはNode.js 8.6以上が必要とされます。
なお、バージョンアップによってNode.jsのバージョン条件も変化が生じる可能性もあるため、取り入れる時に確認しましょう。
SEOに強い
静的サイトで、シングルページアプリケーションでもSEO的に不利益は生じません。
Vuepressのメリット①管理が非常にしやすい
VuePressはデータベースが必要ありません。
「VuePressの特徴」でも述べたとおり、VuePressの記述はマークダウン形式でおこないます。
それが全てHTMLファイルとして生成されるわけです。
そのため、データベースが不要なのです。
サイト引っ越しの際にもマークダウンファイルをコピーして移行すれば良いだけなので、とても便利。
アップデートする必要もありません。
Vuepressのメリット②軽量である
- データベースへ問い合わせる必要がないこと
- HTMLとCSSのみ表示すること
上記のことからVuePressはかなり軽量です。
CMSなどでサイトやブログを構築している人がVuePressでサイト・ブログを構築すると、その軽さに戸惑うかもしれません。
Vuepressのメリット③セキュリティを気にしなくて良い
通常、サイトやブログを作る時にはセキュリティ対策が必要となります。
ですが、VuePressならデータベースがないのでセキュリティ対策を施さなくても大丈夫。
プライベートリポジトリを作成し、Gitを使ってファイルを管理しておきましょう。
データを全てそこに入れて置けばバックアップの心配も要りません。
Vuepressのメリット④シンプルなデザイン
VuePressでサイトを作ると、VuePress独自のシンプルなデザインが表示されます(VuePressの公式サイトのデザインそのままです)。
シンプルなブログを作りたいならそのまま使うのも良いでしょう。
カスタマイズして好きなデザインのサイトも作ることも可能ですが、正式なサポートはないのが現状です。
Vuepressのメリット⑤管理画面にログインしなくて良い
通常、サイトやブログをCMSを使って管理する場合、管理画面にログインしなければなりません。
しかし、VuePressなら管理画面のログインなしで記事を投稿できてしまいます。
面倒な一手間を削ることができるのは嬉しいところ。
Vuepressのメリット⑥環境が作りやすい
データベースを準備したり実行環境を準備したり。
通常のサイト・ブログ作りは環境構築が億劫なのが正直な気持ちではないでしょうか。
Vuepressを導入すればそんな環境作りの面倒くささから解放されます。
環境構築で手間取ることなく、書きたいことや伝えたいこと、見せたいことに関する作業を集中しておこなうことができます。
Vuepressのメリット⑦コスト削減可能
サイトやブログを運営しようとすると、維持費やプラグインを導入するための費用、サーバー代などがかかるのが一般的です。
それにプラスしてセキュリティ対策費用もかかってきます。
制作会社に委託するのであれば、アップデートだけで料金が発生するところも…。
しかし、Vuepressなどの静的サイトジェネレータはそうした費用が全てフリー。
余分なコストをカットしたいならVuepressを取り入れるべきでしょう。
Vuepressの注意点①プラグインが少ない
VuePressは使いやすいメリットも多いですが、まだ発展途上のツールです。
人気のCMS・WordPressなどに比べてプラグインの種類は圧倒的に劣ります。
ドキュメントもまだまだ少ないです。
Vuepressの注意点②自由度は低め
軽くて簡単にサイトやブログが作れるとはいえ、VuePressのテーマはそれほど豊富とはいえません。
そのため、CMSのような自由度はあまりないと思っておいて良いでしょう。
Vuepressの注意点③情報が少なめ＆複雑なことを導入するのは難しい
情報が少なめなので、つまずいてしまった時に困ってしまう可能性があります。
また、検索機能やコメント欄、関連記事など、複雑なことを導入するのは難しいです。
「Vuepressのメリット」でも説明したとおり、Vuepressはデータベースを持ちません。
そのため、上記のような複雑なことをおこなうのには手間がかかるのです。
もし「どうしてもVuepressで導入したい機能がある」というのであれば、JavaScriptや外部サービスを取り入れる必要があるでしょう。
VuepressとWordPressの比較
この項目では、VuePressとWordPressの違いについてご紹介します。
両者の決定的な違いはなんといっても「表示するスピードの速さ」といっても良いのではないでしょうか。
VuePressは終始一貫して静的ですが、WordPressはユーザーからのリクエストが生じたら動的となってしまいます。
そのため、ページを開く時のスピードはVuePressのほうが速いです。
Vuepressのインストールから初期設定
一通りVuePressのことを理解することができたでしょうか。
次は、いよいよVuePressの導入についてです。
動作環境を確認
VuePressを動かす環境として、Node.jsのインストールが必要になります。
必要とされるNode.jsのバージョンは「Ver 8.6」です。
なお、バージョンは「node -v」で確認できます。
開発用ディレクトリを作成する
まずは開発用ディレクトリを作成しましょう。
- mkdir vp_test
- cd vp_test
プロジェクトの初期化をおこなう
- npm init
enter連打で先に進みます。
VuePressをインストールする
- npm install –save-dev vuepress
公式サイトではグローバルにインストールする方法が載っていますが、ここではローカルにインストールします。
ビルドコマンドの準備
ローカルにインストールしたため、ビルドコマンドを準備しましょう。
「package.json」に下記のコマンドを追加します。
- “scripts”: {
- “dev”:”vuepress dev”,
- “build”:”vuepress build”
- },
環境の準備はこれで完了です。
Markdownファイルを記述する
- # SHIFT
- ## VuePressの基本
- * VuePressとは
- * VuePressと静的サイトジェネレータ
Markdownファイルを開発用ディレクトリのすぐ下に「README.md」というファイル名で置きます。
表示を確認
初期状態のままだとどんなものが表示されるか確認(http://localhost:8080/)しましょう。
- npm run dev
記述が終わったら、ローカル(http://localhost:8080/)で確認。
config.jsの作成
headタグは「./.vuepress/config.js」に記述します。
- module.exports = {
- title: ‘SHIFT’
- }
追加が終わったら再び「npm run dev」で確認です。
Vuepressの基本的な使い方①コマンド
この項目では、VuePressの基本的な使い方を見ていきましょう。
まずは「コマンド」の基本です。
VuePressには3つのコマンドがあります。
dev
ローカルサーバーを立てる際に使うコマンド。
実行したディレクトリはルートディレクトリとして扱われます。
build
ドキュメントを静的ファイルとして生み出すコマンド。
eject
デフォルトテーマを作業ディレクトリに展開するコマンド。
Vuepressの基本的な使い方②日本語に設定
デフォルトではUSになっている言語を日本語に設定してみましょう。
下記のコードを記述してください。
- locales: {
- ’/’: {
- lang: ‘ja’
- }
- }
これで言語が日本語に変更されました。
Vuepressの基本的な使い方③ページの追加
続いて、ページを追加する方法についてです。ページの追加は難しい作業なしでおこなえます。
docsの下に「.mdファイル」を追加しましょう。
これでページの追加ができます。
ちゃんと追加できているかはローカル「http://localhost:8080/about.html」にアクセスして確かめることが可能です。
Vuepressの基本的な使い方④見出し
VuePressで見出しを挿入する方法を確認しましょう。
VuePressで見出しを表示させるには、特定の文字列([toc])を入れる必要があります。
- [toc]
- ## 大見出し 1
- ### 小見出し 1
- ## 大見出し 2
- ### 小見出し 2
- ## 大見出し 3
- ### 小見出し 3
このように入力すれば、見出しの表示が可能です。
Vuepressの基本的な使い方⑤絵文字
Vuepressでは絵文字を使うことも可能です。
「笑顔の絵文字」なら「🙂」。「考え中の絵文字」なら「:thinking:」、「風邪の絵文字」なら「:mask:」。
上記のように記述すると、それぞれに対応した絵文字が表示されます。
まとめ
ここまでVuepressについて様々な視点から解説しました。
必要としていた情報を提供することはできたでしょうか。
Vuepressに関する疑問や悩み、迷いなどを解消する手助けになれたなら幸いです。
Vuepressは静的サイトを作るのに最適なツールです。
これからWordPressに取って代わる存在になるといわれている技術・静的サイトジェネレータ。
そんな静的サイトジェネレータの1つであるVuepressは注目株といえるでしょう。今後、さらなる機能の開発にも期待大です。
少しでもVuepressのことが気になっているのなら、ぜひ一度使ってみて自分に合うツールかどうか試してみましょう。
