How to Create Static Website with a CANVA Design in S3

Step 1: Prepare Your Canva Design

1. Open your Canva design that you want to use for the static website.
2. Make sure your design is finalized and ready for publication.
3. You will need to export your Canva design as HTML code for this process.

Step 2: Export Canva Design as HTML

1. Click on the “More” button in Canva.
2. From the options, select Embed.
3. You will see an option to copy the HTML embed code. Click the Copy button to copy this HTML code to your clipboard.

Step 3: Create the HTML File

1. Open Notepad (or any text editor of your choice).
2. Paste the HTML code that you copied from Canva into the text editor.
3. Save the file as index.html (ensure the file extension is .html).

Step 4: Set Up an S3 Bucket

1. Go to the AWS Management Console and log in to your account.
2. Navigate to S3 (search for S3 in the services search bar).
3. Click Create bucket.
4. Enter a unique name for your bucket (e.g., my-canva-page), ensuring the name is lowercase.
5. In the Bucket Settings, disable Block Public Access by unchecking the box.
6. Acknowledge the warning that this will make the bucket public.
7. Keep other default settings and click Create bucket.

Step 5: Upload Your HTML File to the S3 Bucket

1. Open the newly created bucket by clicking its name.
2. In the bucket dashboard, click Upload.
3. Click Add files and select the index.html file you saved earlier.
4. Click Upload to upload the HTML file into your S3 bucket.

Step 6: Enable Static Website Hosting

1. In the S3 bucket, go to the Properties tab.
2. Scroll down to the Static website hosting section.
3. Click Edit and select Enable.
4. In the Index document field, type index.html.
5. Optionally, set an Error document if you have one (not required for this guide).
6. Save the changes by clicking Save changes.

Step 7: Set Permissions and Create Bucket Policy

1. Navigate to the Permissions tab in your S3 bucket.
2. Under Block public access, make sure public access is allowed (which you set earlier).
3. Scroll down to Bucket Policy and click Edit.
4. Click on the Policy Generator button.
5. In the policy generator:
   • Select S3 Bucket Policy for the Policy Type.
   • Choose Allow for the Effect.
   • In the Actions section, select GetObject.
   • In the ARN field, enter your bucket ARN (e.g., arn:aws:s3:::my-canva-page/*).
   • For Principal, enter * to allow public access.
6. Click Generate Policy and copy the generated policy.
7. Paste this policy into the Bucket Policy section of your S3 settings.
8. Click Save changes.

Step 8: Test Your Static Website

1. Go back to the Properties tab and scroll down to the Static website hosting section.
2. You will see a Bucket website URL (e.g., http://my-canva-page.s3-website-us-east-1.amazonaws.com).
3. Copy and paste this URL into your browser.
4. Your Canva design should now be live as a static website with all the links working properly.

Step 9: Conclusion