Build your first game website

Welcome! This short guide takes you from a fresh machine to a local copy of the included game template. Statify turns ordinary Markdown and JSON into the finished website files you can upload any static host including itch.io embedded sites.

1. Install Statify

Install Node.js 18 or newer, then install Statify globally:

npm install --global @nebularstreams/statify
statify --help

If the help screen appears, you are ready.

2. Create the game template

Enter the directory where you keep your projects and run the following commands:

cd my-projects
statify init vanta-bloom game
cd vanta-bloom

The CLI command is init: it creates a new site from Statify's built-in game template. The generated folder is independent from this welcome site.

3. Run it locally

The template includes the npm scripts needed to build and preview the site:

npm start

This builds the complete site into .build/ and starts Statify's local preview server. You may want to run the two steps separately:

npm run build
npm run preview

In this case, the browser will not open automatically. Just click the local URL printed by the preview server, or refresh your browser if you already have it open.

4. Explore the generated source

The important files are ordinary files you can edit:

vanta-bloom/
├── metadata.json              site name, portable mode, head resources
├── pages/index.json           landing page and game introduction
├── pages/gallery.json         cinematic screenshot carousel
├── pages/how-to-play.json     structured how-to page
├── pages/press-kit.json       press and media information
├── pages/docs/                Markdown policy and supporting pages
├── assets/app/                compiled Statify browser stub
├── assets/res/                custom CSS and game artwork
└── package.json               build and preview scripts

Edit the JSON and Markdown under pages/, replace the artwork in assets/res/, and adjust the local styling in assets/res/custom.css.

To see your changes, press CTRL-C to stop the current preview, then run npm start again.

5. Upload the result to your hosting

The .build/ directory is the self-contained compiled website: it contains the final HTML, JavaScript, stylesheets, fonts, and media that the browser needs.

• Upload the contents of .build/ to any folder of your hosting provider.
• Or package it and upload it to itch.io as an embedded site.

Be careful not to upload the source pages/ and metadata.json files instead of the contents of the .build/ folder.

For a full production website

This template uses the setting site.portable: true. This means the built site will work in any folder on any hosting provider, but for that to happen, some interesting production features are disabled.

When you know the final internet URL where your site will be available, it is worth editing metadata.json:

• Change portable in the site object from true to false.
• Change canonical to your final internet URL, e.g. https://example.com/vanta-bloom/.

Example (only the relevant part is shown)

{
  "title": "VANTA BLOOM — A World Built to Outlive Its Sun",
  "canonical": "https://example.com/vanta-bloom/",
  "site": {
    "name": "Vanta Bloom",
    "portable": false,
    "cookies": {"functional": true, "thirdparty": false, "analytics": "XXXX-XXXXXXX", "policyUrl": "/docs/cookies.html", "disabled": false}
  }
}

Why this rocks

Your site will incorporate extensive SEO tags and structured data for search engines and social networks:

• Previews of links and deep links in WhatsApp, Telegram, Facebook, X, TikTok, and other services.
• Embedded previews of FAQs and how-tos in Google and other search engines that support structured data.

If you provide a Google Analytics account, you will receive events from visits to your website.

Cookie settings

Most values in cookies are booleans that must be set to true or false. The analytics value is your Google Analytics account identifier.

Remember to update the sample cookies.md with a proper cookies policy.

6. Next Steps

For an in-depth description of all Statify features, continue with the official Statify documentation:

Statify documentation.