# Hallmark Deployment Strategies: 4 Ways to Deploy the Static Design Skill

> Discover four effective Hallmark deployment strategies. Serve the static site via Vercel, static hosts, local servers, or integrate directly into Claude, Cursor, and Codex.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deployment-strategies
- Published: 2026-08-03

---

**Deploy Hallmark by serving the pre-built `site/` folder via Vercel, any static host, a local Python server, or by copying the skill files into Claude Code, Cursor, or Codex.**

Hallmark is a **pure-static design skill** created by Nutlope that generates pre-rendered HTML, CSS, and JavaScript. Whether you're publishing a live showcase or integrating the skill into an AI coding assistant, the repository supports multiple deployment paths. Each strategy centers on the same artifact: the self-contained `site/` directory.

---

## Vercel Static Hosting

The fastest path to production uses **Vercel's zero-config static hosting**. The repository includes a [`vercel.json`](https://github.com/Nutlope/hallmark/blob/main/vercel.json) file that explicitly disables framework detection and points Vercel to the correct output directory.

In [`vercel.json`](https://github.com/Nutlope/hallmark/blob/main/vercel.json):

```json
{
  "outputDirectory": "site",
  "framework": null
}

```

Setting `framework: null` prevents Vercel from attempting to build the project with a detected framework. This ensures Vercel treats Hallmark as plain static files.

Deploy with one command:

```bash
npm install -g vercel
vercel deploy --prod

```

Vercel reads the configuration automatically and serves everything from `site/`.

---

## Local Static Server Preview

For rapid iteration before deploying, the [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) includes a `serve` script that spins up a **Python HTTP server** pointed at the `site` directory.

From [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) (lines 31-34):

```json
"scripts": {
  "serve": "python3 -m http.server --directory site 4173"
}

```

Run the local server:

```bash
npm run serve

```

This starts a server at `http://localhost:4173`, ideal for testing UI changes without external dependencies.

---

## AI Assistant Skill Installation

Hallmark's **primary distribution model** is as a skill for Claude Code, Cursor, or Codex. The repository provides two installation methods.

### CLI Installation (Recommended)

```bash
npx skills add nutlope/hallmark

```

This fetches the skill definition and registers it with your AI assistant.

### Manual Copy Installation

Copy the skill files directly into your assistant's skill directory. The [`README.md`](https://github.com/Nutlope/hallmark/blob/main/README.md) documents exact target paths for each platform.

**Claude Code example:**

```bash
cp -r skills/hallmark ~/.claude/skills/hallmark/

```

The skill files live in `skills/hallmark/` and include:
- [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) — the skill definition
- `references/` — design references used by the AI

---

## Generic Static Hosting (GitHub Pages, Netlify, Cloudflare Pages)

Because Hallmark outputs **fully self-contained static assets**, any static hosting service works without special configuration. The `site/` directory contains a complete [`index.html`](https://github.com/Nutlope/hallmark/blob/main/index.html) plus all CSS, JS, and assets.

**GitHub Pages deployment example:**

```bash
git subtree push --prefix site origin gh-pages

```

For Netlify or Cloudflare Pages, simply configure the build output directory as `site/` in your dashboard. No build command is required—the files are already generated.

---

## Key Architecture Decisions

Hallmark's deployment flexibility stems from a few deliberate design choices in the Nutlope/hallmark source:

- **Framework-agnostic output**: The [`vercel.json`](https://github.com/Nutlope/hallmark/blob/main/vercel.json) explicitly disables framework detection, ensuring consistent treatment as static files.
- **Skill-first packaging**: The `skills/hallmark/` directory is structured for direct consumption by AI assistants, separate from the showcase site.
- **Zero server-side code**: All pages are pre-rendered; [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) and `site/_tests/` contain no dynamic dependencies.

---

## Summary

- **Vercel**: Zero-config deployment via [`vercel.json`](https://github.com/Nutlope/hallmark/blob/main/vercel.json) with `outputDirectory: "site"`.
- **Local preview**: `npm run serve` launches Python's HTTP server on port 4173.
- **AI assistant integration**: Install via `npx skills add` or manual copy to `~/.claude/skills/`, `~/.cursor/skills/`, or equivalent.
- **Any static host**: Push the `site/` folder to GitHub Pages, Netlify, Cloudflare Pages, or similar.

---

## Frequently Asked Questions

### How do I deploy Hallmark to Vercel without a build step?

Vercel requires no build step. The [`vercel.json`](https://github.com/Nutlope/hallmark/blob/main/vercel.json) file already specifies `outputDirectory: "site"` and disables framework detection. Run `vercel deploy --prod` and Vercel serves the pre-built files directly.

### Can I use Hallmark with Claude Code without installing it as a skill?

Yes. Manually copy the `skills/hallmark/` folder—including its `references/` subdirectory—to `~/.claude/skills/hallmark/`. The README documents equivalent paths for Cursor and Codex.

### What port does the local development server use?

The `serve` script in [`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json) hardcodes port **4173**. The command `python3 -m http.server --directory site 4173` serves the static site at `http://localhost:4173`.

### Is Hallmark compatible with serverless functions or edge runtimes?

No. Hallmark is intentionally **static-only**. The `site/` directory contains pre-rendered HTML, CSS, and JavaScript with no server-side code, making it incompatible with serverless or edge function deployment patterns.