Blog

WordPress + Nuxt.js + Netlifyでブログを作成した話

Nuxt + TS + WP + Netlify

はじめに

株式会社GEEKでフロントエンドエンジニアをしている大房です。
今回弊社の事務所移転に伴い、コーポレートサイトとコーポレートブロクをリニューアルしました。
そしてブログのリニューアルの担当としてアサインされたので、タイトルの技術を選定し実装しました。

技術選定

以前までのブログはWordPressで作成されており、凝ったようなデザイン、技術を使用していませんでした。
フロントエンド専門の会社として、流行りのフロントフレームワークを採用し作りたいと思い、管理画面側はHeadless CMSとしてJAMStackなブログ作ると独断と偏見で決めました。

またフロントフレームワークにNuxt.jsを採用したポイントがいくつかあります。

  • Reactでのプロジェクトが弊社では多くあるのですが、[Vue]をフルに使ったものが今までなかった。
  • 今後の保守のしやすさを考えて、フレームワークに詳しくない人でもいじりやすく
  • そのための日本語ドキュメントが豊富

など今までJSフレームワークを知らない人が今後触った時でも最適だったからです。(私もVueから入りました・・・)

WordPressに関しては、他のチームの方でも親しみなれているのでそのままHeadless化をし、採用しました。
WP REST APIなども標準であるのもでかいです。
個人的にはContentfulを使ってみたかったです。

開発環境

ローカル開発環境はDockerでバック側(WP,mysql,nginx)の環境をサクッと作成し、フロント側はcreate nuxt-appでかなり爆速に作業を開始できました。

TypeScriptでの実装

頑張らないTypeScriptの記事を見てから、TypeScriptで開発してみたかったので今回は頑張らない程度にTypeScriptを導入しました。
頑張らない程度に導入をしてもnullやundefinedの可能性を指摘してくれるので、開発の助けになりました。
NuxtでのTypeScript開発は実装時点(Nuxt v2.8)では 公式でClass based API + デコレータを推奨していましたので、そちらを参考に実装しました。
Vueでは今、Function APIの議論やより今までのものにフレキシブルに対応するためのComposition APIの議論がされていますので頑張らない程度にTypeScriptを導入したというのもあります。

ホスティング

ホスティングにはNetlifyを採用しました。
Netlifyは静的サイトを簡単に無料でCDNで高速にホスティングしてくれるサービスです。
Githubのリポジトリで特定のブランチの更新を監視、ビルドをしてくれますので手作業でサーバーにアップするという手間が省けます。

またNuxt.jsは静的サイトジェネレータとして使用していますので、ビルド時に記事情報を取得したり、記事ページなどの動的なURL情報を生成します。

そのためWordPress側で記事の編集、追加に合わせて再ビルドをかけるような仕組みが必要になるのですが、Netlifyはwebhookに対応しているので、フックに合わせた再ビルドが簡単にかけられます。
Netlifyにはフォームの機能(無料)やCMS機能も有料ですが搭載されていたり他にもかなり多機能です。
ぜひ使ってみて下さい!

終わりに

私は一年前まではjQueryすらよくわからない感じだったのですが、少しは成長したなあという感じです。
現在GEEKではフロントエンドエンジニアを募集していますので、気になる方はぜひ力を貸して下さい。

最新の技術と手法を用いて、
IT分野で変化と進化を続ける
Webインテグレーター

神田北信ビルエントランス

株式会社GEEK 〒101-0033
東京都千代田区神田岩本町4-4 神田北辰ビル3F

CATEGORIES