Route53 + S3 + GatsbyでBlog構築してみた / Create own blog using by Route53, S3 and Gatsby

2020, Jan 02

English follows Japanese

AWSのRoute53とS3利用してこのBlogを作成しました。中身も静的コンテンツとなるのでGatsbyを利用してクイックに構築できました。 全体アーキテクチャはこんな感じ↓です。 Architecture

Route53

今回自分のドメイン(bebenos.uk)で構築したかったためRoute 53から直接ドメインを購入しました。手順はここを参考にしてもらえればと思います。

後述のS3のバケットをエイリアスとして登録すれば公開完了です。

S3

ブログのドメイン(blog.bebenos.uk)で利用するためにバケット名も同じblog.bebenos.ukと作成するのが重要です。 あとはWebホスティングして公開すれば落ちないWebサイトの完成です。

Gatsby

今回は静的コンテンツで作成してS3でホストすることを目的としているのでGatsbyを選択しました。テンプレ集から良さげなのを選んでMacに取り込みます。今回はこちらを選びました。またMacからS3に直接アップロードさせるためにマニュアルに沿って設定すればOKです。アクセス解析のためにGoogle Analyticsを入れておくのも忘れずに実施しましょう。

アップロード

ブログにアップロードする流れは

  • Mac上でブログコンテンツ用意
  • npm buildでビルド
  • npm deployでS3に自動アップロード

これで簡単に自分のブログを構築することができました。 費用もドメイン代と微々たるS3代で年間10$くらいと破格で運用できます。

今後

今後追加でやりたいことは

Create own blog using by Route53, S3 and Gatsby

This blog is constructed by AWS Route53 and S3. All contents will be static, so I choose Gatsby and create it quickly. Architecture overview is following↓. Architecture

Route53

I wanted to use my own domain “bebenos.uk” and purchased this domain from Route53 directly. Then register S3 bucket as alias, you can see the content in public.

S3

It is important to create bucket as same as blog domain name “blog.bebenos.uk”. After creation, publish contents using by web hosting to the public.

Gatsby

I wanted to create static contents and host to S3, Gatsby is very easy framework. Choose template and install to my Mac. In this time, I use [this] templateIn addition, configure S3 upload setting referred from the manual. Don’t forget to add Google Analytics for access analysis.

Upload

Upload flow of new blog post is

  • Prepare blog contents on Mac
  • Build complements using by npm build
  • Upload contents to S3 automatically using by npm deploy

Now I could create my own blog very easily. Maintenance cost is around 10$ per year includes domain fee and S3 hosting fee. It’s very cheap!

What's next?

Next steps I want to do are

  • https : I am planning to use CloudFront -> Click here
  • Build&Deploy automation : use CodeCommit and CodeBuild -> Click here

bebenosuke

# Technology# AWS