「Vercel + freenom + Getform.io」構成で「爆速 + 管理費完全無料」のポートフォリオをGatsbyJSで作ったら幸福度が高まった話

こんにちは(๑╹ω╹๑ )

つい先月のエントリでGatsbyJSの魅力をお伝えしたばかりですが、
今日はそのGatsbyJSで開発したポートフォリオサイトの構成を紹介します🤗

↓ 開発したポートフォリオサイトです

今回のエントリとは関係ないですが、
技術構成は下記のとおりです🤝

• React
• GatsbyJS
• Less

ポートフォリオサイトの構成について☺️

管理費完全無料は本当？🤔

本当です👨‍💻

• SPAサイトの静的ホスティング
• 独自ドメイン
• お問い合わせ管理

全ての管理費が無料です✨
※ 2020年8月30日現在
※ 詳細は以降に説明

静的ホスティングサービスのVercelって何が無料？🥺

Vercel

• 満載のDevOps
  • Git Integrationsで自動ビルド
    • GitHub（プライベートリポジトリ可
    • GitLab
    • Bitbucket
  • Integrations Marketplaceの利用も無料
    • VercelイベントをSlackに通知する
    • ビルド後にLightHouseで自動レポーティング
• Starterから簡単にプロジェクトを開始できる
  • Gatsby.js
  • Nuxt.js
  • Angular
  • Next.js
  • Vue.js
• カスタムドメイン（50個まで
• 1ヶ月あたり100GBまでの転送量
• 自動でSSL化
  • デプロイしたら自動でhttpsになっていた😮
• Serverless FunctionsでAPIの実装
  • 所謂FaaS

↑全てが無料です😂
※ 個人利用プランの場合

Vercelの料金ページ

freenomで独自ドメインを無料で取得・更新する

freenom

gaという独自ドメインを無料で取得できました🎉

（個人開発ではいつも利用しています笑

正確には下記の制限があります😢

• .tk、.ml、.ga、.cf、.gqドメインが対象
• 1〜12ヶ月の範囲でないと登録・更新できない（でも永久無料
• ネームサーバーの登録 or URL転送のみ

freenomの料金ページ

Getform.ioでお問い合わせの管理

Getform.io

お問い合わせフォームのエンドポイントになって、
それを管理できるサービスです😌

フォームを作成するたびにエンドポイントを発行してくれます！

個人利用の無料プランでは下記が無料です😄

• 1フォーム
• 一ヶ月あたり100件のお問い合わせ
• 単一ファイルのアップロード
• 100MBのファイルストレージ
• デフォルトのThanksページ
• チームメンバーを1人招待する
• スパム保護
• Zapierとの統合
• Getform API

Getform.ioの料金ページ

まとめ

個人のポートフォリオサイト規模の利用であれば、
不便なく、管理費も考えること無く利用できました🙌

制作過程でGlitchという、静的ホスティングとペアプログラミングでコラボレーションが出来るサービスを見つけました！

• RAM：512MB
• ディレスク容量：200MB

の範囲であれば無料で利用できるみたいです🧐

Glitchの料金ページ

近い内に少し触ってみようと思います🌏