GatsbyとNetlify(とAWS Route53)を使って30分でブログを作る

4 min read読了の目安(約4300字

はじめに

TwitterもFacebookもインスタもQiitaもnoteもZennもあるけど、もっと気楽に好き勝手書いてついでに勉強にもなるブログを作りたかったんだ。

Gatsby

もう知名度も相当あると思うので詳しくは書かないけども、ReactベースのSSG特化なフレームワーク。

公式にブログ用のテンプレートがあるのでとりあえずそれ使えばなんかそれっぽいのができる。今回はこれ目当てみたいなとこある。

https://www.gatsbyjs.com/

Netlify

これも言わずと知れたホスティングサービス。

無料で適当に置いておくには最高。

ただ、無料には無料なりの制限があるので、その辺りは公式を確認。

https://www.netlify.com/pricing/

AWS

これも(略

筆者は普段AWSを使って仕事をしているので、ドメインやらなんやらというとまず選んでしまう。

別にお名前.comでもなんでもいい。

開始

めんどくさいので git やら node やらはインストールされているものとしたい。そうする。

1分経過 gatsby-cliをインストール

npmの場合

$ npm install -g gatsby-cli

yarnの場合

$ yarn global add gatsby-cli

これで gatsby コマンドが使えるようになる。

今後はこの gatsby コマンドを使って色々やってく。

3分経過 テンプレート探してプロジェクトをnew

GatsbyがGatsbyたる所以。Starter と言われるテンプレートでプロジェクトを開始できる。

今回はブログ用のStarterでやっていく。

チュートリアルだと hello-world ってStarterで書いてあるやつ。

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

ぶっちゃけこの後はこのStarterリポジトリ

https://github.com/gatsbyjs/gatsby-starter-blog

のREADMEを見てもらえればそれでいい説もある。

までもそれだとローカルで見るしかできないので書いていこう。

4分経過 内容を変更していく

このままだとテンプレートにあるAuthorの記事として公開されちゃうのでAuthorくらいは変えておこうかな。

前節で出来上がったディレクトリ構成のうち、Authorが書かれてるのはこの辺。

./gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Blog`,
    author: {
      name: `Kyle Mathews`,
      summary: `who lives and works in San Francisco building useful things.`,
    },
    description: `A starter blog demonstrating what Gatsby can do.`,
    siteUrl: `https://gatsby-starter-blog-demo.netlify.app/`,
    social: {
      twitter: `kylemathews`,
    },
  },

~~~~

siteMetadata.author.name やら siteMetadata.author.summary やらその辺を一通り変更しておく。

あとプロフィール画像。

./content/assets/profile-pic.jpg

がテンプレートの画像なので、これも同名のプロフィール画像で上書きしとく。

./src/components/bio.js で参照されてるのでファイル名変えるならここも。

5分経過 記事も変えておこうかな

さすがに記事もそのまんまじゃアレがアレなので、

  • ./content/blog/hello-world
  • ./content/blog/my-second-post
  • ./content/blog/new-beginnings

がデフォルトの記事群なので、こいつらも変えておかないとみんな同じ内容のブログになっちゃう。

後々のSEO的にも重複コンテンツ扱いになって良くないので変えてから公開しとく。

6分経過 ローカルで確認しよ

Gatsbyのチュートリアルにもある通り、

$ gatsby develop

を叩くとローカルで確認できる。

叩いた結果の出力にもある通り、

http://localhost:8000

ちなみに gatsby develop --help で色々オプションも見ておくといいかも。

~~~
  -H, --host    Set host. Defaults to localhost     [文字列] [デフォルト: "localhost"]
  -p, --port    Set port. Defaults to 8000          [文字列] [デフォルト: "8000"]
~~~

みたいなのはよく使う気がする。

7分経過 とりあえずGithubにPushしとこ

ここはさすがに割愛。

Github上でnew repositoryしてpush。

余談だけどつい最近デフォルトブランチがmainになったので最近リポジトリ作ってない人はびっくりするかも。

8分経過 Netlifyに登録

これまた有名なホスティングサービスのNetlify。

そしてこれまたログインまでは割愛。適当にユーザー登録してログイン。

New site from Git みたいなボタンを押してサイトの登録に。

Github Gitlab Bitbucket とソースコードのホスティングサービスが並んでるのでお好きなものをクリック。

この文脈では Github をチョイス。

Githubの認証が終わったらさっき作ってPushしたリポジトリを選んで、ブランチは main (昔のリポジトリだったら master かも)、build command には gatsby buildpublish directorypublid/

んでそのまま Deploy site を押したら公開完了。

でもこのままだとドメインはNetlifyのものだしHTTPSでもないので次はその辺をやっていく。

10分経過 Netlifyに使いたいドメインを登録

さて、Netlify上で公開が完了したサイトのページに行き、メニューの Site overview を開く。

そうすると上部にサイトのコードネームみたいなものと、 Site settings Domain settings ってボタンがあるので、 Domain settings をクリック。

Custom Domain というボックスの中に、 Add custom domain というボタンがあるのでこれまたクリック。

そしたらドメインを入力する画面になるので、使いたいドメインを入力して Verify ボタン。

今回は例として blog.example.com にしてみよう。

13分経過 AWS Route53でCNAME登録

その後、登録したドメインに Check DNS configuration て文字が見えると思うのでまたクリック。

そこにはDNSレコードとして登録しないといけないものが表示されているはず。

サブドメインで登録する場合には

blog ALIAS foo-bar-12345.netlify.com

みたいな感じ。

その foo-bar-12345.netlify.com って部分をコピっておく。

その後、AWSのRoute53コンソールから、対象のドメインを選択。

レコードを作成 から シンプルルーティング -> シンプルなレコードを定義

ポップアップが開くので、

  • 登録したいサブドメインを登録(今回の場合は blog
  • レコードタイプに応じたIPアドレスまたは別の値
  • さっきコピーした foo-bar-12345.netlify.com みたいなものを貼り付ける
  • レコードタイプは CNAME
  • そのまま シンプルなレコードを定義 ボタンをクリック

30分経過 やったー!

正直 ○分経過 は全部適当なので気にせず。

しばらくNetlifyがドメインの確認やら証明書の作成とかをしてくれるのを待つ。

と、ドメインの欄には Primary Domain みたいな表示が、HTTPSの欄には Your site has HTTPS enabled みたいな表示がされている。

ここまできたら、登録したドメインで、かつHTTPSでアクセスが可能になっているはず。

まとめ

GatsbyもNetlifyも本当に楽。

飲み会から帰ってきて、0時くらいにふと「ブログ作ろう」と思い立ち、本当に30分くらいで独自ドメインのHTTPS対応したブログが出来上がってしまった。

ただまぁこのままではスタイルもだいぶ適当(Starter作者に失礼)なので、その辺りもちゃんとやっていこうかと思う。

その辺りをやっていけば、元々GatsbyはReactベースだし、GraphQLも使っているので、色々と勉強になるはず。