Gatsby.js と AWS Amplify を使って爆速でブログサイトをデプロイする

概要

CX事業本部の佐藤です。

Gatsby.js という React ベースの静的サイトジェネレータがあります。 それを AWS Amplify でデプロイして爆速でブログサイトをデプロイできましたので、手順を記事にしたいと思います。

Gatsby.js とは

https://www.gatsbyjs.org/

React のフレームワークの一種で、静的サイトジェネレータです。静的サイトジェネレータとは、 ブログの記事やWebページなどをあらかじめビルド時に生成しておき、デプロイ後はそれを表示するだけにすることで、 Webサイトが高速に動作するようにした技術です。 Gatsby.js を使うことで、Wordpress などの CMS や Markdown ファイル、DB などからデータを取得して、 それを事前にビルドしてWebページに変換してデプロイすることが可能です。

Gatsby.jsを使って爆速でブログサイトを作成する

まずは、ブログサイトをGatsby.jsを使ってサクッと作ってしまいます。Gatsby.jsにはテーマやプラグインなどが豊富にあり、 サイトのデザインや動作をプラグインで簡単に実現することが可能となっています。

インストール

Gatsby.js の CLI をインストールします。

npm install -g gatsby-cli

今回は、Gatsby.jsのブログスタータープロジェクトを使うため、以下をインストールします。

https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/

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

インストールできたら、今いるディレクトリに my-blog フォルダが作られていると思うので、移動します。 この段階でお好きなエディタ（Visual studio codeなど）でディレクトリを開いておきます。

cd my-blog
code . // vscodeで今いるディレクトリを開く

ローカルで実行してみる

まずこの段階でローカルでうまくいくかどうかを試してみます。

yarn develop

すると、localhost:8000 でアクセスできるようになります。うまくアクセスできれば成功です。

http://localhost:8000/

記事を追加してみる

このブログスターターでは、取得するデータ元が Markdown となっているので、Markdown ファイルを追加するだけで記事を追加することができます。 このプロジェクトでは、ディレクトリ直下の content/posts 配下に Markdownファイルを追加することで、記事を追加することができます。

追加する際の書式は、以下の用になっています。

• title: 記事タイトル
• date: 記事の日付
• tags 記事のタグ

---
title: テストブログ記事
date: 2020-04-02
tags: ['gatsby', 'amplify']
---

Hello Gatsby.js!

追加したら適当な名前で保存します。するとホットリロードでブログサイトが勝手に更新されます。 もう一度ローカルのブログサイトにアクセスします。

http://localhost:8000

追加したMarkdownファイルの記事が反映されていればOKです。

AWS Amplify でデプロイする

Gatsby.js自体は、いろいろなホスティングサービスに対応していますが、今回は AWS Amplifyを使ってデプロイしてみたいと思います。

Amplify Consoleでは、GitHubなどのリポジトリをソースにビルド、ホスティングを行います。 今回は、GitHubをソースにするため、まずはGitHubに適当な名前で空のリポジトリを作成します。

すでに、Gatsby.jsのプロジェクトは作成しているので、以下のコマンドでGitHubにPushします。

git remote add origin https://github.com/{ユーザー名}/{リポジトリ名}.git
git push -u origin master

Push が終わったら、Amplify Console にアクセスします。画面上の Deploy の Getting Started をクリックします。

GitHub を選択して、 Continue を押します

リポジトリブランチの追加で先程作ったGitHubのリポジトリを選択します。私の場合は、my-blog として作成しました。 また、ブランチは master を選択します。

ビルド設定の構成は、今回は特に修正するところはないので、そのまま次へにします。

内容を確認して、保存してデプロイ します。

管理画面に遷移すると、ビルドが開始されています。5分ほど待つと以下の用にチェックマークが付きます。すべてのチェックマークが 付けばデプロイ成功です。

管理画面のURLにアクセスしてみます。先程ローカルで実行したブログサイトと同じページが表示されていれば成功です。

まとめ

わずか30分ほどで、簡単なサイトを作成してデプロイまでできました。プラグインやテーマも豊富にあるので、自分好みのサイトが 簡単に作成できると思います。また、CSSやReactの知識がある人は、固定ページの追加やテーマデザインのカスタマイズも できるので、チャレンジしてみてはいかがでしょうか。