# VuePress でブログ作ってみた

• VuePress
• 備忘録

VuePress 1.x

# 久しぶりにブログを作ってみよう！

Qiita や note に書くことも考えたけど、どうせなら技術的な知見も深めたいので、久しぶりにブログを作ることにした。最初は Nuxt で作ろうかとも思ったのだけど、もっとお誂え向きな VuePress という Vue 製の静的サイトジェネレーターがあることが分かったので、VuePress を採用してみることにした。

今回採用したのは VuePress 1.x 系。
ネットで VuePress を検索するとよく引っかかってくるのは 0.x 系 についての情報が多く、1.x 系で変わっている点もあり、けっこう躓いてしまった。（ちゃんと公式ドキュメント読め、って感じだけど、間違えて 0.x のドキュメントを読んでしまいましてね...😱 1.x 系での変更点に気が付かず、「できねー！なんで！？」 ってなりましたw）

# VuePress 1.x

# markdown の自動リンク設定

.md 内の URL を自動でリンク化するためには、extendMarkdown オプションで linkify を true に設定します。
0.x 系は markdown.config でしたが、1.x 系で markdown.extendMarkdown に変わっていることに注意。

// .vuepress/config.js
module.exports = {
  markdown: {
    extendMarkdown: md => {
      md.set({ linkify: true })
    }
  }
}

今のところ、下記のように markdown: {} の外に出した書き方でもいけるみたい。

// .vuepress/config.js
module.exports = {
  extendMarkdown: md => {
    md.set({ linkify: true })
  }
}

ref: Config Reference | VuePress 1.x
ref: markdown.config | Migration from 0.x | VuePress 1.x

# カラー変更

デフォルトテーマのカラーリング変更は、0.x 系では .vuepress/override.styl で行えたが、1.x 系では .vuepress/styles/palette.styl で行うように変わりました。
デフォルトテーマで変更できるカラー変数は下記のようになっています。

$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc

ref: Default Theme Config | Migration from 0.x | VuePress 1.x

# Google Analytics の設置

0.x 系では ga オプションにトラッキング ID を指定するだけで OK だったが、1.x 系ではスタンドアローンなプラグイン @vuepress/plugin-google-analytics として分離されたため、設定方法が変わった。

// .vuepress/config.js
module.exports = {
  plugins: [
    ['@vuepress/google-analytics', {
      ga: 'UA-XXXXXXX-X'
    }]
  ]
}

ref: ga | Migration from 0.x | VuePress 1.x

# @vuepress/plugin-google-analytics について

@vuepress/plugin-google-analytics で埋め込まれるコードは analytics.js を利用したものになっている。gtag.js や gtm.js ではないので、その点は少し注意した方がいいかもしれない。

また、このプラグインは afterEach でトラッキングデータを送信している関係で、本来とは違ったページタイトルでデータを送信してしまうことがある。
これは、

1. afterEach フック実行（← ここでトラッキングデータ送信）
2. DOM の更新発生
3. vue-meta によるページタイトル、meta タグの更新

という実行順序になっていることが原因のため。
間違ったページタイトルで記録されてしまうのが気になる場合には、遅延処理を入れるなどの修正をした方が良いです。

とりあえず、このブログでは @vuepress/plugin-google-analytics を使わずに、ちゃちゃっとプラグイン書いて、gtag.js に差し替えつつ、ページタイトル誤送信問題を解決することにしました。
それについては、気が向いたら詳しく書くかもしれない 🙄

続く...