# ブログをWordPressからVuePressに変更したので導入の備忘録

Tags: VuePress vue メモ

ブログを完全にMarkdownで書きたかったのと、アイキャッチ作るのが面倒くさくなったので、WordPressからVuePressにブログシステムを変更しました。

自分が作ったデザインも猛烈にダサかったので、記事を載せるだけならシンプルなデザインでいいやという思いもありました。

今回はVuePressの導入でハマった箇所や設定についてメモしていきます。

# VuePressとは

Vue.js製の静的サイトジェネレータです。

有名所だと React.jsをベースにしたGatsbyや、Node.js製のHexoがあります。

私は Vue.js しかまともに触ったこと無いのでVuePressを選択しました。

• VuePress

恐らく普通にググると v0系のVuePressのドキュメントがヒットしますが、私はv1系を使うことにしました。

# 構築環境

私の開発環境は下記です。

• Node.js
  • v8.10.0
• Yarn
  • v1.17.3
• VuePress
  • v1.0.3

ちなみに、VuePressは Node.jsのv8.6以上 で動きます。

# FontAwesome

アイコンフォントはブログで使いたい場合が多いと思ったのでインストールしました。

また、Markdownで使うには markdown-it-fontawesome というパッケージも必要なので併せてインストールします。

• Using a Package Manager | Font Awesome
  • v5.10.1
• markdown-it-fontawesome
  • v0.3.0

# フリー版の Font Awesome と markdown-it-fontawesome をインストール
$ yarn add --dev @fortawesome/fontawesome-free markdown-it-fontawesome

# 設定

markdown-it-fontawesome は .vuepress/config.js の extendMarkdown に設定を追加します。

module.exports = {
  extendMarkdown: md => {
    md.use(require('markdown-it-fontawesome'))
  },
}

続いて、FontAwesomeは .vuepress/enhanceApp.js に importします。

import '@fortawesome/fontawesome-free/css/all.css'

export default ({Vue, options, router, siteData}) => {
  // とりあえず今はここに何も書かなくて良い
}

# 使い方

フリー版では恐らく Brands Style (fab) か Solid Style (fas) の二種類が使えます。
※全部調べたわけではないがたぶん合ってます

書き方は下記のような感じでMarkdownに書いていきます。

• :fab-twitter:
• :fab-facebook-f:
• :fas-cat:

# Google Analytics

正直、Google Analyticsのダッシュボードを見に行くことなんてほとんどないですが、WordPress時代でも導入していたので一応…。

公式プラグインが提供されているのでそちらを使います。

• Google Analytics Plugin | VuePress
  • • v1.0.0-rc.1

$ yarn add -D @vuepress/plugin-google-analytics@next

# 設定

.vuepress/config.js の plugins に追加します。

module.exports = {
  plugins: [
    [
      '@vuepress/google-analytics',
      {
        'ga': '' // UA-00000000-0
      }
    ]
  ]
}

# sitemap.xml

WordPressのときはそれっぽいプラグイン（忘れた）で自動で作成していてくれたはずですが、VuePressでもビルド時に自動で吐き出してくれるプラグインがあるのでそちらを使います。

• vuepress-plugin-sitemap - npm
  • v2.1.2

$ yarn add vuepress-plugin-sitemap

# 設定

.vuepress/config.js の plugins に追加します。

module.exports = {
  plugins: [
    [
      'vuepress-plugin-sitemap',
      {
        hostname: 'https://example.com' // ここにサイトのURLを設定する
      }
    ]
  ]
}

# Google AdSense

AdSenseの導入が一番ハマりました。

まずは Vue Google Adsense と VueScript2 という２つのライブラリを導入します。

$ yarn add vue-script2 vue-google-adsense

• Vue Google Adsense
  • v1.7.0
• VueScript2
  • v2.1.0

何個か参考サイトをググったのですが、載っていた方法だとビルド時にwindowオブジェクトでエラー吐いたので困りに困ってTwitterで呟いたところ @tacckさんに方法を教えていただきました、本当にありがとうございました。

# enhanceApp.js

vue-script2 と vue-google-adsense を下記のように enhanceApp.js へ追加するとビルドが正常に走りました。

export default ({ Vue, options, router, siteData }) => {
  if (typeof window !== 'undefined') {
    import('vue-google-adsense').then(module => {
      const Ads = module.default
      Vue.use(require('vue-script2'))
      Vue.use(Ads.Adsense)
      Vue.use(Ads.InArticleAdsense)
      Vue.use(Ads.InFeedAdsense)
    })
    .catch(e => {
      console.log(e)
    })
  }
}

# VuePressにしてみた感想

表示がめっちゃ早いです。

管理画面にログインせずに投稿できるのも素晴らしいです。

前々からやろうやろうと思っていたけど、やっていなかったのが悔やまれるほどです。

以上です。