気づけばまた記事を更新しないまま1年以上の時が経ちました。。。特にメモしたい内容とか何もなかったということなんでしょうね。
そして一年って早いね。
今回は久しぶりにチャレンジしてみよう！ということでNuxt + WordPress + Netlifyの構成でこのブログサイトのリニューアルを行いました！
その経緯や構築する中で引っかかったポイントなどを掲載できればと思っております！
なぜリニューアル？
実は数年前からこのサイトは色々バグなどもあったので、修正したいなーと思ってました。。。
なんせ元々のこのサイトはボクの初めてWordPressサイトだったので、やっぱり知識不足あってダメダメだったんですねぇ。。。
が、修正とか調整とか面倒くさい！！！！
何ででしょうねぇ。。。仕事じゃなかったら全くやる気にならず。。。
そのまま放置しっぱなしだったのですが、最近Vueを触り始めて面白いなぁという事でテスト代わりにサイトリニューアルしようとなったのです。
このサイトがまたボクの初めてのVue作品となりましたw
きっと数年後にはまたダメダメな作りだって言うんだろーなーと思います。
構築環境の選定
今回は以下環境にて構築しました。
- Nuxt 2.2.0
- WordPress 5.3
- さくらインターネット レンサバ(WordPress用)
- Netlify
それぞれ何故選んだのかの理由いきましょう！
Nuxtという選択
元々はVueを勉強する所から始めたのですが(当たり前か。。。)、ルーティングがややこしい。。。
Laravelの時も思ったのですが、ルーティングの理解がとにかく出来ない。。。
そんな時にNuxtを教えて頂き、ルーティング自動生成だと！！？という事で迷う事なくNuxtを使用することにしました。
発展途上なのかゴリゴリ仕様が変わっていってる感はありますが、まぁ頑張って調べつつやれば特に問題ない(はず)。
もうすぐ3系がリリースっぽいですが、ガッツリ仕様変わりそうな感じですね。。。
WordPressという選択
正直あんまり更新もしないので、WordPressにこだわる必要は無かったのですが、ざっくり以下の理由で採用しました。
- WP Rest APIを使ってみたかった
- そもそも管理画面を使い慣れている
- 仕事でWordPressサイトを作りすぎたので、SPAリニューアルなどの話が来た時のために練習しておきたかった
Netlifyという選択
これもせっかくVueで作るなら、流行りの静的Webホスティングサービスでも使ってみよーかなーという単純な理由でした。
FirebaseかNetlifyかの2択で悩みましたが、WordPressの記事更新にフックしてビルド・デプロイしてくれるという部分でNetlifyを採用しました。
試してみた所ホント楽。。。自動って最高やで！！
静的ページを動的風に扱えるって、もはや静的とか動的の意味が変わってきそうですね。。。何か新しい言葉とか生まれそう。。。
ちなみにFirebaseの方が表示速度は早いみたいなのですが試してないので分かりません。。。
ただボクからすれば、Netlifyでも動的WordPressページから比べたらかなり早い印象でした。静的ページって素敵。
もうちょっと速度向上を狙える部分もありそうなので、後々カスタマイズしていければと思っております。(多分やらない)
実際にやってみて
うーん、メッチャ楽しかった！！
仕事ではHTML〜WordPressばかりで、その他を扱うことがないので久しぶりに新鮮な気分でコーディングできました。
引っかかった所とかも死ぬ程ありましたが。。。それは新しい事をやろうとすると当たり前の事なので、それ込みで楽しかったなぁと思います！
来年はSPAの仕事とかあったらやってみたいなぁ。。。
ご依頼ある方はSB Creatorsの問い合わせフォームよりご依頼くださいませw
ちょっと記事が長くなってきたので。。。
別途、ブログ構築編で引っかかったポイントなどを掲載します！
ありがとうございましたっ！！