事の起こり
コロナ禍の2020年も半ばを過ぎたころ、静的サイトジェネレータのGatsby.jsというものでサーバーを立てずにブログを運用できると聞きました。ちょうどWebフロントエンドのポートフォリオが欲しいと思っていたこともあり、Gatsby.jsで自分の新しいブログを作りたいと思いました。
ブログを移転しようと思ったのは、ポートフォリオが欲しかったこともありますが、Wordpressの無料テーマにめぼしいデザインがなく、かと言って今更Wordpressの作りを覚えてまでオリジナルのテーマを書く気になれなかったというのが理由です。
Gatsby公式チュートリアル
まずGatsbyの公式チュートリアルをやってみました。公式チュートリアルは英語でしたが、Qiitaにチュートリアルを進める過程を日本語で説明した記事があったので、英語のチュートリアルとQiitaの記事を見比べながら進めました。
既存のWordpressサイトをGatsbyに移行 (断念)
チュートリアルを終えたところで、私のWordpress製ブログをGatsbyに移行する試みをしました。
これまでの記事を書き換える手間を考えたところで断念しましたが、記録を以下に残します。
使用したstarter
Starterにはgatsby-starter-wordpressを使いました。
断念の経緯
当初、WordpressからGatsbyへの移行は以下のステップで進めようと考えていました。
- Gatsbyで作ったサイトをNetlifyで公開しながら、Wordpressのサイトは公開を継続
- Wordpressのサイトをヘッドレス化して、Gatsbyで作ったサイトだけ公開する
しかし、以下の3点の理由から1.の状態での運用を断念しました。
- CSSの問題 : Wordpress側のスタイル指定をGatsby側で上書きする方法がわからない
- 既存の記事のリンクの問題 : Wordpress内で作った記事内の、Wordpress内の他のページへのリンクをGatsbyのサイトへのリンクに差し替えないといけなくなった
- Wordpressプラグインの問題 : 今まで使っていたプラグインで作っていた目次が、Gatsby側ではうまく表示されない
上記の問題からWordpress製ブログの移行&ヘッドレス化はあきらめ、代わりに生粋のヘッドレスCMSを使って新しいブログを作ることにしました。
次回に続きます。