VuePressのブログテーマ使ってみた。

InkoHX

2020/06/29

このブログで既に使用しているのだが、簡単なうえにシンプルでなかなか良かったので紹介

# Markdownで書ける

何よりこれ、タイトル、Date、タグがMarkdown内でYAMLで書けるのはいいと思いました。

私が前に作ったブログ (opens new window)より何倍も良いと気付いてしまったので、VuePressのブログテーマを使用したものに切り替えました。

Vercelのビルドパイプラインに、ファイルの作成日と変更日を渡せないという理由で、記事やタグの作成日や変更日をGitのログから取得し、Markdownファイルに上書きするという工程が必要になり、かなりめんどくさいことになっていたので切り替えて良かったと思います。

config.jsで簡単に設定はできるし、stylesにCSS書くだけでサイトのデザインも簡単に変更できる。

さらには、コンポーネントの上書きもできますよね。

楽すぎる、良い...良いぞ

RSSの配信も簡単にできる。内部ではvuepress-plugin-feed (opens new window)を使用しているそうだ。

config.jsのthemeConfigに下記のようにコードを追加することで、RSSの配信ができる。

module.exports = {
  themeConfig: {
    feed: {
      canonical_base: 'https://example/com'
    }
  }
}

サイトマップの作成も簡単にできる。内部ではvuepress-plugin-sitemap (opens new window)を使用しているそうだ。

config.jsのthemeConfigに、下記のようなコードを追加するだけで、サイトマップの作成を行ってくれる。

module.exports = {
  themeConfig: {
    sitemap: {
      hostname: 'https://example.com'
    }
  }
}

PWA (Progressive Web Application) への対応も非常に簡単

config.jsのthemeConfigに、pwa: trueと追加するだけで、Service Workerを作成してくれる。

内部では公式の@vuepress/plugin-pwa (opens new window)を使用しているようだ。

module.exports = {
  themeConfig: {
    pwa: true
  }
}

といったものがある。興味はあるが私が使うまでここでの説明はしないでおく