前回の続きです。
your-project-name your-app-nameという名前は適宜変えて読んでください。

前回までである程度サイトが形になったら、ファイルホスティングしていきます。

JAMstackブログを作る

1.Vercelにログインする

Next.jsの開発元でもあるVercel社が運営しているホスティングサービスを使用します。
アカウント作成、ログインを行います。
https://vercel.com

2.Gitリポジトリとの連携

GitHubで作成したリポジトリと連携していきます。

ダッシュボード上のNew Projectをクリックし、Import Git Repositoryで連携したいリポジトリをインポートします。
初回はGitHubにVercelをインストールする必要があります。

3.公開設定

Configure Projectの画面では、FRAMEWORK PRESETにNext.jsを選択。
ROOT DIRECTORYはEditをクリックし、プロジェクトの入っているyour-project-nameを選択。
Environment Variablesには、下記2つを入力します。1つ入れてAddを押すと2つめが入力できます。
　

• NAME：API_KEY　VALUE…：envに記載したAPIキー
• NAME：SERVICE_DOMAIN　VALUE…：envに記載したサービスドメイン

　
入力できたらDeployをクリック！ビルドが始まるので少し待ちます。
Congratulations!というページが表示されたら成功です🎉
下に表示されているサムネイルをクリックして公開されているか確認します。

4.カスタムドメインの追加

Vercelでは、ドメインのXXX.vercel.appのXXX部分であれば自由に変えることができます。
ダッシュボードからSetting＞Domainsを選択し、Editをクリック。
Domainの.vercel.appまでの文字列を変えてSaveで使えるようになります👏


現在の設定では、microCMSで記事を更新しても本番環境WEBサイトには反映されません。
Webhookを利用して、microCMSとVercelを連携することで記事更新時にビルドし反映されるようになりますが、ここでは説明は省きます。
チュートリアルで紹介されているので気になる方はそちらを参考にどうぞ。
microCMS + Next.jsでJamstackブログを作ってみよう | microCMSブログ
ちなみにVercelでは手動でビルドは出来ないみたいです… 🥺

終わりに

ブログを作るときはサーバー借りてWordPressインストールしてカスタマイズしてなんとかこんとかしようと思っていましたが、Jamstackの静的に生成したものを置いているだけ、という構成が魅力的で、JavaScriptも危うい状態でチャレンジしてみましたが思ったよりも簡単に作れてとても満足です。
Dockerの勉強にもなりました。

OGPやカテゴリ、タグ、詳細ページのURLなど細かい部分はおいおいやっていけたらなと思います。