VuePress の導入&テストサイトを作ってみた

WordPress 以外でブログサイトを作成できないか探したところ、静的サイトジェネレータ「VuePress」を見つけた。記事も色々見つけた。
「VuePress」を使ってやったことは以下のとおり。これからVuePress を触ってみようと考えている人向け。

- プロジェクトの立ち上げ、設定ファイルの定義
- ページ作成、ナビゲーションとfavicon の追加
- ビルド



## 静的サイトジェネレータ
Markdown などで書かれたファイルを基に、静的コンテンツのみのテンプレートでビルドを行い、Web サイトを作成するためのWeb サイト作成用のフレームワーク。
メリットとしては、データベースを必要とせず、静的ファイルのみでサイトを作成できるため、メンテナンスコストを削減できる。また、Web サイトの読み込み速度が向上することが挙げられる。

## VuePress
Vue.js で作られた静的サイトジェネレータ。([公式サイト](https://vuepress.vuejs.org/))

## 開発環境
- OS: Ubuntu 19.04
- Node.js: v11.12.0

「VuePress」の公式サイトによると、Node.js のバージョンは8以上を求めているので、8以上をインストールすること。

## プロジェクトの立ち上げ
ここでは、ディレクトリの構成、package.json、config.js の設定、トップページの作成、作成したトップページをブラウザで確認するところまでを書く。
### ディレクトリ構成
「VuePress」を導入するにあたり、「blog」というディレクトリを作成(ディレクトリ名は任意)。「blog」配下は、以下のディレクトリ構成とした。

```
.
├── dist                // build したファイルの格納先(config.js で指定)
├── node_modules
├── package.json
├── src
│   ├── .vuepress
│   │   ├── components　// コンポーネントの格納先
│   │   ├── config.js  // VuePress の設定ファイル
│   │   └── public     // favicon 等画像ファイル格納先
│   ├── about          // about ページの格納先
│   │   └── index.md
│   ├── blog           // ブログ記事 の格納先
│   └── index.md       // トップページファイル
└── yarn.lock
```
今回は、「src」というディレクトリにトップページやブログの記事ページのファイルを格納する。
VuePress を動かすのに必要な設定ファイルやコンポーネントは、「.vuepress」配下にディレクトリを作成し格納する。

### package.json
package.json の設定は以下のとおり。```yarn add -D vuepress``` でインストール、scripts に```yarn dev```、```yarn build``` コマンドを記述。「src」内に設定ファイルやページファイルを格納しているため、dev、build コマンド内で「src」を指定している。
name、description、author の値は任意で。

```package.json
{
  "name": "blog",
  "version": "1.0.0",
  "description": "Web Site",
  "main": "index.js",
  "author": "shimisunet",
  "license": "MIT",
  "devDependencies": {
    "vuepress": "^1.0.4"
  },
  "scripts": {
    "dev": "vuepress dev src",
    "build": "vuepress build src"
  }
}
```
### config.js
VuePress の設定ファイル。立ち上げに必要な設定は以下のとおり。title はWeb サイトのタイトル、description はWeb サイトの説明。お好みで。

```config.js
module.exports = {
    title: 'shimisu.net',
    description: 'shimisu.net site.'
}
```

### トップページ作成
「blog/src」内に、コマンドでトップページを作成(コマンドでなくてもよい)。

```.zsh
echo 'Hello, VuePress' > index.md
```

### 確認
Web ブラウザで「localhost:8080」にアクセス。
以下のような画面が表示されたらok。トップページができた。左上にサイト名が表示される。
![Screenshot from 2019-09-08 15-01-29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215372/00c9c5c8-28a1-b613-4851-13a0d38901d7.png)

## 少しWeb サイトっぽくする
ページの追加、ナビゲーション、favicon の付け方についてを書く。nav 内のtext にリンク文字、link にリンク先を定義する。

### ページの追加、ナビゲーションの作成
about ページを追加する。
1. 「src」に「about」ディレクトリを作成後、そのディレクトリ内にindex.md を作成(内容はお好みで)。
2. config.js にナビゲーションの設定を追加する。記述方法は以下のとおり。

```config.js
    themeConfig: {
        nav: [
            { text: 'Home', link: '/' },
            { text: 'About', link: '/about/' },
        ]
    }
``` 
ブラウザで確認。右上ナビゲーションができた。
![Screenshot from 2019-09-08 15-27-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215372/0ddf6ede-e122-7452-0581-3fda500f0044.png)
「about」ページにアクセスできた。
![Screenshot from 2019-09-08 15-28-34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215372/acc57a04-a990-49c6-9726-7439cf2ea596.png)

### ナビゲーションのドロップダウンリスト
ナビゲーションをドロップダウンリストにすることが可能。
先程のconfig.js に追記。items でドロップダウンリストができる。

```config.js
    themeConfig: {
        nav: [
            { text: 'Home', link: '/' },
            { text: 'About', link: '/about/' },
            { 
              text: 'Link',
              items: [
                  { text: 'Twitter', link: 'https://www.twitter.com/' }
              ]
            }
        ]
    }
```
画面はこんな感じ。link にカーソルをあてると、item で記述したリンクが表示される。
![Screenshot from 2019-09-08 15-35-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215372/dd90f159-366c-7e7c-5e79-101907f4bbb0.png)

### favicon
favicon を追加するには、head を以下のように記述する。尚、画像は「public」に格納する。

```config.js
    head: [
        [ 'link', { rel: 'icon', type: 'image/png', href: '/favicon.png' } ]
    ]
```
画面。青い丸のfavicon がついた。
![Screenshot from 2019-09-08 15-40-58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215372/63e1c876-8c9c-bf7c-e359-806318001972.png)

## ビルド
ビルドは、```yarn build``` で可能。デフォルトでは「.vuepress」内に「dist」というディレクトリができる。
config.js でビルド先を指定することもできる。dest で設定可能。今回は「blog」直下に作った。

```config.js
module.exports = {
    title: 'shimisu.net',
    description: 'shimisu.net site.',
    dest: 'dist'
}
```

## 終わりに
個人的に触っていて面白かった(語彙力)。
序の口しか触っていないので、これから少しずつ勉強予定。

## 参考文献
公式
https://vuepress.vuejs.org/

ありがとうございました。
https://qiita.com/dojineko/items/aae7e6d13479e08d49fd
https://www.nxworld.net/services-resource/hello-vuepress.html