{"id":1249,"date":"2023-12-15T14:40:00","date_gmt":"2023-12-15T14:40:00","guid":{"rendered":"http:\/\/obl.icz.temporary.site\/?p=1249"},"modified":"2024-01-07T23:53:21","modified_gmt":"2024-01-07T23:53:21","slug":"easy-steps-to-configure-a-static-webpage-using-s3","status":"publish","type":"post","link":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/","title":{"rendered":"HOWTO: Easy steps to configure a static webpage using S3"},"content":{"rendered":"\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">You can configure an Amazon S3 bucket to function like a webpage. In this tutorial, you will learn how to set up S3 with Route 53 and CloudFront to host a web page.  This tutorial walks you through the steps of:\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li>Hosting a webpage on Amazon S3.&nbsp;<\/li>\n\n\n\n<li>Create redirects on Amazon S3 for a webpage with a custom domain name that is registered with Route&nbsp;53. (optional)<\/li>\n\n\n\n<li>Create Amazon CloudFront distributions to set up a secure static webpage.<\/li>\n<\/ul>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:var(--wp--preset--spacing--30);padding-right:0;padding-bottom:var(--wp--preset--spacing--30);padding-left:0\">You can also use CloudFront without using Route 53, follow the instructions at &#8211; <a href=\"https:\/\/aws.amazon.com\/cloudfront\/getting-started\/S3\/\">https:\/\/aws.amazon.com\/cloudfront\/getting-started\/S3\/<\/a> to skip setting up a custom domain.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\"><strong>Services used<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li><strong>Amazon S3<\/strong>\n<ul class=\"wp-block-list\">\n<li>You use Amazon S3 to create buckets, upload a sample webpage page, and then configure the buckets for webpage hosting.<\/li>\n\n\n\n<li>Amazon S3 does not support HTTPS access to the webpage. If you want to use HTTPS, you can use Amazon CloudFront to serve a static webpage hosted on Amazon S3.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li><strong>Amazon Route 53<\/strong>\n<ul class=\"wp-block-list\">\n<li>You use Route&nbsp;53 to register custom domains and to define where you want to route internet traffic for your domain.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li><strong>Amazon CloudFront<\/strong>\n<ul class=\"wp-block-list\">\n<li>Amazon CloudFront provides the capabilities required to set up a secure static webpage.&nbsp;<\/li>\n\n\n\n<li>Amazon CloudFront uses the storage of Amazon S3 while providing additional security headers, such as HTTPS. HTTPS adds security by encrypting a normal HTTP request and protecting against common cyberattacks.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li><strong>AWS Certificate Manager<\/strong>\n<ul class=\"wp-block-list\">\n<li>A public certificate is required for your Amazon CloudFront distributions to configure CloudFront to require that viewers use HTTPS so that connections are encrypted when CloudFront communicates with viewers.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:var(--wp--preset--spacing--30);padding-right:0;padding-bottom:var(--wp--preset--spacing--30);padding-left:0\"><strong>Implementation<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Step 1: Register a domain, such as maghildaprojects.com<\/h4>\n\n\n\n<ol class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li>I registered a new domain with AWS, maghildaprojects, to practice projects and start building a portfolio. <\/li>\n\n\n\n<li>The example shows how to create Route&nbsp;53 alias records that route traffic for your domain (maghildaprojects.com) and subdomain (www.maghildaprojects.com) to an Amazon S3 bucket that contains an HTML file.<\/li>\n\n\n\n<li>You can work with an existing webpage that you want to host on Amazon S3, or use this walkthrough to start from scratch.<\/li>\n\n\n\n<li>To register a new domain:\n<ul class=\"wp-block-list\">\n<li>Set it up for one year.&nbsp;<\/li>\n\n\n\n<li>At the time of this writing, the cost to register one domain with AWS is $13 for one year.<\/li>\n\n\n\n<li>Turn off automatic renewal.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Follow the instructions in the following link &#8211; <a href=\"https:\/\/docs.aws.amazon.com\/Route53\/latest\/DeveloperGuide\/domain-register.html\">Register a new domain with Route 53<\/a><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"472\" src=\"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-9-1024x472.png\" alt=\"\" class=\"wp-image-1715\" style=\"width:680px\" srcset=\"https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-9-1024x472.png 1024w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-9-300x138.png 300w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-9-768x354.png 768w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-9.png 1176w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Step 2: Create a certificate for your domain.<\/h4>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">To use Amazon CloudFront, you need to manage your Secure Sockets Layer (SSL) certificate. There are two options:<\/p>\n\n\n\n<ul class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--50)\">\n<li>Use the Default CloudFront Certificate.<\/li>\n\n\n\n<li>Since you are using a custom domain in this tutorial, upload or request a <strong>Custom SSL Certificate <\/strong>from <a href=\"https:\/\/aws.amazon.com\/certificate-manager\/\">AWS Certificate Manager<\/a> (ACM) and associate it to your CloudFront distribution (as noted later in the CloudFront section below). Follow the instructions below &#8211; <\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--60);padding-bottom:0;padding-left:var(--wp--preset--spacing--60)\">\n<li>Sign in to the AWS Management Console and search for Certificate Manager&nbsp;<\/li>\n\n\n\n<li>Make sure you create the certificate in the <strong>US East (N. Virginia)<\/strong> Region. This is required for Amazon CloudFront.<\/li>\n\n\n\n<li>On the left nav, choose <strong>Request a certificate<\/strong>, and on the Request certificate page choose <strong>Request a public certificate<\/strong>, and then Next.<\/li>\n\n\n\n<li>In the <strong>Domain names<\/strong> section, enter your domain, such as maghildaprojects.com.<br>Choose <strong>Add another name to this certificate<\/strong>, enter an asterisk in front of the domain name to request a wildcard certificate for all subdomains, such as *.maghildaprojects.com.<\/li>\n\n\n\n<li>In the <strong>Validation method<\/strong> section, choose <strong>DNS validation<\/strong>.<\/li>\n\n\n\n<li>In the <strong>Key algorithm<\/strong> section, choose <strong>RSA 2048<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Request<\/strong> to be taken to the <strong>Certificates<\/strong> page.<\/li>\n\n\n\n<li>Once your new certificate appears in <strong>Pending<\/strong> status, choose the certificate ID, and on the certificate details page, choose <strong>Create record in Route 53<\/strong> to automatically add the CNAME records for your domains, and then Click <strong>Create records<\/strong>.<\/li>\n\n\n\n<li>The <strong>Certificate status<\/strong> page should open with a status banner reporting <strong>Successfully created DNS records<\/strong>.<\/li>\n\n\n\n<li>Your new certificate might continue to display a status of Pending validation for up to 30 minutes.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1004\" height=\"678\" src=\"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-8.png\" alt=\"\" class=\"wp-image-1714\" style=\"object-fit:cover\" srcset=\"https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-8.png 1004w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-8-300x203.png 300w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-8-768x519.png 768w\" sizes=\"(max-width: 1004px) 100vw, 1004px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Step 3: Create DNS-complaint S3 bucket to redirect to a subdomain.<\/h4>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">To create an S3 bucket for the <strong>root<\/strong> domain maghildaprojects.com<\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li>Sign in to the AWS Management Console and search for S3<\/li>\n\n\n\n<li>Choose Create bucket.<\/li>\n\n\n\n<li>Enter the following values:<br><strong>Bucket name = <\/strong>maghildaprojects<strong>.com<\/strong><br><strong>Region = US East (N. Virginia) Region<\/strong><br>Accept the default settings and create the bucket, click <strong>Create bucket<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"792\" height=\"580\" src=\"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-7.png\" alt=\"\" class=\"wp-image-1713\" style=\"width:680px\" srcset=\"https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-7.png 792w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-7-300x220.png 300w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-7-768x562.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Step 4: Create DNS-complaint S3 bucket to host a webpage.<\/h4>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">To create an S3 bucket for the <strong>subdomain <\/strong>www.maghildaprojects.com (this will host the webpage)<\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li>Choose Create bucket.<\/li>\n\n\n\n<li>Enter the following values:<br><strong>Bucket name = <\/strong>www.maghildaprojects.com<br><strong>Region = US East (N. Virginia) Region<\/strong><br>Accept the default settings and create the bucket, click <strong>Create bucket<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"618\" src=\"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-6.png\" alt=\"\" class=\"wp-image-1712\" style=\"width:680px\" srcset=\"https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-6.png 792w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-6-300x234.png 300w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-6-768x599.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Step 5: Create a sample webpage and save the file in your S3 subdomain bucket.<\/h4>\n\n\n\n<ol class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li>Create an <strong>index.html <\/strong>file. Use the following HTML to create one:<br><\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-72190d31 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-ast-global-color-6-background-color has-background\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">&lt;html xmlns=&#8221;http:\/\/www.w3.org\/1999\/xhtml&#8221; &gt;<br>&lt;head&gt;<br> &lt;title&gt;My Webpage Home Page&lt;\/title&gt;<br>&lt;\/head&gt;<br>&lt;body&gt;<br>&lt;h1&gt;Welcome to my webpage&lt;\/h1&gt;<br>&lt;p&gt;Now hosted on Amazon S3!&lt;\/p&gt;<br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/p>\n<\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--50)\">\n<li>Save the index file locally on your desktop.<\/li>\n\n\n\n<li>To upload the index document to your www<strong>.<\/strong>maghildaprojects<strong>.<\/strong>com bucket, choose <strong>Upload<\/strong>, and follow the prompts to choose and upload the index file.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Step 6: Set up your <strong>root<\/strong> domain bucket for webpage redirect<\/h4>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">To configure all requests for maghildaprojects.com to be redirected to www.maghildaprojects.com, follow the steps below:<\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li>On the Amazon S3 console, in the Buckets list, choose your bucket name maghildaprojects.com<\/li>\n\n\n\n<li>Choose <strong>Properties<\/strong> tab<\/li>\n\n\n\n<li>Under <strong>Static webpage hosting<\/strong>, click Edit<\/li>\n\n\n\n<li>Under <strong>Static webpage hosting<\/strong>, select <strong>Enable<\/strong><\/li>\n\n\n\n<li>Select <strong>Redirect requests for an object<\/strong><\/li>\n\n\n\n<li>In the <strong>Host name<\/strong> box, enter your subdomain, www.maghildaprojects.com<\/li>\n\n\n\n<li>For <strong>Protocol<\/strong>, choose <strong>HTTPS<\/strong><\/li>\n\n\n\n<li>Click <strong>Save changes<\/strong>.<\/li>\n\n\n\n<li>Under Static webpage hosting, note the Endpoint &#8211; <strong>http:\/\/maghildaprojects.com.s3-webpage-us-east-1.amazonaws.com<br><\/strong>The Endpoint is the Amazon S3 webpage endpoint for your bucket. You will use this endpoint to set up an Amazon CloudFront distribution.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"736\" src=\"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-5.png\" alt=\"\" class=\"wp-image-1711\" style=\"width:680px\" srcset=\"https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-5.png 792w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-5-300x279.png 300w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-5-768x714.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Step 7: Create CloudFront distributions for subdomain S3 bucket.<\/h4>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Create a CloudFront distribution for your subdomain www.maghildaprojects.com, to enable your webpage to use HTTPS so people can view it securely.<\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li>Open the CloudFront console at <a href=\"https:\/\/console.aws.amazon.com\/cloudfront\/v4\/home\">https:\/\/console.aws.amazon.com\/cloudfront\/v4\/home<\/a>.<\/li>\n\n\n\n<li>Click <strong>Create Distribution<\/strong>.<\/li>\n\n\n\n<li>Under Origin,\n<ul class=\"wp-block-list\">\n<li><strong>Origin domain<\/strong>, enter the Amazon S3 bucket <a href=\"http:\/\/www.maghildaprojects.com\">www.maghildaprojects.com<\/a> &nbsp;<\/li>\n\n\n\n<li><strong>Origin access<\/strong>, select <strong>Legacy access identities<\/strong>.&nbsp;<\/li>\n\n\n\n<li><strong>Origin access identity<\/strong>, you can choose from the list, or choose Create new OAI (both will work).<\/li>\n\n\n\n<li>For <strong>Bucket policy<\/strong>, select <strong>Yes, update the bucket policy<\/strong>. (Giving access permissions enables CloudFront to read the objects from your bucket.)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Under Default Cache Behavior,\n<ul class=\"wp-block-list\">\n<li><strong>Viewer protocol policy, <\/strong>select <strong>Redirect HTTP to HTTPS<\/strong>&nbsp;<\/li>\n\n\n\n<li>accept the default values for the rest.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>In the Web Application Firewall (WAF) section you can choose <strong>Enable security protections<\/strong>.<\/li>\n\n\n\n<li>Under Settings,\n<ul class=\"wp-block-list\">\n<li>Click <strong>Add item<\/strong> for <strong>Alternate domain name (CNAME)<\/strong> &#8211; enter your <strong>subdomain<\/strong> www.maghildaprojects.com<\/li>\n\n\n\n<li><strong>Custom SSL Certificate<\/strong>, choose the certificate you created previously.<\/li>\n\n\n\n<li><strong>Default root object<\/strong> text box, type in <strong>index.html<\/strong><\/li>\n\n\n\n<li>For the rest, accept the default values<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Click <strong>Create distribution<\/strong>.<\/li>\n\n\n\n<li>After CloudFront creates your distribution, the value of the Status column for your distribution changes from In Progress to Deployed. This typically takes a few minutes.<\/li>\n\n\n\n<li>Record the <strong>Distribution domain name<\/strong> that CloudFront assigns to your distribution, which appears in the list of distributions. You can use this domain name to test the distribution.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"880\" src=\"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-4.png\" alt=\"\" class=\"wp-image-1710\" style=\"width:680px\" srcset=\"https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-4.png 792w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-4-270x300.png 270w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-4-768x853.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Step 8: Create CloudFront distributions for root S3 bucket.<\/h4>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Create a CloudFront distribution for your root domain maghildaprojects.com, to have it use HTTPS when its URL is redirected to the subdomain www.maghildaprojects.com<\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--50)\">\n<li>Open the CloudFront console at <a href=\"https:\/\/console.aws.amazon.com\/cloudfront\/v4\/home\">https:\/\/console.aws.amazon.com\/cloudfront\/v4\/home<\/a>.<\/li>\n\n\n\n<li>Click <strong>Create Distribution<\/strong>.<\/li>\n\n\n\n<li>Under Origin,\n<ul class=\"wp-block-list\">\n<li><strong>Origin domain<\/strong>, enter the bucket <strong>webpage endpoint <\/strong>&#8211; http:\/\/maghildaprojects.com.s3-webpage-us-east-1.amazonaws.com<\/li>\n\n\n\n<li>for the rest, accept default values<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Under Default Cache Behavior,\n<ul class=\"wp-block-list\">\n<li><strong>Viewer protocol policy<\/strong> to <strong>Redirect HTTP to HTTPS<\/strong><\/li>\n\n\n\n<li>accept the default values for the rest.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>In the Web Application Firewall (WAF) section you can choose <strong>Enable WAF security protections<\/strong>.<\/li>\n\n\n\n<li>Under Settings,\n<ul class=\"wp-block-list\">\n<li>Choose <strong>Add item<\/strong> for <strong>Alternate domain name (CNAME)<\/strong> &#8211; enter your <strong>root<\/strong> domain maghildaprojects.com<\/li>\n\n\n\n<li><strong>Custom SSL Certificate<\/strong>, choose the certificate you created previously.<\/li>\n\n\n\n<li>For the rest, accept the default values<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Click <strong>Create distribution<\/strong>.<\/li>\n\n\n\n<li>After CloudFront creates your distribution, the value of the Status column for your distribution changes from In Progress to Deployed. This typically takes a few minutes.<\/li>\n\n\n\n<li>Record the <strong>Distribution domain name<\/strong> that CloudFront assigns to your distribution, which appears in the list of distributions. You can use this domain name to test the distribution.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"1012\" src=\"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-3.png\" alt=\"\" class=\"wp-image-1709\" style=\"width:680px\" srcset=\"https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-3.png 792w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-3-235x300.png 235w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-3-768x981.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Step 9: Route DNS traffic for your subdomain to your CloudFront distribution<\/h4>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">You now have a one-page webpage in your S3 bucket that uses a CloudFront distribution. To start routing internet traffic for your domain to the CloudFront distribution, perform the following procedure.<\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li>Open the Route&nbsp;53 console at <a href=\"https:\/\/us-east-1.console.aws.amazon.com\/route53\/v2\/home\">https:\/\/us-east-1.console.aws.amazon.com\/route53\/v2\/home<\/a>.<\/li>\n\n\n\n<li>In the navigation pane, choose <strong>Hosted zones<\/strong>.<\/li>\n\n\n\n<li>In the list of hosted zones, choose the name of your domain maghildaprojects.com<\/li>\n\n\n\n<li>Click <strong>Create record<\/strong>.<br>If you are in the <strong>Quick create record<\/strong> view, choose <strong>Switch to wizard<\/strong>.<\/li>\n\n\n\n<li>Choose <strong>Simple routing<\/strong> and click <strong>Next<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Define simple record<\/strong>.<\/li>\n\n\n\n<li><strong>Record name<\/strong>, type in www in front of the default value, which is the name of your hosted zone and your domain.<\/li>\n\n\n\n<li><strong>Record type<\/strong>, choose <strong>A \u2010 Routes traffic to an IPv4 address and some AWS resources<\/strong>.<\/li>\n\n\n\n<li><strong>Value\/Route traffic to<\/strong>, choose <strong>Alias to CloudFront distribution<\/strong>.<\/li>\n\n\n\n<li><strong>Choose distribution<\/strong>.<br>The distribution name should match the name that appears in the <strong>Domain name<\/strong> box in the <strong>Distributions<\/strong> list, d2ngn5t8k4m7b1.cloudfront.net<\/li>\n\n\n\n<li>For <strong>Evaluate target health<\/strong>, choose <strong>No<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Define simple record<\/strong>.<\/li>\n\n\n\n<li>On the Configure records page, click <strong>Create records<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"998\" src=\"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-2.png\" alt=\"\" class=\"wp-image-1708\" style=\"width:680px\" srcset=\"https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-2.png 792w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-2-238x300.png 238w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-2-768x968.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Step 10: Route DNS traffic for you root domain to your CloudFront distribution<\/h4>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Add an alias record for your root domain (maghildaprojects.com) so it points to the S3 bucket that redirects traffic to www.maghildaprojects.com.<\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li>Under <strong>Configure records<\/strong>, choose <strong>Define simple record<\/strong>.<\/li>\n\n\n\n<li>In <strong>Record name<\/strong>, accept the default value.<\/li>\n\n\n\n<li>In <strong>Record type<\/strong>, choose <strong>A \u2010 Routes traffic to an IPv4 address and some AWS resources<\/strong>.<\/li>\n\n\n\n<li>In <strong>Value\/Route traffic to<\/strong>, choose <strong>Alias to CloudFront distribution<\/strong>.<\/li>\n\n\n\n<li><strong>Choose distribution<\/strong>.<br>The distribution name should match the name that appears in the <strong>Domain name<\/strong> box in the <strong>Distributions<\/strong> list, for example, d2bcw05eiclhmt.cloudfront.net<\/li>\n\n\n\n<li>For <strong>Evaluate target health<\/strong>, choose <strong>No<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Define simple record<\/strong>.<\/li>\n\n\n\n<li>On the Configure records page, click <strong>Create records<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"1000\" src=\"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-1.png\" alt=\"\" class=\"wp-image-1707\" style=\"width:680px\" srcset=\"https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-1.png 792w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-1-238x300.png 238w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-1-768x970.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Step 11: Test your webpage<\/h4>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">To verify that the webpage is working correctly, open a web browser and browse to the following URLs:<\/p>\n\n\n\n<ul class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)\">\n<li>https:\/\/www.maghildaprojects.com &#8211;&nbsp; Displays the index document in the www.maghildaprojects.com bucket<\/li>\n\n\n\n<li>https:\/\/maghildaprojects.com \u2013 Redirects your request to the www.maghildaprojects.com bucket<\/li>\n<\/ul>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">In some cases, you might need to clear the cache to see the expected behavior.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"434\" src=\"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image.png\" alt=\"\" class=\"wp-image-1706\" style=\"width:680px\" srcset=\"https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image.png 936w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-300x139.png 300w, https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/image-768x356.png 768w\" sizes=\"(max-width: 936px) 100vw, 936px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">Step 12: Clean up<\/h4>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">If you created your static webpage only as a learning exercise, delete the AWS resources that you allocated so that you no longer accrue charges. After you delete your AWS resources, your webpage is no longer available.<\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--50)\">\n<li>Delete the two buckets<\/li>\n\n\n\n<li>Delete the two route 53 A records created above. Keep the other records as-is\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/maghildaprojects.com\">maghildaprojects.com<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.maghildaprojects.com\">www.maghildaprojects.com<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Delete the cloud front distributions\n<ul class=\"wp-block-list\">\n<li>first disable the distributions. this may take a few minutes<\/li>\n\n\n\n<li>then, delete both the distributions<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Do not delete the ssl cert<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\"><strong>Conclusion<\/strong><\/h3>\n\n\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">In addition to the above, you can,<\/p>\n\n\n\n<ul class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--50)\">\n<li>set up logs to assess how many visitors<\/li>\n\n\n\n<li>create custom error pages<\/li>\n\n\n\n<li>automate the creation by using Infrastructure as Code (IaC) &#8211; AWS CloudFormation or Hashicorp\u2019s Terraform<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\"><strong>AWS Document References<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\" style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--50)\">\n<li><a href=\"https:\/\/docs.aws.amazon.com\/AmazonS3\/latest\/userguide\/HostingWebsiteOnS3Setup.html\">Tutorial: Configuring a static webpage on Amazon S3<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/docs.aws.amazon.com\/AmazonS3\/latest\/userguide\/website-hosting-custom-domain-walkthrough.html\">Tutorial: Configuring a static webpage using a custom domain registered with Route&nbsp;53<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.aws.amazon.com\/Route53\/latest\/DeveloperGuide\/getting-started-cloudfront-overview.html\">Use an Amazon CloudFront distribution to serve a static webpage<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>You can configure an Amazon S3 bucket to function like a webpage. In this tutorial, you will learn how to set up S3 with Route 53 and CloudFront to host a web page. This tutorial walks you through the steps of:\u00a0 You can also use CloudFront without using Route 53, follow the instructions at &#8211; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[12,37,33,25],"tags":[36,35,34,27],"class_list":["post-1249","post","type-post","status-publish","format-standard","hentry","category-aws-tutorial","category-cloudfront","category-route-53","category-s3","tag-certificatemanager","tag-cloudfront","tag-route53","tag-s3"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HOWTO: Easy steps to configure a static webpage using S3 - maghilda<\/title>\n<meta name=\"description\" content=\"Configure a static webpage using S3, Route 53 and CloudFront\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HOWTO: Easy steps to configure a static webpage using S3 - maghilda\" \/>\n<meta property=\"og:description\" content=\"Configure a static webpage using S3, Route 53 and CloudFront\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/\" \/>\n<meta property=\"og:site_name\" content=\"maghilda\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-15T14:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-07T23:53:21+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-9-1024x472.png\" \/>\n<meta name=\"author\" content=\"vibs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"vibs\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/\"},\"author\":{\"name\":\"vibs\",\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/#\\\/schema\\\/person\\\/21009c5e4f1817ea18c81d5004bcec1e\"},\"headline\":\"HOWTO: Easy steps to configure a static webpage using S3\",\"datePublished\":\"2023-12-15T14:40:00+00:00\",\"dateModified\":\"2024-01-07T23:53:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/\"},\"wordCount\":1976,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/obl.icz.temporary.site\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/image-9-1024x472.png\",\"keywords\":[\"CertificateManager\",\"CloudFront\",\"Route53\",\"S3\"],\"articleSection\":[\"AWS Tutorial\",\"CloudFront\",\"Route 53\",\"S3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/\",\"url\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/\",\"name\":\"HOWTO: Easy steps to configure a static webpage using S3 - maghilda\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/obl.icz.temporary.site\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/image-9-1024x472.png\",\"datePublished\":\"2023-12-15T14:40:00+00:00\",\"dateModified\":\"2024-01-07T23:53:21+00:00\",\"description\":\"Configure a static webpage using S3, Route 53 and CloudFront\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/#primaryimage\",\"url\":\"http:\\\/\\\/obl.icz.temporary.site\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/image-9-1024x472.png\",\"contentUrl\":\"http:\\\/\\\/obl.icz.temporary.site\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/image-9-1024x472.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/easy-steps-to-configure-a-static-webpage-using-s3\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HOWTO: Easy steps to configure a static webpage using S3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/#website\",\"url\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/\",\"name\":\"maghilda.com\",\"description\":\"Technology blog focused on cloud computing, emerging technologies, software development and security.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/#organization\",\"name\":\"maghilda.com\",\"url\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/cropped-logo_red.png\",\"contentUrl\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/cropped-logo_red.png\",\"width\":512,\"height\":512,\"caption\":\"maghilda.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/#\\\/schema\\\/person\\\/21009c5e4f1817ea18c81d5004bcec1e\",\"name\":\"vibs\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/28233c799bf0736fecb2854057b69e52d9bd97b467b55be3406890936003faee?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/28233c799bf0736fecb2854057b69e52d9bd97b467b55be3406890936003faee?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/28233c799bf0736fecb2854057b69e52d9bd97b467b55be3406890936003faee?s=96&d=mm&r=g\",\"caption\":\"vibs\"},\"sameAs\":[\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\"],\"url\":\"https:\\\/\\\/www.maghilda.com\\\/staging\\\/9669\\\/author\\\/obliczte\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HOWTO: Easy steps to configure a static webpage using S3 - maghilda","description":"Configure a static webpage using S3, Route 53 and CloudFront","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":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/","og_locale":"en_US","og_type":"article","og_title":"HOWTO: Easy steps to configure a static webpage using S3 - maghilda","og_description":"Configure a static webpage using S3, Route 53 and CloudFront","og_url":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/","og_site_name":"maghilda","article_published_time":"2023-12-15T14:40:00+00:00","article_modified_time":"2024-01-07T23:53:21+00:00","og_image":[{"url":"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-9-1024x472.png","type":"","width":"","height":""}],"author":"vibs","twitter_card":"summary_large_image","twitter_misc":{"Written by":"vibs","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/#article","isPartOf":{"@id":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/"},"author":{"name":"vibs","@id":"https:\/\/www.maghilda.com\/staging\/9669\/#\/schema\/person\/21009c5e4f1817ea18c81d5004bcec1e"},"headline":"HOWTO: Easy steps to configure a static webpage using S3","datePublished":"2023-12-15T14:40:00+00:00","dateModified":"2024-01-07T23:53:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/"},"wordCount":1976,"commentCount":0,"publisher":{"@id":"https:\/\/www.maghilda.com\/staging\/9669\/#organization"},"image":{"@id":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/#primaryimage"},"thumbnailUrl":"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-9-1024x472.png","keywords":["CertificateManager","CloudFront","Route53","S3"],"articleSection":["AWS Tutorial","CloudFront","Route 53","S3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/","url":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/","name":"HOWTO: Easy steps to configure a static webpage using S3 - maghilda","isPartOf":{"@id":"https:\/\/www.maghilda.com\/staging\/9669\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/#primaryimage"},"image":{"@id":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/#primaryimage"},"thumbnailUrl":"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-9-1024x472.png","datePublished":"2023-12-15T14:40:00+00:00","dateModified":"2024-01-07T23:53:21+00:00","description":"Configure a static webpage using S3, Route 53 and CloudFront","breadcrumb":{"@id":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/#primaryimage","url":"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-9-1024x472.png","contentUrl":"http:\/\/obl.icz.temporary.site\/wp-content\/uploads\/2023\/12\/image-9-1024x472.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.maghilda.com\/staging\/9669\/easy-steps-to-configure-a-static-webpage-using-s3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.maghilda.com\/staging\/9669\/"},{"@type":"ListItem","position":2,"name":"HOWTO: Easy steps to configure a static webpage using S3"}]},{"@type":"WebSite","@id":"https:\/\/www.maghilda.com\/staging\/9669\/#website","url":"https:\/\/www.maghilda.com\/staging\/9669\/","name":"maghilda.com","description":"Technology blog focused on cloud computing, emerging technologies, software development and security.","publisher":{"@id":"https:\/\/www.maghilda.com\/staging\/9669\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.maghilda.com\/staging\/9669\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.maghilda.com\/staging\/9669\/#organization","name":"maghilda.com","url":"https:\/\/www.maghilda.com\/staging\/9669\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.maghilda.com\/staging\/9669\/#\/schema\/logo\/image\/","url":"https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/cropped-logo_red.png","contentUrl":"https:\/\/www.maghilda.com\/staging\/9669\/wp-content\/uploads\/2023\/12\/cropped-logo_red.png","width":512,"height":512,"caption":"maghilda.com"},"image":{"@id":"https:\/\/www.maghilda.com\/staging\/9669\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.maghilda.com\/staging\/9669\/#\/schema\/person\/21009c5e4f1817ea18c81d5004bcec1e","name":"vibs","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/28233c799bf0736fecb2854057b69e52d9bd97b467b55be3406890936003faee?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/28233c799bf0736fecb2854057b69e52d9bd97b467b55be3406890936003faee?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/28233c799bf0736fecb2854057b69e52d9bd97b467b55be3406890936003faee?s=96&d=mm&r=g","caption":"vibs"},"sameAs":["https:\/\/www.maghilda.com\/staging\/9669"],"url":"https:\/\/www.maghilda.com\/staging\/9669\/author\/obliczte\/"}]}},"_links":{"self":[{"href":"https:\/\/www.maghilda.com\/staging\/9669\/wp-json\/wp\/v2\/posts\/1249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.maghilda.com\/staging\/9669\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maghilda.com\/staging\/9669\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maghilda.com\/staging\/9669\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maghilda.com\/staging\/9669\/wp-json\/wp\/v2\/comments?post=1249"}],"version-history":[{"count":5,"href":"https:\/\/www.maghilda.com\/staging\/9669\/wp-json\/wp\/v2\/posts\/1249\/revisions"}],"predecessor-version":[{"id":2365,"href":"https:\/\/www.maghilda.com\/staging\/9669\/wp-json\/wp\/v2\/posts\/1249\/revisions\/2365"}],"wp:attachment":[{"href":"https:\/\/www.maghilda.com\/staging\/9669\/wp-json\/wp\/v2\/media?parent=1249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maghilda.com\/staging\/9669\/wp-json\/wp\/v2\/categories?post=1249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maghilda.com\/staging\/9669\/wp-json\/wp\/v2\/tags?post=1249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}