GatsbyとNetlify（とAWS Route53）を使って30分でブログを作る
はじめに
TwitterもFacebookもインスタもQiitaもnoteもZennもあるけど、もっと気楽に好き勝手書いてついでに勉強にもなるブログを作りたかったんだ。
Gatsby
もう知名度も相当あると思うので詳しくは書かないけども、ReactベースのSSG特化なフレームワーク。
公式にブログ用のテンプレートがあるのでとりあえずそれ使えばなんかそれっぽいのができる。今回はこれ目当てみたいなとこある。
Netlify
これも言わずと知れたホスティングサービス。
無料で適当に置いておくには最高。
ただ、無料には無料なりの制限があるので、その辺りは公式を確認。
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リポジトリ
のREADMEを見てもらえればそれでいい説もある。
までもそれだとローカルで見るしかできないので書いていこう。
4分経過 内容を変更していく
このままだとテンプレートにあるAuthorの記事として公開されちゃうのでAuthorくらいは変えておこうかな。
前節で出来上がったディレクトリ構成のうち、Authorが書かれてるのはこの辺。
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 build 、 publish directory は publid/ 。
んでそのまま 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も使っているので、色々と勉強になるはず。
Discussion