# Hello VuePress

Static Site Generator には色々あるが、VuePress が気になったので試した。ブログ向けの機能はまだ足りていないが、 覚えることが少なくて日本語の公式ドキュメントが充実 している。

# Getting Started

基本的には設定ファイルと Markdown ファイルを置くだけ。サブディレクトリにある.mdあるいは.htmlがルーティングされる。尚、README.mdはindex.htmlに変換される。

yarn global add vuepress
echo '# Hello VuePress' > README.md
vuepress dev
vuepress build

# docs フォルダ

既存プロジェクトにドキュメントとして追加する場合、フォルダを指定できる。

package.json

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

ホームページ用のプロジェクトならindex.htmlのソースはREADME.mdよりindex.mdの方が直感的でわかりやすい。

echo '# Hello VuePress' > docs/index.md
yarn docs:dev
yarn docs:build

# .gitignore

GitHub の Node 用テンプレートをベースにして以下を追加する。

.gitignore

# vuepressのビルド先
docs/.vuepress/dist

# VSCodeの設定
.vscode

# VuePress の設定変更

# アクセントカラー

docs/.vuepress/override.styl

$accentColor = #CC6666

# 言語・タイトル・説明

docs/.vuepress/config.js

module.exports = {
  locales: {
    '/': {
      lang: 'ja',
      title: '奈良のシカ',
      description: '鹿せんべいはおやつ、主食は芝です'
    }
  }
}

# ナビゲーション・サイドバー

docs/.vuepress/config.js

module.exports = {
  themeConfig: {
    nav: [{ text: 'アーカイブ', link: '/archive' }],
    sidebarDepth: 2,
    sidebar: 'auto'
  }
}

# Last Updated

docs/.vuepress/config.js

module.exports = {
  themeConfig: {
    lastUpdated: 'Last Updated'
  }
}

# 行番号・自動リンク

docs/.vuepress/config.js

module.exports = {
  markdown: {
    lineNumbers: true,
    linkify: true
  }
}

# Prev / Next リンク

front matter に書く。

---
prev: ./some-other-page
next: false
---