テンプレートフォルダをGitHubレポジトリにアップロードしよう

パート１で、テンプレートフォルダを編集しました。更新された内容で、さっそくブログを公開してみましょう。今回は、Netlifyという無料のホスティングサービスを使ってサイトを公開します。

Netlifyを使うには、はじめにGithubというオンラインでファイルを管理するためのサービスを使い、テンプレートフォルダをアップロードする必要があります。

Githubのアカウントをお持ちでない場合、こちらから作成してください。

アカウント作成後、右上の「＋」ボタンから「New repository」を選び、新しいレポジトリ（ファイルの置き場）を作成してください。

レポジトリ作成後、レポジトリのトップページにて、レポジトリへのリンクをコピーしてください。

その後、VSCodeに戻り、ターミナルにて次のコードを順番に一行ずつ連続して実行してください。

$ git init
$ git add .
$ git commit -m"changed title"
$ git remote add origin <先ほどコピーしたレポジトリのURL>
$ git push -u origin master

途中でGithubのアカウント名・パスワードを聞かれた場合は、それらをターミナルに入力してください。

pushが完了すると、先ほど作成したレポジトリにテンプレートファイルがアップロードされているはずです。

NetlifyとGitHubを連携させよう

これでGitHubの準備は整ったので、Netlifyと連携させて、ブログを公開します。Netlifyのアカウントを持っていない場合は、こちらからアカウントを作成してください。

アカウント作成後、「Sites」ページの右上にある「New site from Git」をクリックしてください。

すると、下のページに移るので、「GitHub」を選び、GitHubアカウントとの連携を行います。

GitHubアカウントとの連携が成功すると、GitHubレポジトリの一覧が現れるので、テンプレートフォルダがアップロードされているレポジトリを選択してください。

最後に、デプロイ（静的ファイルを生成し、ブログとして公開する作業）に関する設定を行います。下のように、「Build command」は「npm run generate」、「Publish directory」は「dist」とし、「Deploy site」をクリックしてください。

Netlifyでのデプロイプロセスが完了すると、自動生成されたURLにサイトが公開されています。URLを変更したい場合は、サイトトップページから「Site settings」を選び、「Site information」ボックス下部の「Change site name」から任意の文字列に変更できます。

URLへアクセスし、ブログが公開されていることが確認できれば、成功です。

現時点では、サンプル記事が表示されています。次回は、ContentfulというCMSのアカウントを作成して記事を作成し、サンプル記事と置き換えていきます。