【初心者向け】VercelのアカウントをGitHubと連携する手順だけを解説!
こんにちは！オトーワンですっ！
今回は、Webサイトやアプリを簡単に公開・運用できるクラウドサービス「Vercel」と「GitHub」のアカウントを連携する手順だけを解説します！
それでは、行ってみましょー！
1. はじめに
この記事では「Vercelのアカウント作成方法」と「GitHubとの連携手順」を初心者（初めての人）向けに解説します。
前提条件：GitHubアカウントを作成している
連携にはGitHubアカウントが必要です。アカウントをまだお持ちでない場合は、以前私が書いた以下の記事を参考に、GitHubのアカウントを作成してください。
2. Vercelとは？
Vercelの基本説明
Vercelは、ざっくり雑にいうと、Webサイトやアプリを簡単に公開できるサービスです。
GitHubなどのGitサービスと連携すれば、コード（htmlとかも）を更新するだけで自動的にサイトが更新される便利な仕組みが使えます。
今回解説するのは「GitHub連携」
Vercelは様々なGitサービス（GitHub、GitLab、Bitbucketなど）と連携できますが、今回は数あるGitサービスの中でもGitHubとの連携方法を紹介します。
Vercelの料金プラン
Vercelには無料プランと有料プランがあります。
とはいえ、個人利用なら無料プランで十分使えるし、基本機能は無料で利用可能＝無料プランで始めましょう。
GitHubと連携するメリット
自動デプロイの仕組み⇒GitHubとVercelを連携すると、GitHubにコードをpushするだけで、自動的にVercelのサイトも更新されるようになります。
3. Vercelのアカウントを作成する
Vercelにアクセスします。
画面の右上の「Sign Up」をクリックします。
画面の「I'm working on personal projects (Hobby)」を選択して、「Your Name」にアカウント名を登録してから「Continue」をクリック。
Vercelのアカウントを何で登録するかの画面になるのでgoogleなどのアカウントやメールアドレスなど任意のものを選択します。
今回は既に持っているGooglアカウントを使用します。
Googlアカウントを選択します。
4.GitHubと連携する
Googlアカウントを選択後の画面で一番上のボタン「Continue with GitHub」をクリック。
次のこの画面になるので、右下の「Authorize Vercel」をクリック。
「Authorize Vercel」をクリック後、次の画面のプルダウンから「Add GitHub Account」を選択
「Add GitHub Account」を選択後、①「All repositories」か②「Only select repositories」を選択します。今回は①「All repositories」を選択します。
①「All repositories」
GitHub上に作った、すべてのリポジトリを連携の対象とする場合（公開リポジトリ（読み取り専用）も含まれます）です。
②「Only select repositories」
GitHub上に作った、特定のリポジトリのみを連携の対象とする場合です。
少なくとも1つのリポジトリを選択してください。（公開リポジトリ（読み取り専用）も含まれます）です。
「Verify via email」をクリックすると本人確認のために、GitHub に登録しているアカウントのメールアドレスに認証メールが送られます。
この画面に変わるので、送られてきた認証メールに記載されている、6桁 or 8桁の認証コードを入力して「Verify」をクリックします。
認証コードを入力して、左の「Import Git Repository」の欄に「GitHub」で作ったリポジトリの一覧がある画面になったら、「Vercel」と「GitHub」の連携は一旦終了です。
ということで、「Vercel」と「GitHub」の連携の手順を解説してきましたが、いかがだったでしょうか。
VercelとGitHubを連携できると、AIで作ったHTMLやWebツールを公開しやすくなります。
ただ、公開するときは手順だけでなく、「見せてよい情報か」「APIキーや個人情報が入っていないか」「あとから更新できる状態になっているか」も確認しておくと安心です。
今後、GitHub PagesやVercelで公開するときの手順、つまずきやすいポイント、公開前チェックをまとめた初心者向け手順書も作る予定です。
では、今日はこんなところで失礼しまっす！さいなら～
