Vuepress で生成したWebサイトを Now にデプロイしてみる

Vuepress とは

Vuepress とは Vue で作られた静的サイトジェネレータのこと。静的サイトジェネレータといえば有名どころは

jekyll
Hugo などが挙げられる。 Vueで静的にサイトを作るのなら Nuxt.js でも良さそうにも思えるが、Vuepressは技術文書を静的に管理することに焦点を当て作成している。 why-not

Vuepress インストール

下記コマンドでインストールできる。

$ npm install -g vuepress

Vuepress を使ってみる

Vuepress はREADME.mdを起点にサイトを生成するようになっている。実際にどのように動作するか下記のREADME.mdを作成して確認する。

# h1
## h2
### h3
#### h4
##### h5
Headers

## List

* Item 1
* Item 2
* Item 3
 + Item 3-1
 + Item 3-2

## Link
[Vuepress](https://vuepress.vuejs.org)

README.mdのあるディレクトリで下記コマンドで動作を確認できる。

$ vuepress dev

HTMLファイル等を生成するには下記コマンドを入力する。

$ vuepress build

Now とは

Nowとは簡単にWebアプリをデプロイできるサービスのこと。 CLIからコマンド一回でデプロイすることができる。今回作成したサイトをさくっと公開するために使ってみる。このデプロイの仕方はNow公式でも書かれている。 nowコマンドの使い方

nowコマンドをインストール・ログイン

nowにデプロイするためにnowコマンドをインストール

$ npm install -g now

次にNowを使うためにアカウントを登録する。サインアップ

登録が済んだら下記コマンドを入力しCLI上でログイン

$ now login

メールアドレスを入力した後に届くメールのリンクを踏めばログインは完了する。

デプロイ

デプロイをするにはコードをNow側でビルドしてもらわないといけない。なのでビルドできるように依存関係を書く必要がある具体的にはREADME.mdを書いたディレクトリでVuepressをインストールする。

$ npm install vuepress --save-dev

次に下記内容のpackage.jsonを同じディレクトリに用意する。

{
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build",
    "now-build": "npm build && mv .vuepress/dist dist"
  }
}

dev,buildでvuepressのコマンドを呼べるようにしている他、now-buildという項目を定義している。 now-buildはnowコマンドで静的サイトを公開する設定にしていると呼ばれる。ここではvuepressで生成したファイルをdistディレクトリに移すようにしている。

次にnow.jsonというnowコマンドの設定ファイルを用意する

{
  "version": 2,
  "name": "vuepress",
  "builds": [
    { "src": "package.json", "use": "@now/static-build" }
  ]
}

versionはnowコマンドのバージョン。 nameはデプロイする時に使用する名前。 buildsはnowコマンドでデプロイする際、ビルドするかしないか、ビルドする際はどのように公開するかを定義する項目となっている。 now.jsonの詳細な解説はドキュメントを参照すると良い。

これらを揃えた状態で下記コマンドを入力するとURLが出力される。

$ now

ビルドが無事に済めば下記のように公開される。 https://vuepress.famasoon.now.sh/

Vuepress とは#

Vuepress インストール#

Vuepress を使ってみる#

Now とは#

nowコマンドをインストール・ログイン#

デプロイ#