S3 update (#300)

* S3 uploads (#294) * Added styling to create drop shadows on images via anchor in image url * Updated create S3 bucket process to reflect new default settings that prevent making a bucket public. I only later saw the guidelines around image creation, but have a look, as you may find these acceptable. as you may find these acceptable. * Updating screenshots for S3 buckets * Making copy changes
sst · Dec 9, 2018 · a212e96 · a212e96
1 parent 055341d
commit a212e96
Show file tree

Hide file tree

Showing 25 changed files with 17 additions and 13 deletions.
diff --git a/_chapters/create-an-s3-bucket-for-file-uploads.md b/_chapters/create-an-s3-bucket-for-file-uploads.md
@@ -20,7 +20,7 @@ First, log in to your [AWS Console](https://console.aws.amazon.com) and select *
 
 ![Select S3 Service screenshot](/assets/s3/select-s3-service.png)
 
-Select **Create Bucket**.
+Select **Create bucket**.
 
 ![Select Create Bucket screenshot](/assets/s3/select-create-bucket.png)
 
@@ -33,7 +33,7 @@ Make a note of the name and region as we'll be using it later in the guide.
 
 ![Enter S3 Bucket Info screenshot](/assets/s3/enter-s3-bucket-info.png)
 
-Step through the next steps and leave the defaults by clicking **Next**, and then click **Create Bucket** on the last step.
+Step through the next steps and leave the defaults by clicking **Next**, and then click **Create bucket** on the last step.
 
 ![Set S3 Bucket Properties screenshot](/assets/s3/set-s3-bucket-properties.png)
 ![Set S3 Bucket Permissions screenshot](/assets/s3/set-s3-bucket-permissions.png)

diff --git a/_chapters/create-an-s3-bucket.md b/_chapters/create-an-s3-bucket.md
@@ -20,15 +20,19 @@ First, log in to your [AWS Console](https://console.aws.amazon.com) and select S
 
 Select **Create Bucket** and pick a name for your application and select the **US East (N. Virginia) Region** Region. Since our application is being served out using a CDN, the region should not matter to us.
 
-![Create S3 static website Bucket screenshot](/assets/create-s3-bucket.png)
+![Create S3 static website Bucket screenshot](/assets/create-s3-bucket-1-name.png)
 
-Go through the next steps and leave the defaults by clicking **Next**.
+Click **Next** through the configure options step.
 
-![Create S3 static website Bucket next properties screenshot](/assets/create-s3-bucket-next-properties.png)
+![Create S3 static website Bucket next configure options screenshot](/assets/create-s3-bucket-2-configure-options.png)
 
-![Create S3 static website Bucket next permissions screenshot](/assets/create-s3-bucket-next-permissions.png)
+In the permissions step, make sure to uncheck **Block new public bucket policies** and **Block public and cross-account access if bucket has public policies**. Making buckets public is a common security error, but in our case we'll be serving our app from the bucket, so want it to be public.
 
-![Create S3 static website Bucket next review screenshot](/assets/create-s3-bucket-next-review.png)
+![Create S3 static website Bucket next permissions screenshot](/assets/create-s3-bucket-3-permissions.png)
+
+Click **Create bucket** on the review page to create the bucket.
+
+![Create S3 static website Bucket next review screenshot](/assets/create-s3-bucket-4-review.png)
 
 Now click on your newly created bucket from the list and navigate to its permissions panel by clicking **Permissions**.
 
@@ -66,7 +70,7 @@ And finally we need to turn our bucket into a static website. Select the **Prope
 
 ![Select properties tab screenshot](/assets/select-bucket-properties.png)
 
-Select **Static website hosting**. 
+Select **Static website hosting**.
 
 ![Select static website hosting screenshot](/assets/select-static-website-hosting.png)
 

diff --git a/_sass/theme/_layout.scss b/_sass/theme/_layout.scss
@@ -51,12 +51,12 @@
     img {
       margin-right: 5px;
       display: inline-block;
-      vertical-align: middle; 
+      vertical-align: middle;
     }
 
     span {
       font-size: 26px;
-      vertical-align: middle; 
+      vertical-align: middle;
       font-weight: 700;
       color: $text-color;
     }
@@ -116,12 +116,12 @@
     img {
       margin-right: 5px;
       display: inline-block;
-      vertical-align: middle; 
+      vertical-align: middle;
     }
 
     span {
       font-size: 30px;
-      vertical-align: middle; 
+      vertical-align: middle;
       font-weight: 700;
       color: $text-color;
     }
@@ -450,7 +450,7 @@
 
     li {
       margin-top: 3px;
-      padding-left: 10px; 
+      padding-left: 10px;
       text-indent: -11px;
 
       &::before {

diff --git a/assets/add-bucket-policy.png b/assets/add-bucket-policy.png
diff --git a/assets/create-s3-bucket-1-name.png b/assets/create-s3-bucket-1-name.png
diff --git a/assets/create-s3-bucket-2-configure-options.png b/assets/create-s3-bucket-2-configure-options.png
diff --git a/assets/create-s3-bucket-3-permissions.png b/assets/create-s3-bucket-3-permissions.png
diff --git a/assets/create-s3-bucket-4-review.png b/assets/create-s3-bucket-4-review.png
diff --git a/assets/create-s3-bucket-next-permissions.png b/assets/create-s3-bucket-next-permissions.png
diff --git a/assets/create-s3-bucket-next-properties.png b/assets/create-s3-bucket-next-properties.png
diff --git a/assets/create-s3-bucket-next-review.png b/assets/create-s3-bucket-next-review.png
diff --git a/assets/create-s3-bucket.png b/assets/create-s3-bucket.png
diff --git a/assets/edit-static-web-hosting-properties.png b/assets/edit-static-web-hosting-properties.png
diff --git a/assets/s3/enter-s3-bucket-info.png b/assets/s3/enter-s3-bucket-info.png
diff --git a/assets/s3/review-s3-bucket.png b/assets/s3/review-s3-bucket.png
diff --git a/assets/s3/save-s3-bucket-cors-configuration.png b/assets/s3/save-s3-bucket-cors-configuration.png
diff --git a/assets/s3/select-create-bucket.png b/assets/s3/select-create-bucket.png
diff --git a/assets/s3/select-created-s3-bucket.png b/assets/s3/select-created-s3-bucket.png
diff --git a/assets/s3/select-s3-bucket-cors-configuration.png b/assets/s3/select-s3-bucket-cors-configuration.png
diff --git a/assets/s3/set-s3-bucket-permissions.png b/assets/s3/set-s3-bucket-permissions.png
diff --git a/assets/s3/set-s3-bucket-properties.png b/assets/s3/set-s3-bucket-properties.png
diff --git a/assets/save-bucket-policy.png b/assets/save-bucket-policy.png
diff --git a/assets/select-bucket-permissions.png b/assets/select-bucket-permissions.png
diff --git a/assets/select-bucket-properties.png b/assets/select-bucket-properties.png
diff --git a/assets/select-static-website-hosting.png b/assets/select-static-website-hosting.png