VuePress
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' },
]
}
}
その後，ビルドすると以下のような画面になっていると思います．
faviconについて
fiviconに使いたい画像は，.vuepress/publicに配置しておきます．
そして.vuepress/config.jsに以下の記述を追加します．
head: [
['link', { rel: 'icon', type: 'image/png', href: '/fivicon.png' }],
]
deployについて
今回はnetlifyを利用します．
デプロイのためにあらかじめリポジトリを作成して，pushしておいてください．
対象リポジトリとして，作成したサイトを選択し，Build commandは以下のように設定してください．
yarn add -D vuepress; yarn docs:build
その後，Publish directoryにdocs/.vuepress/distを指定します．
後はデプロイされるのを待って完了です．
まとめ
今回はVuePressを使って，雑な静的サイトを作成しました． マークダウンで文字を書いていけるので，すごくお手軽感がありますね．
まだcomponentなど，Vue.jsの機能を利用した拡張を行なっていないので，また今度触っていきたいと思います．
