VuePressのブログテーマ（@vuepress/theme-blog）を使ってみた #vuepress

VuePressはデフォルトだとドキュメント向けですが、ブログ向けのテーマがあるようなので使ってみました。
@vuepress/theme-blog（ブログ用テーマ）

VuePress（@vuepress/theme-blog）をインストール

yarn add vuepress @vuepress/theme-blog -D

上記コマンドでインストール。
インストールが完了するとpackage.jsonが作られるので、修正します。

package.json

{
  "devDependencies": {
    "@vuepress/theme-blog": "^2.0.3",
    "vuepress": "^1.2.0"
  },
  "scripts": {
    "dev": "vuepress dev blog",
    "build": "vuepress build blog"
  }
}

続いてblogディレクトリを作成します。
作成後、ビルドすると.vuepressディレクトリが生成されます。

mkdir blog

yarn build
#or
npm run build

@vuepress/theme-blogのディレクトリ構成

@vuepress/theme-blogの推奨のディレクトリ構成は下記のようになります。

├── blog
│   ├── _posts
│   │   ├── 2019-12-17-travel.md #example
│   │   ├── 2019-12-26-lunch.md #example
│   │   └── 2020-1-6-study.md #example
│   └── .vuepress
│       ├── `components`
│       ├── `public` 
│       ├── `styles` 
│       │   ├── index.styl
│       │   └── palette.styl
│       ├── config.js
│       └── `enhanceApp.js` 
└── package.json

各ブログ記事は_postsディレクトリに作っていきます。
ブログの設定はconfig.jsでおこなうのでconfig.jsを作成します。

config.js

module.exports = {
    title: 'VuePress Blog demonstration', 
    description: 'VuePress Blog demonstration',
    theme: '@vuepress/theme-blog',
    locales: {
        '/': {
          lang: 'ja'
        }
      },
    themeConfig: {
        dateFormat: 'YYYY-MM-DD',
        nav: [
            { text: 'Blog', link: '/' },
            { text: 'Tags', link: '/tag/' },
          ],
        footer: {
            copyright: [
              {
                text: 'Privacy Policy',
                link: '',
              },
              {
                text: 'Contact',
                link: '',
              },
            ],
        },
    }
}

今回は上記のように設定しました。
ブログ記事も何件か入れていきます。

yarn dev
#or
npm run dev

上記コマンドでサーバーを起動し確認してみます。

ブログっぽく一覧表示されています。

ブログ用の機能が簡単に作れる

@vuepress/theme-blogは、タグ分けもデフォルトでやってくれるのでとても便利です。
/tag/ディレクトリにタグ一覧も生成されます。ブログには必須機能なので良いですね。

各ページのタグ設定などは、mdファイルのfrontmatterで可能です。

---
title: タイトル
date: 2019-01-01
author: 名前
location: Japan
tags: 
  - 日記
  - 旅行
---

本文

最後に

@vuepress/theme-blogを使うとVuePressでも簡単にブログを作れちゃいますね。
今回作ったものは一応GitHub Pagesにデプロイしているので、良かったご覧ください。
https://to-ko5.github.io/vuepress-blog/

@vuepress/theme-blogは公式のブログ用テーマですが、コミュニティのテーマも結構あるみたいです。
下記でコミュニティテーマの一覧が見れます。
https://github.com/vuepressjs/awesome-vuepress