ブログをWordPressからNext.js製の静的サイトに作り直しました！
先日ConohaWingからConohaVPSにWordPressブログ(このブログ)を移したのですが、よく考えたらWordPressで運用する必要はなかったので、オリジナルウェブサイトとしてNext.jsで作り直しました。そこで今回は書き直しに至った経緯と書き換えてどうだったのかなどについてつらつら書いていきます。完全に自分語り記事です。
そもそも何でブログを書いているのか
私がブログを書いていた理由ですが、自分の学習したり作ったりしたアプリ・技術の情報を発信して学習を定着させたいという点と、長文で自分語りをしたいからです。Twitterだと文字数制限がありますしね。(課金すれば280字までは呟ける)
また、モバイルアプリをApp Storeで公開するとどうしても自分のサイトのURLを書いてサポートページなどを用意しないといけないので、自分のサイトを持つ必要があった訳です、あとは単純に文字を書くのが好きというのもあります。学生自体も別のブログを書いていたり、ライターとしてクラウドソーシングで小銭稼ぎをしていたりしたので、文字打ちは好きでした。そんなところです。
なぜ当初はWordPressで記事を書いていたのか
このブログですが、先述の通り最初はWordPressで書いていました、しかし、今回これを静的サイトに書き換えました。なぜ最初WordPressで書いていたかというと、｀
- 難しいことを行わずに簡単に記事投稿を行えるから
- 他ブログサービスと異なり、独自性を出せると思っていたから
の2点があります。
難しいことを行わずに簡単に記事投稿を行えるから
まず、難しいことを行わずに簡単に記事投稿を行えるからです。特にレンタルサーバーを借りることですぐに公開できるのが魅力です。私はかつてConohaWingを使っていましたが、契約期間を選んでドメインを設定するだけで一瞬でWordPressのインストールができます。これは私のようなITエンジニアでなくとも簡単にサイトの公開ができるのでおすすめです。
↓ConohaWing公式
また、インストールをした後も管理画面から簡単に記事投稿ができるので、とにかく難しい設定をしたくない場合にはWordPressはかなりいい選択肢になります、テーマも有料無料問わず豊富に公開されているので、デザインが苦手な私でもいい感じの見た目のサイトを作れていました。
他ブログサービスと異なり、独自性を出せると思っていたから
ブログを書くだけならぶっちゃけ noteやはてなブログ、Qiita、Zennなどでも問題ない訳です。むしろ、自分でサイトを作るとかいうめんどくさい作業に割く時間を記事執筆に使えるので、本当に文字を書いて公開するだけならこれらのサービスを使った方がいいかもしれません。
ただし、上記のサービスは自分のドメインを使えなかったりデザインが限定されていたりと、どうしても他のユーザーとの差別化が難しいのでは？と思っています。もちろん記事内容で差別化はできるとは思いますが、あくまで見た目は全員ほぼ一緒なのでそれがちょっと気になりました、これはあくまで私の変なこだわりですw
やはり好きなデザインで記事を書いたり見たりする体験をしたいので、WordPressを選んでサイトを作成しました、CMSはWordPress以外にも色々ありますが、他は正直調べてもないのでよく分かっていません。多分どれも個人ブログを書くなら同じだと思います。それならシェアがめちゃくちゃ高い(全ウェブサイトの43.5%)ので、WordPressを使うのがベターではないでしょうか。
なぜWordPressをやめたのか
このブログは当面WordPressで書いていましたが、
- アドセンスの審査に落ちてムカついたから
- フロントエンド開発に興味が出たから
- サイトの表示速度が気になった
の3つがあります。
アドセンスの審査に落ちてムカついたから
このサイトではWordPress時代からGoogleアドセンスに4回ほど申し込みましたが、落ち続けていました。他のサイトを見ると「10記事くらいあれば合格する」「1記事1000字くらいあればいい」と謳われていたのでそれに従って書いていましたが、それでも受からずに落ち込んでいました。私のブログでは20記事ほど入れていて、1記事あたり2000字程度書いていました。まぁ、記事の質が低いのでしょう😅
それでSEO対策やキーワード設定など心がけていましたが、もちろん合格にはならなかったのでサイト自体抜本的に変えるか、ということでWordPressから脱却して1から自分でコーディングしようと思った訳です。それにしても、前に作成したブログでは1発で合格した(2017年)ので審査は厳しくなっている気がしますね。
フロントエンド開発に興味が出たから
私は本業がバックエンドのWebエンジニアなので、あまりフロントの技術には明るくありません。一応趣味でFlutterアプリを4つほどリリースしていますが、それでもモバイル分野とWeb分野では多少技術が違うので・・・
そこで、バックエンドエンジニアとして「サーバー側での処理結果を出力する」程度でしかなかったフロント部分をUIに注力して作成してみたかったというモチベーションです。自分でも見やすいサイトは魅力的ですしね。
サイトの表示速度が気になった
これは結構大きな理由なのですが、WordPressって表示速度が遅いんですよね。アクセスがある度に毎回データベースから動的にページを作成しているので仕方ないのですが、結構この表示の遅さは気になってしまいます。Googleの検索結果をタップして開くまでに時間がかかりすぎると別サイトの方を見てしまいますしね。
ブログは一般的なWebアプリと異なり、こちらで書いた記事を一方的に見せるだけなので、パフォーマンスを重視するなら静的サイトが良さげなので静的サイトジェネレーターで作成しました。結果としては表示がかなり速くなったので、流行り書き換えて正解でした。
なぜNext.jsを選んだのか
静的サイトを作成するなAstroやGatsby、Nuxt.jsなど他にも魅力的な静的サイトジェネレーター(以下SSG)がありますが、今回敢えてNext.jsを選んだ理由は、今後のための技術取得のためです。
専門外なので間違っている部分もあるかもしれませんがフロントエンド開発では現在、TypeScriptとReactを使って行われることが多いそうです。また、これらのフレームワークの中でもNext.jsはかなり長い間使われていて情報も多く、コミュニティも大きいとのことなのでNext.jsを選べば間違いないのかなと思って技術選定しました。
デプロイ周りはどうしたのか
技術選定を行なってアプリ開発をしましたが、どこにデプロイすればいいのかは迷いました。現在VPSを持っているのでそこに置いてもいいのですが、フロントエンド界隈ではCDNにデプロイするのが慣習になっているようです。Laravelで作ったアプリはVPSに置きましたが、フロントエンドはよく分かっていないので最初は慣習通りCDNにデプロイすることにしました。
CDNにも色々ありますが、VercelとCloudflare pagesにしました。本来はNext.jsの開発元であるVercelにデプロイすれば相性が良いのでそれで良いのでは？と思いましたが、Vercelの無料プランは商用利用できないうえに有料プランは月20ドル(約3000円)と結構高いので二の足を踏んでいました。ただ、趣味の個人開発程度には問題ないかな？公開せずに開発環境として使えば良いかな？と思ってこちらを開発環境として使うことにしました。
Cloudflare pagesの方は無料プランでも商用利用できるので、こちらを本番環境として採用しました。
まとめ
WordPressからNext.jsに書き換えたのですが、相当手間がかかったので別に書き換える必要はなかったのでは…？という気持ちも多少ありますが、新サイトではブログのほかにポートフォリオや問い合わせページも実装できたので、割と便利になった気がします。デザインも自分好みに寄せられましたし。
非エンジニアがわざわざプログラミングを覚えてまで1からサイトを作る必要はないと思いますが、もしNext.jsなどの技術に触れたことがある人にはおすすめです！今後はコンテンツの充実を図ります🤗
