VuePress
vuepress.vuejs.org
VuePressは，Vue.jsが使える静的サイトジェネレーターです．今回はVuePressを使って，デモサイトをデプロイするまでやります．
準備
さっそく準備をしていきます．
以下のコマンドを実行します．
# create working dir
mkdir vuepress-test
cd vuepress-test
# install VuePress
yarn add -D vuepress
# create index page
mkdir docs
echo '# Hello VuePress' > docs/README.md
package.jsonに以下の記述を追加しましょう．
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
その後，以下のコマンドでbuildやらができるようになります．
# make a dev server
yarn docs:dev
# build static site
yarn docs:build
他のページを作成し，リンクを貼ってみる
まずページを作成します．
cd docs
# 設定ファイル置き場もついでに作成
mkdir .vuepress
echo "# first page" > First.md
echo "# second page" > Second.md
README.mdにリンクを貼るため，以下の記述を追加します．
[First](./First.md)
[Second](./Second.md)
これはマークダウンなので，マークダウンと同じ構文で書けます．
navbarにもリンクを貼るために.vuepress/config.jsを作成し，以下の記述を追加します．
ついでにサイトのタイトルも設定しています．
module.exports = {
title: 'VuePress-Test',
description: 'Just playing around',
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'First', link: '/First.md' },
{ text: 'Second', link: '/Second.md' },
]
}
}
その後，ビルドすると以下のような画面になっていると思います．
fiviconに使いたい画像は，.vuepress/publicに配置しておきます．
そして.vuepress/config.jsに以下の記述を追加します．
head: [
['link', { rel: 'icon', type: 'image/png', href: '/fivicon.png' }],
]
deployについて
www.netlify.com
今回はnetlifyを利用します．
デプロイのためにあらかじめリポジトリを作成して，pushしておいてください．
対象リポジトリとして，作成したサイトを選択し，Build commandは以下のように設定してください．
yarn add -D vuepress; yarn docs:build
その後，Publish directoryにdocs/.vuepress/distを指定します．
後はデプロイされるのを待って完了です．
まとめ
今回はVuePressを使って，雑な静的サイトを作成しました．
マークダウンで文字を書いていけるので，すごくお手軽感がありますね．
まだcomponentなど，Vue.jsの機能を利用した拡張を行なっていないので，また今度触っていきたいと思います．
