4.1 Objective

Build a simple static website (HTML + CSS) that will later be deployed automatically through the CI/CD pipeline.

4.2 Project Files Created

<html lang="en">
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Cloud Journey</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <header>
            <p>DevOps • Cloud</p>
            <h1>Learning to ship with CI/CD</h1>
            <p class="lead">
                A small static site, deployed automatically on every push to main.
            </p>
        </header>
        <main>
            <section>

                <h2>Where I'm at</h2>
                <p>
                    Working through cloud and DevOps fundamentals - version control,
                    automated pipelines, and hosting on AWS. This repo is part of that
                    practice.
                </p>
            </section>
            <section>
                <h2>Stack</h2>
                <ul>
                    <li><strong>Git & GitHub</strong> - source control</li>
                    <li><strong>GitHub Actions</strong> - CI/CD on push to main</li>
                    <li><strong>AWS S3</strong> - static site hosting</li>
                    <li><strong>OIDC</strong> - auth without long-lived keys</li>
                </ul>
            </section>
        </main>
        <footer>
            <p>Deployed via CI/CD - GitHub Actions → AWS S3 → CloudFront</p>
        </footer>
    </body>
</html>

4.4 style.css

:root {
    --bg: #0d0d0d;
    --surface: #161616;
    --border: #2a2a2a;
    --text: #e8e8e8;
    --muted: #888;
    --accent: #7c6af7;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family:
        system-ui,
        -apple-system,
        sans-serif;
    background: var(--bg);
    color: var(--text);
    Line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

}
header {
    padding: 4rem 1.5rem 3rem;
    max-width: 36rem;
    margin: 0 auto;
    width: 100%;
}
header p {
    color: var(--accent);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}
header .lead {
    color: var(--muted);
    font-size: 1rem;
}

main {
    flex: 1;
    max-width: 36rem;
    margin: 0 auto;
    width: 100%;
    padding: 0 1.5rem 3rem;
}
section {
    border-top: 1px solid var(--border);
    padding: 2rem 0;
}
section h2 {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 1rem;
}
section p {
    color: var(--muted);
    font-size: 0.95rem;
}

section p + p {
    margin-top: 0.75rem;
}
ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
ul li {
    font-size: 0.9rem;
    color: var(--muted);
    padding-left: 1rem;
    border-left: 2px solid var(--border);
}
ul li strong {
    color: var(--text);
    font-weight: 500;
}
footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem;

    text-align: center;
    font-size: 0.8rem;
    color: var(--muted);
}

4.5 Local Verification

Open index.html directly in the browser to confirm the page renders correctly before committing .

DevOps • Cloud

Learning to ship with CI/CD

A small static site, deployed automatically on every push to main.

WHERE I’M AT Working through cloud and DevOps fundamentals - version control, automated pipelines, and hosting on AWS. This repo is part of that practice.

STACK Git & GitHub - source control GitHub Actions - CI/CD on push to main AWS S3 - static site hosting OIDC - auth without long-lived keys