# VuePressのコンテンツをWordPressから利用する

# 動機

最近、SSG(Static Site Generation)という言葉が多く見受けられるようになりました。少し前はJekyllが目に付きましたが、最近はGastby（+Netlify）が多くなりました。 GasbyはReactを利用したSSGです。VuePressはその名前の通り、VuejsでSSGします。

GastbyはWordPressと組み合わせてたHeadless CMSという構成で運用することができます。 簡単に説明すると、WordPressをバックエンドAPIに見立てて、Gatsbyのフロントエンドから必要なデータを取得し、ページを生成するということのようです。 バックエンドのWordPressへは外部から直接アクセスできないようにすることで、セキュリティが向上することが見込まれているようです。

今後は静的サイトだけでなく、動的サイトの構築にも利用されていくことでしょう。

なんだか複雑で、build&deployが大変そうですが、JAMStackと呼ばれる技術で簡単に行えるようです。

VuePressの方には、まだHeadless CMSとしての利用やJAMStackによる構築のスタンダードはないようですが、Markdown形式で書いたものが、そのままブログとして公開できるのは、すごくありがたいです。 いままで、WordPressで書こうと思っても、なかなか億劫になっていたのですが、この機会に新しい記事を投稿してみようという気になりました。

しかし、サイト全体をVuePressで構築し直すのも、それはそれで大きな手間を伴いますし、WordPressにもいいところはあります。そこで今後の技術系のブログ記事だけ、VuePressで作成してみることにしました。

WordPressとの連携はシステマティックなものではなく、手動で当面行うことにしました。しかし、新しい記事をdeployするのは、shell scriptなりで簡略化できるし、毎日投稿しているわけではないので、今の所はこのスタイルで継続したいと思います。

# VuePressコマンドのインストール

VuePressのGetting Startedページでは、 globalにインストールするように書かれていますが、私はlocalへインストールして、package.jsonのscripsに起動コマンドとして記述して利用する方がよいと思います。

VuePressの標準ブログテーマとGoogle Analyticsのプラグインを利用しています。Awesome VuePressには、色々なVuePress関連のリソースが紹介されています。

# package.json

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "dependencies": {
    "vuepress": "^1.2.0"
  },
  "devDependencies": {
    "@vuepress/plugin-google-analytics": "^1.2.0",
    "@vuepress/theme-blog": "^1.3.2"
  }
}

# ディレクトリ構成

docsという名前のディレクトリに.vuepressを作成し、config.jsを配置しています。yarn run buildすれば、.vuepress/dist配下にコンテンツが作成されます。 ブログ記事のMarkdownファイルは_postsディレクトリにYYYY-M-D-slug.mdという形式で命名します。

docs/
├── .vuepress
│   ├── config.js
│   └── dist
├── _posts
│  └── 2019-10-30-vuepress-wordpress.md
├── node_modules
├── package.json
└── yarn.lock

# VuePressの設定

# .vuepress/config.js

module.exports = {
  plugins: [
    [
      '@vuepress/google-analytics',
      {
        'ga': 'UA-XXXXXXX-Y'
      }
    ],
    [
      '@vuepress/blog',
      {
        directories: [
          {
            // Unique ID of current classification
            id: 'post',
            // Target directory
            dirname: '_posts',
            // Path of the `entry page` (or `list page`)
            path: '/tech/',
            itemPermalink: '/tech/:year/:month/:day/:slug',
          },
        ],
      }
    ],
  ],
}

# VuePressでのビルド

# .vuepress/dist/

yarn run buildで.vuepress/distに以下ようにassetsやhtmlが生成されます。

docs/.vuepress/dist/
├── 404.html
├── assets
│   ├── css
│   │   └── 0.styles.8bcf7c97.css
│   ├── img
│   │   └── search.83621669.svg
│   └── js
│       ├── 2.8b882f45.js
│       ├── 3.2585eec6.js
│       ├── 4.6806c0d5.js
│       ├── 5.910bb372.js
│       ├── 6.f7f3932f.js
│       ├── 7.19532cf5.js
│       └── app.bb0d48ff.js
└── tech
    ├── 2019
    │   └── 10
    │       └── 30
    │           └── vuepress-wordpress
    │               └── index.html
    └── index.html

# VuePressでの開発

VuePressの設定が完了すれば、あとはdocs/_postsへブログ記事を追加し、yarn run devを実行します。 あとは、localhost:8080をブラウザで確認しながら、好きなエディタでMarkdownを修正していくだけです。 Markdownが更新されれば、webpackのHMR(Hot Module Replacement)で即座にブラウザのページが更新されます。

# WordPressサイトへのデプロイ

前出の.vuepress/distの中のassets/とtech/をWordPressのrootディレクトリに複写しています。 だけなんですが、本当は以下のような構成にしたかったのです。

tech/
  ├── assets/
  └── 2019
       └── 10
           └── 30
               └── vuepress-wordpress
                   └── index.html
 

しかし、assetsのパスを変更する方法が今の所わからず、仕方なくこのような構成で公開しています。

WordPressで記事のヘッドラインだけを作成して、「続きを読む」というリンクで、VuePressの記事へリンクしています。 しばらくはこのような形で記事を公開しておこうと思います。