static_

Static

Static is a command-line site builder. You write pages and components as Vue single-file components or Markdown, and Static renders them at build time into plain, fast HTML. No framework JavaScript is shipped to the browser, so pages load quickly and are easy for search engines to read.

It is meant to feel as easy as starting a Vue project, without the app framework: there is no per-project npm install, no bundler config and no build script to maintain. Vue, Tailwind CSS 4, Vite and everything else live in the CLI.

Features

  • Vue 3 components rendered once at build time. Slots, props, v-for, <script setup>: standard Vue, with nothing to hydrate.
  • Markdown pages and collections for blogs and notes, with tags, pagination and RSS feeds.
  • Microblogging: short notes with photos, hashtags and sharing, publishable from the terminal or any tool that can commit a file.
  • SEO built in: titles, canonical URLs, Open Graph and Twitter cards, JSON-LD, sitemap, robots.txt, 404 page.
  • Image pipeline: AVIF and WebP variants, srcset, intrinsic dimensions and lazy loading.
  • Tailwind CSS 4 with no config file, and class-based dark mode with no flash of the wrong theme.
  • Dev server with live reload and an in-browser error overlay.
  • Deploys to Cloudflare Pages or Netlify, locally or from CI on every push.

Quick start

Install the CLI (see Installation), then:

static new my-site     # choose a template and a production URL
cd my-site
static dev             # http://localhost:3000 with live reload

Edit pages/index.vue and the browser updates as you save. When you are ready:

static check           # production build with strict SEO and link checks
static deploy          # draft preview on your host
static deploy --prod   # publish

A first page

---
title: Hello
description: My first Static page, shown in search results.
---
<template>
    <h1>Hello, {{ site.siteName }}</h1>
    <p>Built in {{ currentYear }}.</p>
</template>

The block between the --- lines is page metadata. Everything in <template> becomes the body. You never write <html>, <head>, meta tags or the stylesheet link; they are generated for you.

Where next