VuePressを使ってみた（インストールから初期設定まで）

## VuePressインストールから初期設定まで

```
yarn add -D vuepress 
# OR 
npm install -D vuepress
```
上記コマンドでVuePressをインストール。
yarn、npmどちらも可能ですが、yarnが推奨のようです。
続いてdocsディレクトリとマークダウンファイルを作成します。

```
mkdir docs #docsフォルダを作成
echo # Hello VuePress!　> docs/README.md　　#マークダウンファイルの作成
```
VuePressはマークダウンで記述していきます。docs/README.mdがTopページです。

VuePressをインストールした時にpackage.jsonファイルが生成されているので下記のように修正します。

```js:package.json
{
  "devDependencies": {
    "vuepress": "^1.2.0"
  },
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

```

これでサーバーを立ち上げることができるので、下記のコマンドを実行します。

```
yarn docs:dev
#OR 
npm run docs:dev
```

`http://localhost:8080/`にアクセスします。

![vuepress.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/c6977216-a9ad-fbc9-0409-0dfe40bbebbe.png)

無事にdocs/README.mdの内容が表示されました。

続いて下記のコマンドを実行し静的アセットをします。

```
yarn docs:build
#OR 
npm run docs:build
```
docsディレクトリ内に.vuepressディレクトリが生成されます。

![vuepress path.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/d140c1d6-52ce-9346-1ad4-c9fc27f4c7b2.png)

現在のディレクトリ構成は上記の通りです。
続いて.vuepressディレクトリの直下にconfig.jsを作成します。

```
.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json
```
config.jsでは色々な設定をすることができます。

```js:config.js
module.exports = {
    title: 'Demo VuePress', 
    description: 'VuePressデモ' 
}
```
![vuepress title.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/8d770efd-71e3-15b1-df26-42bc4ed74c4d.png)
サイトタイトルやディスクリプションの設定をおこないました。

続いてページを増やしていきます。

![vuepress f.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/b861f5ea-5c8a-078e-59fa-f117f4b80f22.png)

それぞれのページにアクセスできるようにサイドバーやナビゲーションを作っていきます。

```js:config.js
module.exports = {
    title: 'Demo VuePress',
    description: 'VuePress Demonstration ',
    themeConfig: {
        nav: [
            { text: 'Top', link: '/' },
            { text: 'About', link: '/about/' },
            { text: 'Contents1', link: '/contents1/' },
            { text: 'Contensts2', link: '/contents2/'}
          ],
        sidebar: [
          '/',
          '/about/',
          '/contents1/',
          '/contents2/'
        ]
    }
}
```
config.jsにサイドバーなどの設定を記述できます。
![vuepress navi.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/ceaba92d-de19-7cc0-13a5-f44b0eadccc8.png)
config.jsで設定を記述するだけど、サイドバーやナビゲーションが簡単に生成できました。

また、一部のスタイルやカラーは変数を指定するだけで変更可能です。
.vuepress/styles/palette.stylを作成して変数を指定して変更します。

```styl
// colors
$accentColor = #79A1D4
$textColor = #454545
$borderColor = #eaecef
$codeBgColor = #FFEED5
$arrowBgColor = #79A1D4
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961
$navbarBgColor = #79A1D4

// layout
$navbarHeight = 5rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px

// responsive breakpoints
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

```

## 各ページはMarkdownによる記述

VuePressはMarkdownで記述します。

```md:index.md
---
title: About
description: About me
date: 2019-01-28
category: 自己紹介
sidebar: false
tags:
  - 自己紹介
  - ブログ
---
[[toc]] 

# about me

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
 sunt in culpa qui officia deserunt mollit anim id est laborum.

## 見出し2

### 見出し3

## 見出し2

```
ファイルの最初にページの設定を記述することができます。
そのページのみサイドバー非表示なども設定可能です。

[[toc]] は見出しの表示です。

![tip.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559347/9a786083-4dbe-2885-cc77-bd0481c0e278.png)

```md

::: tip タイトル
本文
:::

::: warning タイトル
本文
:::

::: danger タイトル
本文
:::
```
上記のボックスも簡単に作成可能です。


静的サイトジェネレーターなのでサクサク動いて良いですね。
ブログ用のテーマもあるみたいなので、VuePressを使ったブログも作ってみようかな...。