# VuePressでブログの始め方

@vuepress/theme-blogのガイドに従って初期設定をしていきます。

# インストール

作業用フォルダを作って、yarn で vuepress と公式ブログテーマを追加します。

mkdir my-blog && cd my-blog
yarn add vuepress @vuepress/theme-blog -D

記事を入れる _posts フォルダと、vuepress の設定を入れる .vuepress フォルダを作ります。

mkdir blog && cd blog
mkdir _posts
mkdir .vuepress

_posts に入れた .md ファイルがブログの記事として表示されます。

my-blog
├── blog
│   ├── _posts
│   │   └── 2020-1-1-test.md
│   └── .vuepress
│       └── config.js
└── package.json

config.js を作成して、ブログタイトルとテーマを設定します。

// .vuepress/config.js
module.exports = {
  title: 'らいのブログ', 
  theme: '@vuepress/theme-blog',
}

package.json にビルド対象フォルダを指定します。

// package.json
{
  "scripts": {
    "dev": "vuepress dev blog", 
    "build": "vuepress build blog" 
  }
}

_posts に .md でマークダウンテキストを作成します。

先頭に frontmatter を記入します。

category や tags は、自動でカテゴリー・タグを生成します。

---
date: 2020-9-28
category: プログラミング・IT
tags: 
  - Vue
  - Vuepress
author: rai
location: Tokyo  
---

記事の内容は、一般的なマークダウン形式で、# が記事タイトルになります。

yarn dev

にアクセスすると、ブログが表示されます。