【第3回】GatsbyJS+Netlifyでブログを始める方法

今回は今までで作ってきたブログをGitHubにアップロードして実際に公開する方法を紹介します。アップロードに関してはGitHub Desktopを使うのでGitHubに慣れていなくても大丈夫です。

Githubとは

ここでは簡単に説明します。 詳しくはこちらのサイトを参考にしてください。

Githubとはバージョン管理ツールのことです。ローカル（自分のPC）にファイルを置いている場合、上書き保存してしまうと元のデータは消えてしまいます。また全て編集前・編集後のファイルをコピーしたとしても時間がかかりすぎます。

そこで使うのがGitHubです。GitHubではアップロードすると元のファイルを残したまま更新ができます。また更新内容・理由もメモしておくことができるので、複数人で作業する時にオススメです。

今回GitHubを使ってアップロードする理由ですが、ブログを公開する際にGitHubを使うからです。

Githubのアカウント作成

こちらからGitHubにアクセスしてください。

情報を入力してアカウントを作ります。Usernameは後々使うので、分かりやすい名前を付けておいたほうがいいと思います。

次にレポジトリ（作業領域）を作ります。左上のNEWをクリックして下の画像のように情報を入力してください。レポジトリ名や説明は簡単なもので大丈夫です。

上の画像のようになったらレポジトリ作成は終わりです。

GitHub Desktopのインストール

次にGitHub Desktopをインストールします。コマンドプロンプト・ターミナルからGitを使ってアップロードすることも出来ますが、難しいので今回はGUIツールを使います。

GitHubにアップロード

アップロードする準備をする

先程インストールしたGithub Desktopを使ってGithubにアップロードします。まずは起動してみてください。ログインすると下の画像のようになっていると思います。

次に左上のCurrent Repositoryから作ったレポジトリを選んでクローンします。

1. Current Repositoryをクリック
2. add→Cloneをクリック
3. 自分のレポジトリを選択してCloneをクリック

上手くいくと自分のパソコン内にGithubというフォルダーが作られていると思います。あとはそこにファイルをコピーしていくだけです。

GitHubアップロード

Githubフォルダーにファイルを入れると下の画像のようになると思います。

そしたらSummaryとDescriptionに説明を加えて「commit to master」をクリックします。最後に「Publish branch」をクリックしてアップロード成功です。ブラウザーから確認してみてください。

次はついにNetlifyを使ってブログを公開する方法を紹介します。

Netlifyとは

Netlifyとは静的サイト（gatsbyなど）をホスティングすることができるWEBサービスのことです。GitHubなどと連携させれば3ステップでブログを公開できます。GitHubにも似たような機能としてGitub Pagesというサービスがあります。

実際に使ってみる

冒頭で書いたとおり、3ステップで終わります。連携させるサービスはGitHub・GitLab・Bitbucketがありますが、今回は一般的なGithubと連携させます。

公式サイトにアクセス

こちらのリンクからNetlifyにアクセスします。

アカウント作成

GitHub・GitLab・Bitbucket・Emailから選べますが、今回はGitHubを選びます。

GitHubと接続

「Newsite from Git」をクリックして新しくブログを公開します。僕はいくつかブログを公開しているので、すでに2つ表示されています。

GitHubを選択します。

レポジトリを選択

最後に公開したいフォルダーが入っているレポジトリを選択します。ここで表示されないということは、ブログの構築が上手く行っていないということなので、はじめからやり直すかファイルを修正する必要があります。

上手くいくと後は自動で公開してくれます。僕の場合、独自ドメインがないので説明できませんが、「Setup a custom domain」を選択することで、ドメインを設定できます。

上の画像のようになったら公開成功です。URLをクリックして確認してみてください。

次回は記事の更新方法を紹介します。