エンジニアになってWordpressテーマを作れる様になってきたあたりから、自分が好きにカスタマイズできるオリジナルのウェブサイトが欲しいなと思っていました。

いつか作ろうと思いつつなかなかやる気がでないまま、気づけばフリーランスエンジニアとしてもそろそろ5年目に突入。。。

そこで一念発起して自分のウェブサイトを作り直したので、今回は備忘録も含めたその過程を書いていきたいと思います！

まずは要件

まずは作成するウェブサイトの要件です。せっかくLaravelやらVue.jsやら色々とできることが増えてきたのに、ただのWordpressテーマを作成するだけじゃつまらないですよね。

あとはせっかくだから何かしら自分の使ったことのない技術を使いたいところです。もしウェブサイトが完成しなかったり、作ったところで何の役に立たなかったとしても、自分の使ったことのない技術を使えば少なくとも「自分の使ったことのない技術を使った経験」は残るのでね。（もちろんその分開発がしんどくなるのですが）

というわけで今回は下記のような自前サイトを作りたいと思います。

要件

• 内容はともかくかっこいいウェブサイトにする
• 日本語と英語切り替えできるようにする
• Next.js × WordPress（ヘッドレス）で作る
• Next.jsにはTypeScriptを導入する
• 開発にDockerを使う
• Githubにプッシュすると自動デプロイするような仕組みを作る

とりあえずこんな感じで進めていこうかと思います。

最初は最近1番興味のあったgolangとnext.jsを使ったウェブサイトにしようかとも考えていたのですが、もともとのウェブサイトがWordpressでできていることと、Go × Next.jsの記事があんまり見当たらないのでやめました。

Next.jsを採用した理由はReactに憧れがあったからです。Vue.jsは業務で使用したことがあるのですが、Reactは全く触ったことがなく、ずっとやってみたいと考えていました。また調べてみるとVue.jsよりもTypeScriptと相性が良さそうだったことも決めての一つになります。

TypeScriptとDockerは一応業務でも触ったことはありますがそこまで深く関わることがなかったのと、この2つについてあまり経験がないのがものすごいコンプレックスだったので、今回はマストで使って少しでも知見を増やそうと思います。

あと今更すぎる発言ですがTypeScriptはすごい。とても良い。静的型付け言語最高。PHPも早く見習ってくれ。

そんな感じで見てみるとWordpress周り以外全て新しく学ぶもので大丈夫かと思いつつ、頑張って進めていきたいと思います。

まずは環境構築

というわけで早速環境構築です。

docker-composeやDockerfileについては何となくの理解があるので調べていけば大丈夫かなと思いましたが、余裕で無理でした。30分くらい自力でdocker-compose.yamlを書いたところで、諦めて「Wordpress Next.js Docker」でググったのですが

バッチリの記事がありました。そういえばBootstrapしか使えないのでTailwindも使ってみたいなと思っていたところでした。すごくちょうどいいです。

とりあえずこの記事の通りリポジトリをクローンしてmake startしたらごくごく簡単に動きました。今更すぎて恥ずかしいですがDockerはやっぱりすごい。

多分この記事がなかったら環境構築の段階で諦めたか＋で1週間くらいかかった気がします。本当に感謝です。ありがとうございました。僕もこんな形で見知らぬ誰かに還元していければいいなと思います。

そんな感じで実装していく

というわけでそんな感じで新ホームページを作っていこうかと思います。

ちなみにデザインも自分でするのですが、トップページはこんな感じでLaravel7のデフォルト画面ぽくして、その他も同じ様にシンプルな形にしようかなと考えています。

ありがとうございました！！