Zenn
😺

初心者がHP製作を手伝ってみた

2024/05/14に公開
Next.js
React
Cloudflare
microCMS
hp
tech

きっかけ

友人Aさんから、事業を立ち上げたため、HPを作って欲しいとの依頼を受けた。ちょうど先日まで会社でReactを弄っていたので、頑張れば自分でも出来そうと思い引き受けた。

構想・準備

普段ゴリゴリにフロントエンドをやっている別の友人エンジニアBさんも加わって２人で開発をすることにした。(依頼主は非エンジニアなので開発には不参加)
フロントエンドは本業の人に任せた方がいいので、フロントの実装だけで済みそうな箇所はBさんに任せた。
なので自分の役割は以下

  • 技術スタックをどうするかの構想を練る
  • バックエンドが絡むページの実装(ブログ、問い合わせ)
  • 開発・デプロイ環境の構築

最初は１人の方がやり易いダロ！と思っていたが、
結果的には、構想の段階で、２人の役割分担を明確にしたのが功を奏したと思う。

技術スタック

今回のポリシーは、「維持費0円」であること。
サーバーを借りたりすると毎月お金が発生するので、
無料で使えるサービスを活用することにした。

UIの部分は、自分はReactしか使ったことないのでReactで確定。
Nextjsは個人的に実際使って学んでみたかったので使うことにした。
DBは学習コスト低そうなFirebase,
デプロイは、流行りのcloudflareにした。

まとめると以下

フロントエンド

バックエンド

  • Firestore(合格実績管理・問い合わせ管理)
  • microCMS (マイページでブログ記事を管理)
  • EmailJS ※無料プランで200通/月の制限あり

デプロイ

結局維持にかかるお金は、ドメインの取得代だけで済んだ(年1500円くらい)。Xサーバーなどをレンタルすると月で1100円くらいかかるので大分お得にできた。

まとめ

2人で協力して1ヶ月程で公開できた。
通常のHPの機能に加えて、

  • 問い合わせが登録されるとメールが飛ぶ
  • ブログ記事をマイページで執筆。投稿・管理できる

ようになった。依頼主が確認しやすいように、FireStoreのデータを自動で読み込むスプレッドシートもGASで作っておいた。

感想としては、

  • Nextの使い方もだいぶ理解出来たので、今後の機会に活かせそう
  • Cloudflareは超便利だった。GithubやCMS連携して自動でデプロイしてくれる楽
  • HPのコンテンツ内容決めるにあたって依頼主から要望・要件引き出すの難しい

結果的に、React以外はほぼ全てが未経験の技術だったので、かなり勉強になったと思う。

最後に、作ったHPと友人の事業の宣伝
https://www.esencia-coaching.com/

Discussion