Task-01

Hosting a static website using AWS S3

Open your AWS Management Console, navigate to S3, and create a bucket with a unique name. Keep the rest of the settings as default and click on "Create bucket."

Now your bucket will be created. Click to enter your bucket, and you will see an upload option. Click on it.

Now, in that upload section, you upload your index.html file by clicking the Add file option. Keep the rest of the settings as default and click on Upload and Close.

After that, you will automatically navigate to your bucket. Go to Properties and scroll down to Static website hosting. Click on Edit and select Enable. In the Index document section, write index.html, and in the Error document section, write error.html. Keep the rest of the settings as default and click on Save changes. You will automatically navigate back to your bucket.

Now click Permissions in your bucket, and in Block public access (bucket settings), click on Edit. Unselect the Block all public access option, click on Save changes, and confirm.

In the permissions section, you will see Bucket policy. Click on edit and paste this JSON code to grant public read access to your website. Copy the following bucket policy, paste it into the Bucket policy editor, and click on Save changes.

 {
     "Version": "2012-10-17",
     "Statement": [
         {
             "Sid": "PublicReadGetObject",
             "Effect": "Allow",
             "Principal": "*",
             "Action": [
                 "s3:GetObject"
             ],
             "Resource": [
                 "arn:aws:s3:::Bucket-Name/*"
             ]
         }
     ]
 }

Now, navigate to Properties in your bucket again and scroll down to Static website hosting. There you will see a link. Copy that link and paste it into your web browser. You will see your simple portfolio.

Note: You can use this simple code to build your portfolio website using the index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        header {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 1em 0;
        }
        nav {
            background-color: #333;
            overflow: hidden;
        }
        nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }
        nav a:hover {
            background-color: #ddd;
            color: black;
        }
        .container {
            padding: 20px;
        }
        .section {
            margin-bottom: 20px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .section h2 {
            color: #4CAF50;
        }
        .section p, .section ul {
            color: #333;
        }
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>My Portfolio</h1>
    </header>
    <nav>
        <a href="#about">About Me</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
    </nav>
    <div class="container">
        <div id="about" class="section">
            <h2>About Me</h2>
            <p>Hello! I'm [Your Name], a passionate developer with experience in web development and design. I love creating beautiful and functional websites.</p>
        </div>
        <div id="projects" class="section">
            <h2>Projects</h2>
            <ul>
                <li><strong>Project 1:</strong> Description of your first project.</li>
                <li><strong>Project 2:</strong> Description of your second project.</li>
                <li><strong>Project 3:</strong> Description of your third project.</li>
            </ul>
        </div>
        <div id="contact" class="section">
            <h2>Contact</h2>
            <p>You can reach me at:</p>
            <ul>
                <li>Email: <a href="mailto:your.email@example.com">your.email@example.com</a></li>
                <li>LinkedIn: <a href="https://www.linkedin.com/in/yourprofile" target="_blank">LinkedIn Profile</a></li>
                <li>GitHub: <a href="https://github.com/yourprofile" target="_blank">GitHub Profile</a></li>
            </ul>
        </div>
    </div>
    <footer>
        <p>&copy; 2024 My Portfolio. All rights reserved.</p>
    </footer>
</body>
</html>

Day 82 - Project-3

Task-01

Hosting a static website using AWS S3