My Awesome Blog

GatsbyとNetlifyでブログを作る

GatsbyとNetlify

Gatsby

  • React製の静的サイトジェネレーター

Netlify

  • 静的なサイトのホスティングサービス
  • Githubと連携してPushしたら自動でデプロイ
  • 無料でHTPPS
  • SPA向けのプリレンダリングなど(有料)

作り方

Gatsbyをインストールする

npmでGatsbyをグルーバルインストールする

$ npm install -g gatsby

Gatsbyプロジェクトを作成する

$ gatsby new hoge https://github.com/gatsbyjs/gatsby-starter-blog

今回はブログを作るため、 https://github.com/gatsbyjs/gatsby-starter-blog を指定する

何も指定しない場合には https://github.com/gatsbyjs/gatsby-starter-default になる

↑が完了すると hoge ディレクトリが出来ているので移動する

$ gatsby develop

上記のコマンドを実行することでサーバーが立ち上がってブラウザから http://0.0.0.0:8000 などで確認することが出来る

Node.jsのバージョンを指定する

node -v > .nvmrc

Netlifyでは任意のNode.jsのバージョンを使用できるので .nvmrc で指定する

Gitのリポジトリを作成する

NetlifyでGitと連携してデプロイするため適宜レポジトリを作成しておく

NetlifyとGitを連携する

CLIからも行えるが今回はブラウザを使用した

  1. 新しいプロジェクトを追加する

new project

  1. Githubと連携する

link github

Githubをクリックするとオーソライズ画面が出るので承認する

  1. デプロイの設定をする

settings

承認が完了するとリポジトリの選択画面に遷移するので該当するものを選択する

デプロイの設定

  • Branch
    • 適宜(master等)
  • Publish directory
    • /public
    • ↑gatsbyのビルドのデフォルトの出力先
  • Build command
    • gatsby build --prefix-links
    • --prefix-linksconfig.toml で設定した linkPrefix を有効にしたい場合に必要

ビルド

build

デプロイ設定ページで save をクリックするとサイトがビルドされブラウザで確認出来るようになる

その他

詳細については下記 参考 リンクを参照

カスタムドメインに変更

domain

  1. カスタムドメインを取得しておく

  2. DNSの設定をする

dns

今回であれば www.bear.tokyo のため

のように設定した

HTTPSに変更

https

画像のページで Let's Encrypt Certificate をクリックするだけで完了

リダイレクト

  1. Publish directory/public_redirect ファイルを作成する
  2. 今回は www.bear.tokyo/blog 配下をブログとして表示したかったので _redirect を以下のように設定した
/ /blog/ 301
/blog/* /:splat 200

プリレンダリング

  • 無料プラン以外のプランで使える
  • BASICプランなら9ドルで契約できるがそんなに更新するかわからないので様子見

今後の予定

  • gatsby-starter-blog のままなので何かCSSフレームワークをあてる
  • Reactの部分も少しカスタマイズしていく

参考

Posted March 8, 2017
READ THIS NEXT:

RailsガイドMEMO #はじめに -Railsをはじめよう-

副業でRailsを使う機会があり雰囲気で何となくで書いている部分があったので確認のため読み始めた 出来るだけ書き続けれるように最初は雑に書いていく Railsをはじめよう 1 本ガイドの前提条件 特になし (Dockerでも用意してみたい) 2 Railsとは何か 同じことを繰り返すな (Don’t Repeat Yourself: DRY...


author KumaWritten by Kuma who lives and works in Roppongi.