Nicks-Test-Webiste/index.html at main · DLME2024/Nicks-Test-Webiste · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GitHub to Vercel Guide</title>
    <meta
      name="description"
      content="A simple website that explains how to put a website on GitHub and deploy it on Vercel."
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="page-shell">
      <section class="hero">
        <div class="hero-copy">
          <p class="eyebrow">GitHub + Vercel</p>
          <h1><span class="hero-highlight">Put</span> a website on Git, then host it on Vercel.</h1>
          <p class="lede">
            This page is a simple starting point for anyone who wants to turn a local
            folder into a published website using GitHub and Vercel.
          </p>
          <div class="hero-actions">
            <a class="button button-primary" href="#steps">See the steps</a>
            <a class="button button-secondary" href="#repo">Repo setup</a>
          </div>
        </div>

        <aside class="hero-card">
          <div class="logo-frame">
            <img
              class="hero-logo"
              src="assets/nboa-logo.png"
              alt="NBOA Note Buyers of America logo"
            />
          </div>
          <div class="card-label">What you need</div>
          <ul class="checklist">
            <li>A GitHub account</li>
            <li>A GitHub repository</li>
            <li>This project folder on your computer</li>
            <li>A Vercel account connected to GitHub</li>
          </ul>
        </aside>
      </section>

      <section class="steps" id="steps">
        <div class="section-heading">
          <p class="eyebrow">Workflow</p>
          <h2>Three simple steps</h2>
        </div>

        <div class="step-grid">
          <article class="step-card">
            <span class="step-number">1</span>
            <h3>Create the GitHub repo</h3>
            <p>
              Make a new repository in GitHub, then connect this folder to it with
              <code>git remote add origin</code>.
            </p>
          </article>

          <article class="step-card">
            <span class="step-number">2</span>
            <h3>Push your code</h3>
            <p>
              Commit the files locally, then push them to GitHub so the repository has
              your website files.
            </p>
          </article>

          <article class="step-card">
            <span class="step-number">3</span>
            <h3>Deploy on Vercel</h3>
            <p>
              Import the GitHub repository into Vercel, let it build, and Vercel gives
              you a live URL.
            </p>
          </article>
        </div>
      </section>

      <section class="repo-section" id="repo">
        <div class="section-heading">
          <p class="eyebrow">Repo setup</p>
          <h2>How to create the GitHub repository</h2>
        </div>

        <div class="repo-card">
          <ol>
            <li>Go to GitHub and sign in.</li>
            <li>Click the plus icon in the top right and choose <strong>New repository</strong>.</li>
            <li>Name it something like <strong>website-to-vercel</strong>.</li>
            <li>Leave it empty for now if you want me to push the files into it.</li>
            <li>Create the repo, then send me the repository URL.</li>
          </ol>

          <div class="callout">
            <p class="callout-title">I need this from you next</p>
            <ul>
              <li>The GitHub repository URL</li>
              <li>Your GitHub username or org name</li>
              <li>Whether the repo should be public or private</li>
            </ul>
          </div>
        </div>
      </section>

      <section class="vercel-section">
        <div class="section-heading">
          <p class="eyebrow">Vercel</p>
          <h2>How hosting works</h2>
        </div>

        <div class="vercel-card">
          <p>
            Once the repo exists on GitHub, sign in to Vercel, choose
            <strong>New Project</strong>, import the repository, and deploy. For a plain
            static site like this one, Vercel can usually deploy without any special
            configuration.
          </p>
        </div>
      </section>
    </main>

    <script src="script.js"></script>
  </body>
</html>