{"id":239,"date":"2016-06-19T05:22:19","date_gmt":"2016-06-18T21:22:19","guid":{"rendered":"https:\/\/vinta.ws\/code\/?p=239"},"modified":"2026-03-17T01:18:11","modified_gmt":"2026-03-16T17:18:11","slug":"setup-a-static-website-on-amazon-s3","status":"publish","type":"post","link":"https:\/\/vinta.ws\/code\/setup-a-static-website-on-amazon-s3.html","title":{"rendered":"Setup a static website on Amazon S3"},"content":{"rendered":"<p>Say that you would like to host your static site on Amazon S3 with a custom domain and, of course, HTTPS.<\/p>\n<h2>Create two S3 buckets<\/h2>\n<p>To serve requests from both root domain such as <code>codetengu.com<\/code> and subdomain such as <code>www.codetengu.com<\/code>, you must create two buckets named exactly <code>codetengu.com<\/code> and <code>www.codetengu.com<\/code>.<\/p>\n<p>In this post, I assume that you want to redirect <code>www.codetengu.com<\/code> to <code>codetengu.com<\/code>.<\/p>\n<p>ref:<br \/>\n<a href=\"https:\/\/docs.aws.amazon.com\/AmazonS3\/latest\/dev\/website-hosting-custom-domain-walkthrough.html\">https:\/\/docs.aws.amazon.com\/AmazonS3\/latest\/dev\/website-hosting-custom-domain-walkthrough.html<\/a><\/p>\n<h2>Upload your static files<\/h2>\n<pre class=\"line-numbers\"><code class=\"language-bash\">$ cd \/path\/to\/your_project_root\/\n\n$ aws s3 sync . s3:\/\/codetengu.com \n--acl \"public-read\" \n--exclude \"*.DS_Store\" \n--exclude \"*.gitignore\" \n--exclude \".git\/*\" \n--dryrun\n\n$ aws s3 website s3:\/\/codetengu.com --index-document index.html --error-document error.html<\/code><\/pre>\n<p>ref:<br \/>\n<a href=\"https:\/\/docs.aws.amazon.com\/cli\/latest\/reference\/s3\/sync.html\">https:\/\/docs.aws.amazon.com\/cli\/latest\/reference\/s3\/sync.html<\/a><\/p>\n<h2>Setup bucket policy for public accessing<\/h2>\n<p>In your S3 Management Console, click <code>codetengu.com<\/code> bucket &gt; Properties &gt; Edit bucket policy, enter:<\/p>\n<pre class=\"line-numbers\"><code class=\"language-json\">{\n    \"Version\": \"2012-10-17\",\n    \"Statement\": [\n        {\n            \"Sid\": \"AddPerm\",\n            \"Effect\": \"Allow\",\n            \"Principal\": \"*\",\n            \"Action\": \"s3:GetObject\",\n            \"Resource\": \"arn:aws:s3:::codetengu.com\/*\"\n        }\n    ]\n}<\/code><\/pre>\n<h2>Setup www redirecting<\/h2>\n<p>In your S3 Management Console, click <code>www.codetengu.com<\/code> bucket &gt; Properties &gt; Static Website Hosting, choose Redirect all requests to another host name, type <code>codetengu.com<\/code>.<\/p>\n<p>Now you're able to access your website via:<\/p>\n<ul>\n<li><a href=\"http:\/\/codetengu.com.s3-website-ap-northeast-1.amazonaws.com\/\">http:\/\/codetengu.com.s3-website-ap-northeast-1.amazonaws.com\/<\/a><\/li>\n<li><a href=\"http:\/\/www.codetengu.com.s3-website-ap-northeast-1.amazonaws.com\">http:\/\/www.codetengu.com.s3-website-ap-northeast-1.amazonaws.com<\/a><\/li>\n<\/ul>\n<h2>Configure a custom domain<\/h2>\n<p>In the &quot;Setting Up a Static Website Using a Custom Domain&quot; guide I mentioned above, it uses Amazon Route 53 to manage DNS records; in this post, I use CloudFlare as my website's DNS provider instead.<\/p>\n<ul>\n<li>Create a CNAME for <code>codetengu.com<\/code> to point to <code>codetengu.com.s3-website-ap-northeast-1.amazonaws.com<\/code><\/li>\n<li>Create a CNAME for <code>www.codetengu.com<\/code> to point to <code>codetengu.com.s3-website-ap-northeast-1.amazonaws.com<\/code><\/li>\n<\/ul>\n<p>Yep, you CAN create a CNAME record for root domain on CloudFlare, just like you can add an &quot;Alias&quot; on Route 53.<\/p>\n<p>Wait for the DNS records to propagate then visit <a href=\"https:\/\/codetengu.com\/\">https:\/\/codetengu.com\/<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Say that you would like to host your static site on Amazon S3 with a custom domain and, of course, HTTPS.<\/p>\n","protected":false},"author":1,"featured_media":763,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,116],"tags":[16,17],"class_list":["post-239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-about-devops","category-about-web-development","tag-amazon-web-services","tag-aws-s3"],"_links":{"self":[{"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/posts\/239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/comments?post=239"}],"version-history":[{"count":0,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/posts\/239\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/media\/763"}],"wp:attachment":[{"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/media?parent=239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/categories?post=239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vinta.ws\/code\/wp-json\/wp\/v2\/tags?post=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}