Gatsby+Netlifyでブログサイトを構築


Published on April 02, 2020

GitHubにリポジトリを作成

まずは、GitHubにリポジトリを作成します。 Privateでも問題ないです。

Gatsbyをインストール

$ npm install -g gatsby-cli

テーマ選択

豊富なテーマがあります。(こちらから確認してみてください。)

今回はdelogというStarterパッケージを利用します。

$ gatsby new blog-name https://github.com/W3Layouts/gatsby-starter-delog
$ cd blog-name
$ gatsby develop  

ビルドが完了すると、以下のようなサイトがローカル(http://localhost:8000)で確認できます。

delog


確認できたら、リポジトリにpushしておきましょう!
$ git remote add origin https://github.com/yourname/your-repository-name.git
$ git push -u origin master

Netlifyの設定

Netlifyにアクセスして、Signupしましょう。

netlify signup

GitHubを選択すると、許可を求められますので承諾します。

リポジトリ連携

New site from Gitというボタンを押して、

new site from git button


GitHubを選択して、先ほど作成したGitのリポジトリを連携させます。

create new site

Netlifyがリポジトリにアクセスできるように権限確認画面が表示されます。

Only select repositoriesを選んで、先ほど作成したリポジトリをプルダウンから選択しましょう。

authorize netlify

無事権限設定が終わると、選択したリポジトリが以下のようにリスト表示されます。

repository list

リポジトリを選択して、deploy設定画面へ。

deploy settings

あとは、Deploy Siteを押せばデプロイされます。

独自ドメイン設定

Netlifyから提供されるアドレスではなく独自ドメインの設定も可能です。

Netlifyでドメインを設定する前に、ドメイン管理サービス(お名前.comなど)のドメイン管理画面でDNSの設定を追加します。

www.your-domain.com   CNAME  netlifyから提供されたSubDomain

Domain management画面で独自ドメインを追加します。

domains

Add custom domainを選択して、ドメインを追加します。

add custom domain

If you like it, share it!