フリーランスとして活動するために作成した事業用サイト（今見ているこのサイト）です。
概要
以下のことを意識して技術を選択して作成しました。
- 高速な動作
- 伝わりやすいシンプルなデザイン
- ブログやお問い合わせフォーム完備
- PC / タブレット / スマートフォン完全対応
- 安価に運用が可能
Gatsby.jsを使った爆速サイト
Webサイトの高速化は重要な要素の一つのため、ページ読み込みが高速な静的サイトジェネレータとして特化したGatsby.jsを採用しました。
Webサイトを評価するLighthouseでも満点に近い点数を安定して取ることが出来ています。
通常Webサイトはサーバー代が発生しますが、ホスティングサービスとしてNetlifyを使用しており、独自ドメイン代以外は無料で運用出来ています。
まさに「うまい、安い、早い」Webサイトとなっています。
デザイン
Gatsby.jsには様々なテーマがありますが、ブログとして最低限の機能のみ提供されているgatsby-starter-blogを元にスクラッチでデザインを行いました。
スタイリングについては、CSS in JSライブラリのEmotionを採用しました。
おまけ的な機能になりますが、右上の切り替えボタンにてダークモードを切り替えられるようにしています。
ブログの投稿方法
マークダウンファイルを作成するとブログの投稿として表示されるようにしています。
制作物についても同様にマークダウンで管理するようにしています。
お問い合わせフォーム
Netlify Formsを利用しています。