まず初めに
- 動的なコンテンツを表示したいですか？ -> Yes（お問い合わせフォームが欲しい、ログイン機能が欲しい等）
  残念ですが、この記事は参考になりません。静的ページのみ対象です。
AWSを使用します。クレジットカードなどが必要になります。

#速いとは
CDNを利用しているから
CDNとは？
https://www.akamai.com/jp/ja/cdn/what-is-a-cdn.jsp

#安いとは？
CDNのお値段比較
https://qiita.com/maru3/items/fa62f73e6476b8112787
AWSが最安とは言っていない。
ただ、cloudfront <-> S3間の通信費が必要ない。

#うまいとは？
＊

#手順

まず、作りたいホームページのドメインを取得する。
Route53で購入しよう。
"hasami.uk" というものを私は購入しました。実家がイギリスの鋏屋さんです。
S3にバケットを作成しよう。

購入したドメインのS3と、www."購入したドメイン"　の２つを作成する。
私の場合
hasami.uk　　こっちはパブリックアクセスブロックしてよし。ブラウザで直接　hasami.ukとアクセスされた時に　https://www.hasami.uk/にリダイレクトさせるために作成。

www.hasami.uk　こっちはパブリックアクセスのチェックを全部外す。注意のところはよく読んでチェックしよう。

の２つのバケットを作成した。

hasami.ukの方のバケットには
S3＞プロパティ＞静的ウェブサイトホスティング
の編集を行う。　デフォが無効になっているので　有効にして・・

で　「オブジェクトのリクエストをリダイレクトする」
「ホスト名」に　wwwツキの方を書き込んでおく。プロトコルはHTTPを選んでください。

変更の保存。

www.hasami.ukの方に　アクセス許可たぶ＞バケットポリシーを設定する。aws:Refererに　お好きな文字列（長めがいい）を設定しておく。

{
    "Version": "2012-10-17",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "Allow get requests originating1234567890",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.hasami.uk/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "himitsu_desu"
                }
            }
        }
    ]
}

変更を保存し、
ここでテストしよう。

バケットウェブサイトエンドポイントに対して、普通にcurlをするとアクセスdenied

katsura@iMac ~ % curl  http://www.hasami.uk.s3-website-ap-northeast-1.amazonaws.com/ 
<html>
<head><title>403 Forbidden</title></head>
<body>
<h1>403 Forbidden</h1>
<ul>
<li>Code: AccessDenied</li>
<li>Message: Access Denied</li>
<li>RequestId: 3HE75TKEW5ZH2N7X</li>
<li>HostId: OcM68kP+jYV3rPVbNp2ERb/xG75KdD1oLA+qFW3WK9ZiDUYMtZaMqJuz64gPyJ91eryU59mcno0=</li>
</ul>
<hr/>
</body>
</html>

バケットポリシーで設定したRefererヘッダを付与した場合、コンテンツが見られることをかくにん。

katsura@iMac ~ % curl -H 'Referer:himitsu_desu' http://www.hasami.uk.s3-website-ap-northeast-1.amazonaws.com/
<!doctype html>
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>ハサミ</title>
    </head>
    <body>
        <h1>ハサミ</h1>
        <p>It works!</p>
    </body>
</html>%

Route53の方にも設定が必要だ。

レコード名を　トップレベルのドメイン　つまり　レコード名　を空「から」で　レコードタイプを「A」
トラフィックのルーティング先　として　INFOスイッチをONにすると　S3ウェブサイトエンドポイントへのエイリアスが出てくる。
S3作ったリージョンを選ぶと　無事に　hasami.ukバケットがあるので　選択し、レコードを作成。

ここでテストしよう

katsura@iMac ~ % curl -D - hasami.uk   
HTTP/1.1 301 Moved Permanently
x-amz-id-2: MnaE3tDh6+ghBk6ZTPxcUR0bHSZdew6ebPuw4djzFOpyHmnc0wnFMQ8ZP5ALjaImxObfA+0CWwA=
x-amz-request-id: BBSB6G8KWDVGZVJE
Date: Sat, 20 Mar 2021 10:20:29 GMT
Location: http://www.hasami.uk/
Content-Length: 0
Server: AmazonS3

301と言われているのでOKだ。

次にwww.hasami.ukにコンテンツをアップロードする。　これがホームページの素材だ。
適当にindex.html (つまりトップページ)を書き込んでっと。

ホームページのコンテンツは完成した。

これをHTTPSで配信する。
www.hasami.uk のS3バケットも　静的ウェブサイトホスティングの有効化を行う。
今度は　「静的ウェブサイトをホストする」　ラジオボタンをONにして
インデックスドキュメントとして　index.htmlを指定する。
（エラーページも用意してもいいかもしれない。）

変更の保存を行う。

#やっとcloudfrontですね。

ここ英語です。
create Distributionをクリック。　＞　Get　Started
先にACMで証明書を作っておきましょう。
今回はwww.hasami.ukの証明書。

（ここのフローを進めるとRoute53に自動でレコード作ってくれます。）
作成できたら
cloudfrontに戻って

OK

オリジンの設定をする。　OriginDomainNameにS3バケットが選択できるので　wwwを選択する。

最後のOrigin Custom Headerに
Header Name 「Referer」、Value「S3のバケットポリシーで設定したやつ（himitsu_desu）」を入れる
あとはデフォでいいと思います。

最後にRoute53に
なんとか.cloudfront.com -> www.hasami.ukに名前解決させたいので
作成したcloudfront のgeneralタブに　DomainNameが書いてあるので

これをRoute53にCNAMEで登録する。

完成だ。

最終確認

katsura@iMac ~ % curl -D - https://www.hasami.uk
HTTP/2 200 
content-type: text/html
content-length: 248
date: Sat, 20 Mar 2021 12:33:38 GMT
last-modified: Sat, 20 Mar 2021 12:15:07 GMT
etag: "7870ebfca42a75a820cd96e145cdb6b4"
accept-ranges: bytes
server: AmazonS3
x-cache: Hit from cloudfront
via: 1.1 853dab48fd1de187261c15f5b98cd2a0.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT20-C4
x-amz-cf-id: GyJDgpudMNhmxFjrIItzu2B0YnYv8nMusXpcn6aaRt0zjES1SAGz2Q==
age: 7

<!doctype html>
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>ハサミ</title>
    </head>
    <body>
        <h1>ハサミ</h1>
        <p>It works!</p>
    </body>
</html>%

katsura@iMac ~ % curl -D - hasami.uk  
HTTP/1.1 301 Moved Permanently
x-amz-id-2: ALlahY+LWzoFtb2CYm1cslzd1gnwo2Mor7H7lkFqWoVePY6iacczqOM+wtJyIKUi4jJJ0zzOXk8=
x-amz-request-id: V28H69F8RC1CANTP
Date: Sat, 20 Mar 2021 12:35:30 GMT
Location: http://www.hasami.uk/
Content-Length: 0
Server: AmazonS3

お疲れ様でした。
あとはS3にコンテンツを増やしていこう。