このGW中にWordPressで運用していたブログをGridsomeとNetlifyで再構築してリニューアルしました。
ブログ: https://tech.arc-one.jp

今回は再構築する中でハマった点を備忘録がてら書いていきます。

環境構成

リニューアル後の構成は下図になります。

Gridsome
GridsomeはVue.jsを使った静的サイトジェネレーターです。
静的サイトジェネレーターといえばReactベースのGatsby.jsというのが有名ですが、これはそのVue.js版みたいなもので2018年後半に登場した新進気鋭？です。
GraphQLというSQLクエリのようなWeb APIを利用してWordPress等のデータを取得して静的ファイルを生成することができます。
詳しいことは公式サイトにアクセスすることをおすすめします。
Gridsome: https://gridsome.org/

Gridsomeでハマった点を紹介

ここから以降は構築時にちょっとハマった点を紹介します。
これが何らかの参考になると嬉しいです。

ページ遷移時のコードハイライト

技術ブログなのでコードをhighlight.jsというライブラリを使って表示しているのですが、詳細ページから詳細ページへ遷移したときにコードハイライトのライブラリが動作しなかった。

Vue.jsは同一コンポーネントの書き換えはキャッシュされるため、mountedなどの自動実行メソッドが二度目は発火しないというGridsomeではなくVue.jsの仕様を忘れていました。

解決策
watchでrouterを監視し、変更があったら再実行することで回避。

現時点でも解決できていない問題
<pre><code>...</code></pre>というエリアをquerySelectorAllで取得してhighlight.jsのメソッドを叩くようにしているのですが、ビルド時には該当エリアはWordPressのcontextを表示しているため、ビルド時点ではコードが存在しないという警告が出てしまう。

※コードは下記の中で自動展開される
<div class="contents" ref="contents" v-html="$page.wordPressPost.content"></div>

CodePenの表示

コードハイライト同様サンプルをよりわかりやすくするためCodePenを埋め込んでいます。
しかし、これまたVue.jsではテンプレート内に書いた<script>のタグは実行されないという問題が発生。
(これも厳密にはGridsomeの問題ではない)

解決策
コードハイライト同様、watchでrouterを監視し、scriptタグを抜き出しcreateElementで再度生成し、元のscriptタグは念の為削除。
ただし、そのままにしていると遷移するたびに増えるので、挿入したscriptタグをローカル(this.scriptsなど)に記憶しておき、挿入する前に一度削除するという方法で逃げました。

const script = contents.querySelectorAll('script')
const arr = []
script.forEach((elem: Element) => {
  const src = elem.getAttribute('src')
  if (src !== null && arr.indexOf(src) === -1) {
    const tag = document.createElement('script')
    tag.setAttribute('src', src)
    tag.setAttribute('async', 'async')
    tag.setAttribute('defer', 'defer')
    document.head.appendChild(tag)
    arr.push(src)
    this.scriptTag.push(tag)
  }
  elem.remove()
})

詳細ページで前後の記事を表示する

ブログによくある前後の記事リンクを貼る場合、GraphQLでWordPressのデータを取得しても前後の記事はデフォルトでは取得できないため、解決策に四苦八苦しました。

解決策
一旦すべての前後ページリストを取得して記事IDでフィルタして使うことでなんとか実現。
詳しいやり方の記事を書きました。

smooth-scroll.jsライブラリでビルドエラー

ページ内リンクでアニメーションするsmooth-scrollのライブラリを利用したところdevelopコマンドのときは問題ないがbuildコマンドのときはエラーがでてビルドできない現象が置きました。
ライブラリにwindowエレメントを操作するロジックがあるためビルドができなかったようです。

解決策
vue-smotthscrollというVue.js用のコンポーネントライブラリを利用することで回避できました。
ただ、これはシンプルなコンポーネントなので凝ったことをする場合は、Vue外(プロジェクト直下のstaticディレクトリ内におけばコピーされる)にスクリプトを作っておき、そのファイルを読み込む形にするという方法もあり。

Netlifyの独自ドメイン設定

あまりDNSの設定をしないため全然変わらなくて焦りました。
自身が持っているドメインはムームードメインで管理していますが、ムームードメインで該当サブドメインをCNAMEでNetlifyに向けて、Netlifyの管理画面で追加したサブドメインをポチポチやっていたらいつの間にか反映されていました。

Netlifyでドメインエイリアスを追加した時にjpドメインはできないみたいな警告が出たためできないのかと思ったら簡単にできました。

設定手順
1. Netlify > Settings > Domain management で使用したいドメインを追加
2. ドメインを管理しているコンパネで該当ドメインに対してCNAMEでnetlifyのURL(foobar.netlify.com)を設定する
3. Netlify > Settings > Domain mangementで該当ドメインの右側が黄色くなっていたらクリックしてそのまま導かれるままクリックしていくとHTTPSまで行ってくれた。

Netlifyのリダイレクト

Netlifyで独自ドメインを設定したらNetlifyで発行されたドメインへのアクセスは行わないようにするためリダイレクト設定を行うのですが、最初どこに設定したらいいかわからず。
リダイレクトの方法自体は上記のドメイン設定画面にかかれています。

設定手順
_redirectという拡張子のないファイルを作成し、Gridsome側のプロジェクト直下のstaticディレクトリ(なければ作成)に置くことでNetlifyでビルドするときに自動で設定が反映されます。

今後の問題点？

今回構築してみて感じた問題点を何点か

- 画像URLがWordPress側のURLになる(WordPressの画像とパスは静的サーバ側には保持できない？)
- ビルド時には存在しないquerySelectorAllの警告
- WordPressの予約投稿時には公開時間になってもNetlifyへのWebHookは動作しない模様？(WordPress側にアクセスしたらWebHookが実行された)
- 公開前の記事チェック方法(マークダウンで書いてるのでローカルでも確認できるがWordPress側に確認用のテーマを作らないといけない？)

・　・　・

今回リニューアルしたブログにGridsome関係の技術系記事も書いてますので良かったら参考にしてください。
Gridsome関係の記事: https://tech.arc-one.jp/tag/gridsome