クソザコエンジニア奮闘記

また新しいブログを作った

はじめに

こんにちは、クソザコエンジニアのmarutakuです。

前回のブログ構築からブログ記事を書いていませんでしたが、またブログを作り直しました。 過去にブログ作りました記事を投稿したのが2019年2月なので、3年10ヶ月ぶりのリフォームとなりました。

作り直した背景

作り直した背景は大体こんな感じです。

  • なんか作りたかった
  • Cloudflareに触ってみたかった
  • Next.jsのバージョンアップについていけていなかったため、再度勉強したかった

最近転職するにあたり、新しい技術のキャッチアップをする習慣をつけたかったため、今回のブログ再構築に至りました。

技術構成

今回のブログは以下の構成で作成しました。

  • フロントエンド
    • Next.js(App Router)
    • tailwindcss
    • TypeScript
  • デプロイ先
    • Cloudflare Pages
  • CMS
    • Contentful

Next.jsは、SSGモードで使用しています。また、今回初めてApp Routerに挑戦してみました。Page Routerとかなり違うという話を聞いていましたが、自分の用途ではそこまでの差を感じませんでした。もうちょっと高度な使い方をすると差が大きいのかも？

デプロイ先には使ってみたかったCloudflareの提供しているサービスであるCloudflare Pagesを使用しました。 GitHubとの連携があっという間に完了して驚きました。 また、今回初めてYarn v3を使用してみましたが、インストールが早かったです。 PnPなどの新機能の使い方がわからないがために開発を止めたくなかったので、今回は以下の記事を参考に機能をYarn v1に寄せています。

Embedded content: https://zenn.dev/mizchi/articles/yarn-v1-to-v3

Contentfulは前のブログシステムから継続で利用します。 一度はmdファイルからのレンダリングにしようかと悩みましたが、画像を加工して配信してくれる機能を捨てきれずに継続で利用することにしました。 このくらいの機能であればCloudinaryでもできそうなので、運用方法などと相談していこうと思います。 今回のシステムではContentfulとCloudflare Pagesのwebhook機能を使用して、Contentfulの記事が公開・編集されたらCloudflare Pagesを再デプロイするようになっています。 具体的な手順は、以下の記事を参考にしました。 Embedded content: https://dev.classmethod.jp/articles/cloudflare-pages-api

できたもの

作成されたのはこちらのブログになります。2週間弱でここまで作ることができました。 Embedded content: https://blog.marutaku.info/

前のブログよりもだいぶ見た目が良くなったかなと思います。 また、Lighthouseのスコアもかなりいい感じです。 lighthouseの結果

今後の課題・やりたいこと

今後の課題・やりたいこととしては、以下のものがあります。

記事のプレビューができない

現在のシステムでは、記事のプレビューができないです。 Next.jsのDraft ModeやContentfulのPreview Modeなどを使用してできないかを検討していますが、一旦はこのまま進めていくことにしました。

本当にContentfulいる？

正直Contentfulがとても使いやすいわけではないので、他の選択肢を検討し始めています。 現状、Contentfulを使用する大きな理由はHeroイメージをGraphQLのクエリで加工したりできるのが便利であるという点です。 この機能を他のサービスで代替できるのであれば、そのサービス+GitHubでマークダウンファイルを管理するでいいかなと思っています。 現状の最有力候補はCloudinaryですかね？ Embedded content: https://cloudinary.com/ip/gr-sea-gg-brand-home-base

ちゃんと記事書け

これに尽きる。 今の課題は記事のアイデアがないことだと思っているので、この課題を何とか技術で解決できないか模索中です。

終わりに

久々にガッと個人制作をしたので楽しかったです。 あとは記事を書くだけ...