Skip to content
Sign in
WebsiteNode.js

Website (landing page)

A fast static website with hero, about, services and contact sections. Vite build, no framework, colours picked from your project.

Open in builder →

6 steps

Shell

Shown with defaults: npm, pip, Node LTS, Python 3.12 and the template's default add-ons.

  1. 1. Install and select Node.js with nvm

    runtime

    nvm lets you install several Node.js versions side by side and switch per project. `nvm use` activates it for this shell.

    bash
    nvm install --ltsnvm use --lts
    Expected result
    `node -v` prints the selected version.
    Verify
    node -v && npm -v
    OS notes
    macOS/Linux/WSL: install nvm with `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.8/install.sh | bash`, then reopen the terminal. Windows: use nvm-windows (github.com/coreybutler/nvm-windows) from an elevated terminal, or fnm.

  2. 2. Scaffold a plain Vite site

    template

    create-vite with the vanilla template: HTML, CSS and JavaScript, no framework.

    bash
    npm create vite@latest my-website -- --template vanilla --no-interactive
    Expected result
    A ./my-website folder with index.html and package.json.
    Verify
    ls my-website/index.html

  3. 3. Enter the project folder

    template

    The scaffolder created ./my-website. Move into it before installing anything else.

    bash
    cd my-website
    Expected result
    You are inside ./my-website
    Verify
    ls package.json

  4. 4. Install dependencies

    template

    Download every package listed in package.json into node_modules.

    bash
    npm install
    Expected result
    node_modules/ exists and a lockfile is created.
    Verify
    ls node_modules

  5. 5. Write the landing page

    template

    Replace the starter page with a landing page and a stylesheet you can recolour.

    Files written by this step: index.html, public/style.css
    index.html
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my-website</title>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <header class="nav"><a class="brand" href="#top">my-website</a><nav aria-label="Main"><a href="#about">About</a> <a href="#services">Services</a> <a href="#contact">Contact</a></nav></header>
    <main id="top">
      <section class="hero"><h1>my-website</h1><p class="lead">Say what you do in one sentence.</p><a class="button" href="#contact">Get in touch</a></section>
      <section id="about"><h2>About us</h2><p>Your story.</p></section>
      <section id="services"><h2>What we offer</h2><p>Your products or services.</p></section>
      <section id="contact"><h2>Contact</h2><p>hello@example.com</p></section>
    </main>
  </body>
</html>
    public/style.css
    :root { --primary: #0f766e; --bg: #f8fafc; --fg: #0f172a; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.6; }
main > section { max-width: 1040px; margin: 0 auto; padding: 64px 24px; }
.nav { display: flex; justify-content: space-between; padding: 14px 24px; }
.button { display: inline-block; padding: 12px 22px; border-radius: 10px; background: var(--primary); color: #fff; text-decoration: none; }
    Expected result
    index.html shows the landing page.

  6. 6. Create a production build

    template

    Vite writes the static site to dist/.

    bash
    npm run build
    Expected result
    dist/index.html exists.
    Verify
    ls dist/index.html