Cloud Infrastructure Serverless

Serverless Computing: Building Without Infrastructure

October 6, 2024

Building a Serverless Landing Page from Scratch Using AWS S3

TL;DR Deploy a static landing page cost-effectively on Amazon S3, enhanced by linking a custom .com domain via Route 53. Ideal for startups and businesses looking for a low-cost web presence with a vibrant and engaging design.

Introduction

Amazon S3 provides a reliable platform for hosting static websites, offering easy setup, scalability, and affordability. This guide demonstrates how to host a landing page on S3, featuring a visually appealing background and content that highlights your expertise in artificial intelligence and cloud technologies.

Prerequisites

We’re using the bucket name mybucketlandingpagecloudai in the us-east-1 region. Adjust the bucket name and region as needed for your setup.

Benefits of Using Amazon S3 for Hosting

  • Cost-Effective: Pay only for the storage you use.
  • Scalable: Handles increases in traffic effortlessly.
  • Highly Available: Ensures your website is always accessible.
  • Easy Management: No servers to manage or software to install.

Steps to Create a Static Landing Page on Amazon S3

Step 1: Set Up Your S3 Bucket

Create an S3 bucket which will store your website files:

bashCopy codeaws s3 mb s3://mybucketlandingpagecloudai --region us-east-1
aws s3 website s3://mybucketlandingpagecloudai/ --index-document index.html --error-document error.html

Step 2: Prepare and Upload Your Content

Create and upload an engaging background image and a content-rich index.html file.

Create the HTML content with style integrated

cat <<EOD > index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Welcome to Cloud AI Innovations</title> <style> body, html { margin: 0; padding: 0; height: 100%; background: url('https://mybucketlandingpagecloudai.s3.amazonaws.com/cloudai.jpg') no-repeat center center fixed; background-size: cover; color: white; text-align: center; font-family: Arial, sans-serif; } h1 { margin-top: 50px; font-size: 2.5em; } p { font-size: 1.2em; } a { font-size: 1.2em; color: #adefff; text-decoration: none; } a:hover { color: #81d4fa; } footer { position: absolute; width: 100%; bottom: 10px; font-size: 0.8em; } </style> </head> <body> <h1>Welcome to Cloud AI Innovations</h1> <p>Explore the latest in artificial intelligence and cloud technology on our blog. Stay updated with insights, tutorials, and cutting-edge developments.</p> <p>If you wish to keep in touch and receive more information, contact us at <a href="mailto:william@cloudai.pt">william@cloudai.pt</a>.</p> <footer> © 2024 CloudAI. All rights reserved. </footer> </body> </html> EOD aws s3 cp index.html s3://mybucketlandingpagecloudai/index.html --region us-east-1

Upload the new background image (cloudai.jpg)

aws s3 cp cloudai.jpg s3://mybucketlandingpagecloudai/cloudai.jpg --acl public-read

Step 3: Configure Public Access Policy

Ensure your content is publicly accessible by setting the appropriate permissions:

cat <<EOD > public-read-policy.json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mybucketlandingpagecloudai/*"
        }
    ]
}
EOD
aws s3api put-bucket-policy --bucket mybucketlandingpagecloudai --policy file://public-read-policy.json

Step 4: Purchase and Configure a Domain (Optional)

Register a domain through AWS Route 53 and configure DNS to point to your S3 bucket.

Step 5: Test Your Site

Visit your site via the custom domain or the S3 website endpoint URL to view your engaging and informative landing page.

echo "Visit http://mybucketlandingpagecloudai.s3-website-us-east-1.amazonaws.com/"

Conclusion

This guide provides a comprehensive walkthrough for setting up a vibrant and content-rich static landing page on AWS S3. By integrating with Route 53 for domain management, you create a robust web hosting solution that can efficiently handle growth and traffic spikes, perfect for showcasing your expertise in AI and cloud technologies.

This setup ensures a visually appealing and informative web presence, perfectly aligned with your blog’s focus on artificial intelligence and cloud innovations.

Related Posts:

Tags: 9292