【Nuxt + Strapi】ポートフォリオサイトの構成について

概要

こちらの記事では当ポートフォリオサイトの構成についてざっくり説明しようと思います。

使用技術

このサイトはAWS上に構築されており、CMSはStrapi、フロントはNuxt.jsを使用しています。

リニューアル前はWordPressをHeadlessCMSとして使用し、フロントはNuxt.jsでCircleCIを利用したSSGでページの出力を行なっていました。
詳細はこちらの記事にまとめていますので、もし宜しければご覧ください。

今回リニューアルを行うにあたり、フロント側は使い慣れたNuxt.jsをそのまま使用し、それまで経験のなかったSSRでサイトを構築しようと思いました。
また、ブログなどコンテンツの拡充も図りたかったので、いくつかのHeadlessCMSの候補の中からStrapiを選択しました。
Strapiは自身で投稿できるコンテンツを細かくカスタイズできたり、GraphQLの導入が容易だったため、今回使用していこうと思いました。
また、Nuxt.jsについてもリニューアル前はv2を使用していましたが、リニューアル後はv3を使用しました。
導入当時はパブリックベータ版だったので不具合などもありましたが、比較的スムーズに使用できたと感じました。
この辺りの知見などは、また別の記事で書いていきたいと思っています。

構成図

configuration_diagram.jpg

成果物

成果物のデザインとソースコードは下記から閲覧できます。
よろしければご覧ください。

ブログ一覧
Contact

お問い合わせ

「ランディングページを制作してほしい」、「Wordpressを使って更新性の高いWebサイトを作りたい」、
「JavaScriptを用いてWebサイトにリッチな表現を取り入れてほしい」などお客様の様々なご要望にお応えいたします。
また、デザインのみ、コーディングのみ行ってほしいといったご依頼にも柔軟に対応できます。
まずはお気軽にお問い合わせください。