Programming

Netlifyを使って、Gatsby.jsブログを独自ドメインで公開する手順

Published: 2020/07/10
GatsbyNetlify

Gatsby.jsブログの公開にはNetlifyというホスティングサービスを使います。

NetlifyとGitHubを連携すると、Gatsbyで作ったサイトがWeb上に公開でき、また更新も自動で反映してくれます。

使うもの

  • GitHub
  • Netlify

事前準備として、GitHubとNetlifyのアカウント(無料プランでOK)を取得しておきます。

GitHubリポジトリにプロジェクトをpushする

GitHubで新しいリポジトリを作成します。

新規リポジトリ作成

プロジェクトフォルダでターミナルを開きます。

スターターブログなどをコピーしてプロジェクトを作った場合、プロジェクトフォルダ内に「.git」が作成されていますので、「.git」を削除しておきます。

rm -rf .git

GitHubのコマンドに従って、リモートリポジトリにプロジェクトをプッシュします。 リモートリポジトリにプッシュ

ローカルリポジトリの新規作成

git init
git add -A
git commit -m "first commit"
git remote add origin https://github.com/emmieworks/gatsby-zeroforest.git

最後の行のURLはリポジトリごとに変わります。

プロジェクトをプッシュ

git push -u origin master

これで、GitHubのリポジトリをみると、ファイル群が追加されています。

Netlifyでサイトを公開

NetlifyにGitHubから新規サイトを登録します。

ログインして、右上の「New Site From Git」というボタンをクリックします。 New Site From Git

ログインして、右上の「New Site From Git」ボタンをクリックします。 New Site From Git

「GitHub」ボタンをクリックします。 New Site From Git

Netlifyと連携させたいリポジトリ(先ほどプッシュしたリポジトリ)を選んで、次に進みます。 New Site From Git

リポジトリを選択します。 New Site From Git

「Deploy Site」をクリックします。 New Site From Git

デプロイが開始します。 New Site From Git

デプロイが終わると https://xxx.netlify.appというURLが表示されます。 これがHPのURLになります。

Netlifyに独自ドメインを設定する(ムームードメインの場合)

独自ドメインを設定します。

SettingsのDomainから、Custom Domainメニューのドメインを追加します。 カスタムドメイン設定

DNS Configurationを設定します。 カスタムドメイン設定

画面に従って、ドメインを設定していきます。

DNS設定

DNS設定

DNS設定

最後にネームサーバーの設定情報が出てくるので、これをドメインのネームサーバーに設定します。 DNS設定

ムームードメインの場合 DNS設定

ムームー管理画面から、該当するドメインを選択>ネームサーバーの設定変更>「取得したドメインで使用する

※「上級者向け」のネームサーバー1〜4に順に入力して、ネームサーバー設定変更ボタンを押して設定完了です。

その後、更新するとき

プロジェクトをビルド。

gatsby build

更新したファイルをリモートリポジトリへプッシュ

git add -A
git commit -m "update"
git push

Netlifyでデプロイされて、ホームページに変更が反映されます。