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/