当サイトで使用している技術【VuePress編2】~インストールから記事作成まで~
当サイトはVuePress で作成されています。 前回のVuePress編1では、VuePressについての基本事項や、その他の選択肢について扱いました。 今回のVuePress編2では、インストールから記事作成までの説明をします。
手順
- Node.jsのパッケージ管理ツール（npmまたはyarn）をインストール
- VuePressプロジェクトを作成する
- VuePressをインストール
- 記事を書いてみる
- 公開用の静的サイトを作成する
1. Node.jsのパッケージ管理ツールをインストール
今回はnpmを使用します。 Homebrew（Macのパッケージマネージャー、いろいろインストールしてくれる便利なソフト）でNode.jsをインストールすると、パッケージ管理ツールnpmも自動でインストールされます。 Terminalで、
npm --version
と打って、バージョンが表示された場合は次の2に進んでください。
バージョンが表示されない（Node.jsがインストールされていない）場合は、
brew install node
と打てば、Node.jsとnpmがインストールされます。brewをインストールしてない場合は、「brew インストール」で検索すれば、いくらでも解説記事があるので、そちらを参照してください。
2. VuePressプロジェクトを作成する
プロジェクトを作成したいディレクトリに移動して、VuePressプロジェクトを作成します。 まずは、適当にプロジェクト名を決めてディレクトリを作成し、作成したディレクトリに移動してください。このデモでは、プロジェクト名をvuepress_sampeleとします。
mkdir vuepress_sampele
cd vuepress_sampele
3. VuePressをインストール
続いて、npmを利用してVuePressをインストールします。vuepress_sampeleというプロジェクトでnpmを使ってパッケージ管理をすることを宣言します。 （いろいろ聞かれると思いますが、あとから変更できるので、とりあえずエンター連打で大丈夫です。答えられるものがあれば、自由に記入しても問題ありません。）
npm init
package.jsonというファイルが生成されました。そして、いよいよVuePressをインストールします。
npm install vuepress
これで、サイト作成の準備が（ほぼ）整いました。
4. 記事を書いてみる
vuepress_sampeleディレクトリ直下に、srcというディレクトリを作成し、index.mdというマークダウンファイルを作成してください。 これをTerminal内で完結させる場合は、
mkdir src
echo '# Hello VuePress' > src/index.md
これですべての準備が整いました。試しに、
vuepress dev src
と打ち、http://localhost:8080/にアクセスしてみてください。問題がなければ、Hello VuePressと表示されます。
また、http://localhost:8080/about/というURLにaboutページを設置したい場合は、src/about/index.mdのように、src直下にaboutというディレクトリを作成し、index.mdに本文を記載してください。
以後、記事はこのsrc配下に書いていくことになります。
5. 公開用の静的サイトを作成する
公開用のサイトを作成するコマンドは
vuepress build src
です。これで、src配下に src/.vuepress/distというディレクトリが生成され、これが公開用のディレクトリです。
次回のVuePress編3で、検索窓やヘッダーの追加といった、サイトをカスタマイズするための設定ファイルの書き方を説明します。