前回（【Newt】スターターを活用したツラくないJamstackブログ開設）はNewtでAPIの設定を行いました。今回はいよいよネット上にブログを公開していきたいと思います。
ここからフロントエンド開発の前提知識が必要となってきます。この内容が難しいという方はNode.jsとGitHubが最低限分かる状態で再度挑戦してみてください。
それでは以下が準備するものです。フロントエンドを学んでいる方であればおなじみのものばかりです。
- 推奨版のNode.js
- お使いのエディタ
- GitHubアカウント
- Vercelアカウント（デプロイ先として使用します。）
Newtのスターターを自分の環境にクローンする
スターターはこちらから（BLOGのNEXT.js用です）https://github.com/Newt-Inc/newt-blog-starter-nextjs
緑の『Code』ボタンからお好きなクローン方法を選びましょう。
お使いのエディタでスターターテンプレートを開く
私はVSCodeを使用しています。左カラムの『.env』ファイルを開きます。
環境変数を設定する
環境変数とは今回の件でいうと、ブログとNewtを繋ぐためのキーで、このファイルは開発環境でのみ使用します。編集するのは以下の3項目です。対応するキーを取りに行きます。
NEXT_PUBLIC_NEWT_SPACE_UID=スペースUID
NEXT_PUBLIC_NEWT_APP_UID=AppUID
NEXT_PUBLIC_NEWT_API_TOKEN=CDN APIトークン
スペースUID / AppUID / CDN APIトークンの取得
スペースUID / AppUID
スペースUIDは、常にメイン画面に表示がされているのでわかりやすいと思います。
AppUIDは左カラムの『Blog』 > 『App設定』と進みます。
『一般』の AppUIDに表示されているものとなります。
CDN APIトークン
メイン画面に戻り左カラムから『スペース設定』をクリックします。
上の『Newt CDN API Token』の青いボタン『作成』を押します。
好きな名前を入力して、右下の『作成』ボタンクリックで完了です。
作成したAPIトークンは右側のコピー用紙のマークからコピーができます。
したがって.envファイル内の記述は以下のようになります。
NEXT_PUBLIC_NEWT_SPACE_UID=blog
NEXT_PUBLIC_NEWT_APP_UID=blog
NEXT_PUBLIC_NEWT_API_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXX
Githubにアップロード
私はGithub Desktopを使用していますが、いかなる方法でも構いませんので自分のGithubにアップロードしましょう。※画像は先程のスペースUID等の反映前の画像です。ご了承ください。
Vercelにデプロイ
今回はVercelにデプロイをします。Next.jsをアップロードするにはVercelが一番手間がかかりません。連携さえ終われば、GitHubにアップロードするだけで、自動でビルドを行ってくれるようになります。
使い方がわかる方は飛ばしてもらって結構です。
初めての方はGitHubでの登録・ログインがおすすめです。
画面右側の『Add New...』から『Project』を選択します。
VercelとGitHubをつなげます。
ログインができたら、GitHubのリポジトリが表示されます。Newtのスターターを選んで『import』
importが完了すると、デプロイの画面になります。フレームワークプリセット等は自動的に最適なものが選ばれていますが、環境変数だけは自分で入力をしないといけません。『Environment Variables』をクリックして入力項目を開きます。下記のように入力して『Add』。すべての環境変数を入力します。
//.env
NEXT_PUBLIC_NEWT_SPACE_UID=blog
//NAME = VALUE
すべての環境変数を入力し『Deploy』を押すことで、デプロイが始まります。
これでネットへの公開が完了しました！
デプロイが完了すると、URLが発行されます。アクセスしてみるとブログが表示されます。お疲れさまでした。
記事が自動反映されるよう設定にする
ネット上にブログが表示されているとは思いますが、いくら記事を更新しても再度デプロイをしない限り、ブログに記事は反映されません。
これは、いわゆるSSG（Static Site Generation）、静的サイトジェネレーターというもので、以下のような流れになっています。
- 事前にサーバー上でビルドとレンダリングを行う
- APIの情報を受け取る
- クライアント側でリクエストをする
- 必要な情報がビルドされ、レスポンスが返ってくる
事前にある程度作られたサイトに情報を流し込んでいくだけなので、とにかくスピードが速いことがメリットに挙げられます。ブログにアクセスがあるたびに、その場で記事を出力するのですが、最後にデプロイしてビルドされたものが基準となってしまいます（上のリストでいう①）。記事を書くたびにいちいちビルドを行うのは面倒ですよね。
そこでWebhookというものを利用し『記事が作成/更新されるたびに自動でビルドを行う』といった設定をしていきます。
VercelでHookを作成
Vercelでプロジェクトを開き、
①settings → ②Git → ③Deploy Hooksで入力画面を開きます。Create Hookで『hooksの名前』と『Gitのブランチ名』を入力し、④『Create Hook』ボタンを押ましょう。
Hookが作成されましたので、⑤『Copy』でコピーしておきましょう。こちらをNewtに貼り付けに行きます。
NewtにHookを貼り付け
Newtメイン画面の左カラムから『Webhook』を選択し、右上の『Webhook』を作成ボタンをクリック。メニューが開きますので『Webhookテンプレート』を選択。
Webhookテンプレートの中から、Vercelを選択し、先程コピーしたHookを入力箇所に貼り付け。右下の『Webhookを作成』ボタンを押したら完了です。これで、Newt上で記事を更新すると、ブログ上にも自動反映されるようになりました。お疲れさまでした。
Jamstackブログの完成！...やりたいこと全部できる？
テンプレートを使用することで簡単にブログを立ち上げることができました。応用すればポートフォリオや自分の作品の展示に活用できると思います。
一つ注意事項がありまして、いわゆるブロガーが使う『ブログ』には使えないということです。簡単にブログを立ち上げるためにVercelを使用しましたが、VercelのHobbyプラン（無料プラン）では個人的かつ非営利な目的でのみの利用に限定されています。つまり、収益化ができません。収益化をした場合はProプランに移行するか、Vercel以外のホスティングサービスを使用するかの2択です。
駆け出しエンジニアでも開発の過程をすっ飛ばして、実際に使えるサービスをデプロイできるとモチベーションが上がりますし、このテンプレートを改造していくうちにどんどんスキルが上がっていくと思います。
今回はスターターテンプレートを使用しましたが、もっと自由にカスタマイズも可能です。国産のヘッドレスCMSはmicroCMSなどがありますが、使用感やプラン内容はどちらが抜きん出ているということはないので、ケースバイケースで使い分けていきたいですね。
それでは今回はこのあたりで締めたいと思います。ありがとうございました。
ヘッドレスCMSとしてGoogleスプレッドシートを活用したい方はこちらの記事がオススメです。
【SSSAPI】スプレッドシートをヘッドレスCMSにしたいなら早めに諦めたほうがいい
ブログの公開後に必要になってくるキーワード選定ツールは『ラッコキーワード』一択です。
Share this post