Hexoで生成した静的コンテンツをS3に設置してCloudFrontから配信する。
CloudFrontはSSLを使ったほうが低レイテンシーで配信できるみたいなので、速さを気にする人はSSL化してください。このブログは特に速さは気にしないのでhttpで設定します。

awsの設定

まず、S3にbucketを作って、IAMでS3に書き込みするためのユーザを作成する。

bucket作成

S3にHexoのファイルを保存するためのbucketを作成する。
作成したbucketのプロパティで静的ウェブサイトホスティングでウェブサイトのホスティングを有効にしインデックスドキュメントにindex.htmlを設定しておく。

IAMユーザ作成

ユーザ -> 新規ユーザの作成
適当なユーザ名を入力し作成する。ここで表示されるKey / Passwordはメモしておく。
作成したユーザにAmazonS3FullAccessポリシーをアタッチする。

hexoの設定

hexo-deployer-s3でS3にデプロイしようとしたがエラーが出る。簡単に解決できそうにないので他のプラグインを探したところhexo-deployer-aws-s3とhexo-deployer-sync-s3があったのでhexo-deployer-aws-s3を使う。

hexo-deployer-aws-s3 install

$ npm install hexo-deployer-aws-s3 --save

hexo-deployer-aws-s3 設定

基本的にここの手順で行ける。

設定ファイルに以下を設定。
設定は適宜読み替えてください。

$ vi _config.yml
deploy:
  type: aws-s3
  bucket: <bucketname>
  region: ap-northeast-1

AWS SDKの接続情報設定。

$ mkdir ~/.aws
$ vi ~/.aws/credentials
[default]
aws_access_key_id = ****************
aws_secret_access_key = ********************
region=ap-northeast-1

deployできるか確認。

$ hexo g
$ hexo d

ブラウザからbucketname.s3-website-ap-northeast-1.amazonaws.comに接続し表示されることを確認しておく。

CloudFrontの設定

Distributionを作成してもすぐには反映されないので注意。反映されるのには大体20分くらいかかる。
Create Distribution -> webのGet Startedを選択する。
Origin Domain Nameにはbucketname.s3-website-ap-northeast-1.amazonaws.comを入力すること。
特にパフォーマンスは求めないのでPrice ClassはUse Only US, Europe and Asiaを選択した。ドメイン設定するのであればAlternate Domain Namesにwww.example.com, example.comを入力する。Default Root Objectはindex.htmlを入力。

Route53の設定

ドメインは登録されている前提で、wwwなしとwwwに対してAレコードのAliasで作成した********.cloudfront.netを設定する。

設定が完了して20分くらい経ってからhttpで接続すると画面が表示される。ちなみに、httpsはSSL証明書の警告が出る。

検索エンジンに登録

Google Search Consoleで作成したドメインを登録する。検索エンジンに登録する方法はいくつかあるが、このブログではレイアウトのheadタグにmeta(name='google-site-verification', content='*******')を埋め込む方法で登録した。