{"id":3945,"date":"2023-11-04T23:13:57","date_gmt":"2023-11-04T23:13:57","guid":{"rendered":"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/"},"modified":"2023-11-05T05:48:26","modified_gmt":"2023-11-05T05:48:26","slug":"deploying-a-static-website-using-s3-bucket","status":"publish","type":"post","link":"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/","title":{"rendered":"Deploying a Static Website using S3 Bucket"},"content":{"rendered":"

Deploying a Static Website using Amazon S3 Bucket<\/h1>\n

Amazon Simple Storage Service (S3) is a highly scalable, secure, and durable object storage service that can be used to store and retrieve any type of data, including static website files like HTML, CSS, and JavaScript. In this tutorial, we’ll explore how to deploy a static website using S3 bucket.<\/p>\n

1. Create an S3 Bucket<\/h2>\n

Before deploying a static website, we need to create an S3 bucket. To create an S3 bucket, follow these steps:<\/p>\n

    \n
  1. Go to the AWS Management Console and navigate to the S3 service.<\/li>\n
  2. Click the “Create bucket” button.<\/li>\n
  3. Enter a unique name for your bucket. Note that the bucket name must be globally unique across all AWS accounts.<\/li>\n
  4. Select the region where you want to create your bucket. It’s recommended to choose the region that’s closest to your target audience to reduce latency.<\/li>\n
  5. Leave all other settings as default and click the “Create bucket” button.<\/li>\n<\/ol>\n

    2. Upload Website Files to the S3 Bucket<\/h2>\n

    Once you have created the S3 bucket, it’s time to upload your website files to the bucket. To upload website files to the S3 bucket, follow these steps:<\/p>\n

      \n
    1. Click on the newly created bucket to open it.<\/li>\n
    2. Click the “Upload” button.<\/li>\n
    3. Drag and drop your website files into the upload window or click the “Add files” button to select files from your computer.<\/li>\n
    4. Once you have added all the files, click the “Upload” button to start uploading files to the bucket.<\/li>\n
    5. Wait for all files to be uploaded. <\/li>\n<\/ol>\n

      3. Make the S3 Bucket Publicly Accessible<\/h2>\n

      By default, objects stored in S3 buckets are private and can’t be accessed by the public. To make the S3 bucket publicly accessible, follow these steps:<\/p>\n

        \n
      1. Select the files that you want to make public by clicking the checkbox next to the file name.<\/li>\n
      2. Click the “Actions” button and select “Make public”.<\/li>\n
      3. Click the “Confirm” button to make the selected files public.<\/li>\n
      4. Repeat these steps for all the files that you want to make public.<\/li>\n<\/ol>\n

        4. Enable Static Website Hosting<\/h2>\n

        To host a static website on an S3 bucket, we need to enable static website hosting. To enable static website hosting, follow these steps:<\/p>\n

          \n
        1. Click on the bucket that you want to use for website hosting.<\/li>\n
        2. Click the “Properties” tab and then click the “Static website hosting” card.<\/li>\n
        3. Click the “Use this bucket to host a website” checkbox.<\/li>\n
        4. Enter the name of the index document (e.g., index.html) and the error document (e.g., error.html).<\/li>\n
        5. Click the “Save” button.<\/li>\n<\/ol>\n

          5. Configure Bucket Policy<\/h2>\n

          To allow public access to the website hosted on the S3 bucket, we need to configure a bucket policy. A bucket policy is a JSON-based policy document that defines permissions for objects in a bucket. To configure the bucket policy, follow these steps:<\/p>\n

            \n
          1. Click the “Permissions” tab and then click the “Bucket Policy” button.<\/li>\n
          2. Paste the following policy document in the editor replacing your-bucket-name<\/code> with your bucket name.<\/li>\n<\/ol>\n
            {\n    \"Version\": \"2012-10-17\",\n    \"Statement\": [\n        {\n            \"Sid\": \"PublicRead\",\n            \"Effect\": \"Allow\",\n            \"Principal\": \"*\",\n            \"Action\": [\n                \"s3:GetObject\"\n            ],\n            \"Resource\": [\n                \"arn:aws:s3:::your-bucket-name\/*\"\n            ]\n        }\n    ]\n}\n<\/code><\/pre>\n
              \n
            1. Click the “Save” button to save the bucket policy.<\/li>\n<\/ol>\n
              6. Test the Website<\/h2>\n
              Now that you have deployed your static website on the S3 bucket, it’s time to test it. To test the website, follow these steps:<\/p>\n
                \n
              1. Copy the endpoint URL from the “Static website hosting” card on the “Properties” tab of your S3 bucket. The URL should look like this: `http:\/\/your-bucket-name.s3-website.your-region.amazonaws.com\/`<\/li>\n
              2. Open a web browser and paste the endpoint URL in the address bar.<\/li>\n
              3. Press Enter to load the website.<\/li>\n
              4. If the website loads successfully, congratulations! Your website has been successfully deployed on the S3 bucket.<\/li>\n<\/ol>\n
                Conclusion<\/h2>\n
                Amazon S3 is a simple and cost-effective solution for deploying static websites. With S3, you can store and serve files, and it also provides a secure and scalable infrastructure. By following the steps outlined in this tutorial, you can easily deploy your static website on an S3 bucket.<\/p>\n","protected":false},"excerpt":{"rendered":"
                Deploying a Static Website using Amazon S3 Bucket Amazon Simple Storage Service (S3) is a highly scalable, secure, and durable object storage service that can be used to store and retrieve any type of data, including static website files like HTML, CSS, and JavaScript. In this tutorial, we’ll explore how Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[488,489,491,486,493,492,490,487,485],"yoast_head":"\nDeploying a Static Website using S3 Bucket - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Deploying a Static Website using S3 Bucket\" \/>\n<meta property=\"og:description\" content=\"Deploying a Static Website using Amazon S3 Bucket Amazon Simple Storage Service (S3) is a highly scalable, secure, and durable object storage service that can be used to store and retrieve any type of data, including static website files like HTML, CSS, and JavaScript. In this tutorial, we’ll explore how Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:13:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:48:26+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Panther\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t            },\n\t            \"headline\": \"Deploying a Static Website using S3 Bucket\",\n\t            \"datePublished\": \"2023-11-04T23:13:57+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:26+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/\"\n\t            },\n\t            \"wordCount\": 651,\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"\\\"AWS S3\\\"\",\n\t                \"\\\"hosting websites on S3\\\"\",\n\t                \"\\\"how to deploy a website using S3 Bucket\\\"\",\n\t                \"\\\"S3 Bucket\\\"\",\n\t                \"\\\"S3 website deployment\\\"]\",\n\t                \"\\\"S3 website hosting\\\"\",\n\t                \"\\\"static website hosting\\\"\",\n\t                \"\\\"website deployment\\\"\",\n\t                \"[\\\"Deploying a static website\\\"\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/\",\n\t            \"url\": \"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/\",\n\t            \"name\": \"Deploying a Static Website using S3 Bucket - Pantherax Blogs\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-11-04T23:13:57+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:26+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"http:\/\/localhost:10003\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Deploying a Static Website using S3 Bucket\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": \"required name=search_term_string\"\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"width\": 1024,\n\t                \"height\": 1024,\n\t                \"caption\": \"Pantherax Blogs\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t            \"name\": \"Panther\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t                \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"caption\": \"Panther\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/localhost:10003\"\n\t            ],\n\t            \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Deploying a Static Website using S3 Bucket - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/","og_locale":"en_US","og_type":"article","og_title":"Deploying a Static Website using S3 Bucket","og_description":"Deploying a Static Website using Amazon S3 Bucket Amazon Simple Storage Service (S3) is a highly scalable, secure, and durable object storage service that can be used to store and retrieve any type of data, including static website files like HTML, CSS, and JavaScript. In this tutorial, we’ll explore how Continue Reading","og_url":"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:13:57+00:00","article_modified_time":"2023-11-05T05:48:26+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"Deploying a Static Website using S3 Bucket","datePublished":"2023-11-04T23:13:57+00:00","dateModified":"2023-11-05T05:48:26+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/"},"wordCount":651,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"AWS S3\"","\"hosting websites on S3\"","\"how to deploy a website using S3 Bucket\"","\"S3 Bucket\"","\"S3 website deployment\"]","\"S3 website hosting\"","\"static website hosting\"","\"website deployment\"","[\"Deploying a static website\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/","url":"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/","name":"Deploying a Static Website using S3 Bucket - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:13:57+00:00","dateModified":"2023-11-05T05:48:26+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/deploying-a-static-website-using-s3-bucket\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"Deploying a Static Website using S3 Bucket"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3945"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=3945"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3945\/revisions"}],"predecessor-version":[{"id":4581,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3945\/revisions\/4581"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=3945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=3945"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=3945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}