概要

React製の静的サイトジェネレーターGatsbyとContentfulのHeadlessCMS機能を使用して、作品掲載、ブログ、フォーム機能、ダークモード機能、タグ機能などを搭載した個人向けのWebサイトのテンプレートを作成しました。 通常のブログエンジン（e.g. WordPress）などと比較してもページ遷移などはパフォーマンスが良いと思います。

構築

本サイトはAWS S3に静的ホスティングされており、静的サイトでネックとなる問い合わせフォームはAWS API Gatewayでエンドポイントを作成し、AWS Lambda関数のNode.js環境を使用してフォームの内容を送信するように構築することで解決しています。

CI/CD

CI/CDとして、GitHub Actionsを利用しており、リポジトリの特定ブランチへのpushでビルドとデプロイが発火します。

使用した技術

言語

• JavaScript
• Node.js
• GraphQL

フレームワーク

• Gatsby.js
• React.js

ライブラリ

• ReactHooksForm
• StyledComponents
• Yup
• Swiper.js
• ReactParallax

　など

CMS

• Contentful

PaaS,SaaS,IaaS

• AWS S3
• AWS Lambda
• AWS API Gateway
• AWS Route53
• AWS WAF & Shield

機能

TopPage

• Blog記事の最新記事3件まで掲載できます。
• Works項目はTopPageに掲載する項目を任意に選択したものが3件まで表示できます。
• Parallax部分はReactParallaxを使用しています。

Blogs一覧ページ

• Blogは投稿順に表示されています。
• ページネーション機能がついており、6項目ごとに一覧の静的ページが生成されるよう構築しています。
• タグは5つまでアイコンで表示しています。
• タグ一覧ページも用意しています。
• ブログ記事のimageフィールドの一番目をサムネイルとなるように取得しています。

Blog記事ページ

• 記事ページヘッダーには投稿日を表示し、Qiitaの記事ページのように最終更新日から1年以上経過した場合にはそのアラートを出すよう実装しています。
• 記事内のコードブロックをシンタックスハイライトしています。
• ヘッダー部にTOPICSとしてタグカテゴリを表示しています。
• 本文はCMS（Contentful）側でマークダウン記法で記述します。

Works一覧ページ

• 一覧ページはページネーション機能を導入しています。
• 9項目で次の静的ページを生成します。
• サムネイルはWork投稿のimagesの一番目の要素が適用されています。

Work記事ページ

• 今回、画像は横長（PC画面キャプチャ）のものと縦長（スマートフォン画面キャプチャ）をそれぞれ投稿するよう構築しています。
• 説明文はContentful側でマークダウン記法を用いて記述します。