AWS: Basic Implementation

1. Create an S3 Bucket

  1. Go to the S3 section in the AWS Console and click Create bucket.
  2. Bucket name: Enter the domain name for your site (for example, www.example.com).
    💡 The bucket name should match your website domain for easier setup later.
  3. Public access: Uncheck Block all public access.
    ⚠️ This will make your bucket publicly accessible, which is needed for static site hosting.
  4. Bucket versioning: Choose Enable to turn on versioning.
  5. Click Create bucket to finish.

2. IAM Setup

  1. Go to IAM in AWS and click on Access Management > Users.
  2. Click Create User.
  3. Step 1: Enter a name for the user.
  4. Step 2: Add a custom policy:
    1. Select Attach Policy Directly.
    2. Click Create Policy — this will open a new tab.
    3. In the new tab, add this policy:{
       "Version": "2012-10-17",
       "Statement": [
         {
           "Sid": "AllowUsersToAccessS3Bucket",
           "Effect": "Allow",
           "Action": [
             "s3:GetObject*",
             "s3:PutObject*",
             "s3:DeleteObject*"
           ],
           "Resource": [
             "arn:aws:s3:::{YOUR BUCKET NAME}/*"
           ]
         },
         {
           "Effect": "Allow",
           "Action": [
             "s3:ListBucket*"
           ],
           "Resource": [
             "arn:aws:s3:::{YOUR BUCKET NAME}"
           ]
         }
       ]
      }
    4. Back in the first tab, click the refresh button.
    5. Select the newly created policy.
    6. Click Next and then Create User.
  5. Create Credentials:
    1. Open the new user.
    2. Go to the Security Credentials tab.
    3. Click Create Access Keys.
    4. Step 1: Select anything, it doesn't matter.
    5. Step 2: Skip this.
    6. Step 3: ⚠️ Make sure to copy the key and the secret. You will not be able to see the secret again.

** This is the key and secret you need to add to the connector in the WCH app.

3. Set Up CI/CD Pipeline

  1. Go to CodePipeline in AWS and click Create pipeline.
  2. When prompted to choose the type, select Custom Pipeline.
  3. Pipeline name: Enter a name for your pipeline.
  4. On the next step, under Source provider, select S3.
  5. For the Bucket, choose the S3 bucket you created in step 1.
  6. For the Object key, enter project.zip (or the name of the deployment ZIP file you'll upload).
  7. Build stage: Skip this step (you don't need a build provider for static sites).
  8. Test stage: Skip this step (you don't have any tests to run for a static site).
  9. Deploy provider: On the next step, choose S3 again, and select the same bucket.
  10. Leave Deployment path empty.
  11. Check Extract File Before Deploy.
  12. Click Create pipeline to finish setup.

4. Configure S3 for Static Website Hosting and Permissions

  1. Go to your S3 bucket and open it.
  2. Permissions:
    1. Go to the Permissions tab.
    2. Find Bucket policy and click Edit.
    3. Paste the following policy, replacing www.example.com with your actual bucket name:{
       "Version": "2012-10-17",
       "Statement": [
         {
           "Sid": "PublicReadGetObject",
           "Effect": "Allow",
           "Principal": "*",
           "Action": "s3:GetObject",
           "Resource": "arn:aws:s3:::www.example.com/*"
         }
       ]
      }
  3. Static website hosting:
    1. Go to the Properties tab.
    2. Scroll down to Static website hosting.
    3. Select Enable and then choose Host a static website.
    4. For the index document, enter index.html and save changes.
    5. After saving, copy the Bucket website endpoint URL.

5. Set Up CloudFront Distribution

  1. Go to CloudFront and click Create Distribution.
  2. Origin domain: Paste the S3 static website URL as the origin domain.
  3. Cache key and origin requests: Select Legacy cache settings.
  4. Set all TTL (Time-to-Live) values to 0 to disable caching.
    💡 This ensures changes from Wes are immediately visible, but you will not get the advantages of caching. For better performance, use the recommended cache settings, but updates from Wes may take longer to view.
  5. Alternate Domain Name (CNAME): Click Add item and enter your website's domain name (for example, www.example.com).
  6. Click Create Distribution.
  7. Once the distribution is created, copy the CloudFront domain name.
  8. Update your DNS settings to add this as a CNAME record for your domain.

‍
This setup is just a simple way to get started, you are free to customize it however you want. EA/Webflow is not responsible for client side configurations.