website-template — Next.js 作品集模板

SHA-256: df6d721b7d1aa17806d5ceea985bd4eb5c7cbb6841d28636231e5cc75c287b8a

2026-10-14T19:16:52.830Z

# Website Template

A simple, opinionated starter for a business or personal website. Two pages (Home + About), one config file for branding, markdown for copy. Built with Next.js 14 + Tailwind.

Designed to work well with Claude Code: open the folder, ask Claude to "match this reference" or "add a services page," and it knows where everything lives.

## Deploy your own copy

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Felevaiteworks%2Fwebsite-template&project-name=my-website&repository-name=my-website)

One click. Vercel forks this repo into your account, deploys it, and gives you a live URL in about 60 seconds. You can customize the code afterward and every push auto-deploys.

## Quickstart (5 minutes)

You'll need [Node.js](https://nodejs.org) 18 or higher.

```bash
git clone https://github.com/elevaiteworks/website-template.git
cd website-template
npm install
npm run dev
```

> Tip: instead of cloning directly, click the green **Use this template** button at the top of this page. That creates your own copy under your GitHub account so you can publish your own changes.

Open [http://localhost:3000](http://localhost:3000). You'll see a complete-looking site with placeholder content.

## Make it yours (in order)

1. **Rebrand.** Open `brand.config.ts`. Change the site name, 5 colors, and 2 font names. Save. The whole site updates.
2. **Rewrite the copy.** Open `content/home.md` and `content/about.md`. Replace the placeholder text. Frontmatter (the stuff between `---` lines) controls each section; the body of `about.md` is your long-form story.
3. **Add your images.** Drop a logo and any photos into `public/`. Reference them as `/your-file.jpg` in markdown. To use a logo in the nav, drop the file (SVG recommended) into `public/` and set `logo: "/your-logo.svg"` in `brand.config.ts`. Leave `logo: ""` to show your company name as text instead.
4. **Deploy.** Push to GitHub, import the repo in [Vercel](https://vercel.com/new), click deploy. Free for personal sites.

That's the whole workflow. You can stop here and have a live site.

## Optional: use Claude Code

This template ships with a `CLAUDE.md` that teaches Claude Code how to help you customize. Open the folder in [Claude Code](https://claude.com/claude-code) and try:

- **"Match this reference site"** — drop a screenshot into `references/` and ask Claude to make the site feel similar. It'll sample colors, adjust fonts and spacing, and iterate with you.
- **"Add a Services page"** — Claude follows the patterns in `app/about/page.tsx` to create new pages.
- **"Add a testimonials section"** — Claude creates a new component in `components/sections/` and wires it into the home page.

See `BRAND.md` for guidance on choosing colors and fonts that work well together.

## What's in here

```
brand.config.ts        ← edit this first
content/               ← edit your copy here
  home.md
  about.md
app/                   ← page layouts
components/sections/   ← individual page sections
public/                ← images, favicon, logo
references/            ← drop reference screenshots here
CLAUDE.md              ← instructions for Claude Code
BRAND.md               ← guide to choosing colors and fonts
```

## License

MIT. Use it for anything.