LITOV
Home
About
Docs
Services
Blog
Contact

Documentation - Litov 11ty Theme

Complete documentation for Litov - Minimalist 11ty JAMstack Theme. Learn ENV setup, Node.js version, TinaCMS Cloud, and deployment to Cloudflare, Vercel, Netlify.

Documentation - Litov 11ty Theme

Documentation - Litov Theme

Welcome! This docs is for beginners, no coding needed after initial setup.

Litov concept: Setup code once at the beginning, then all content editing is done via TinaCMS (like WordPress). You don't need to open code again.

1. What You Get

  • 11ty (Eleventy) - super fast static site generator
  • TinaCMS - Visual CMS for editing content
  • Lighthouse 100 - SEO ready
  • No database needed

2. Requirements

You only need this ONCE for initial setup:

  1. Node.js 22.15.0 - Download at https://nodejs.org
    • Check version: node -v in terminal
    • Must be 22.15.0 or higher. If you have lower version, update Node.js first.
  2. Code Editor: VS Code (free)
  3. GitHub Account (for deployment)

After setup, you don't need code anymore. Just use /admin to edit.

3. SUPER IMPORTANT - ENV File

This is where 99% of beginners fail. Please read carefully.

When you extract the zip, you will see a file named .env.example in the root folder.

You MUST rename it from .env.example to .env

  • Windows: Right click > Rename > .env
  • Mac: Right click > Rename > .env

If you don't rename, build will fail with error Missing clientId, token on Cloudflare.

What is inside .env?

We have 2 modes:

MODE A: Local Mode (For Selling / Without Tina Cloud)

This is the default mode. You use this if you just want to run locally or deploy without CMS online editing.

Your .env content:

TINA_PUBLIC_IS_LOCAL=true

That's it. Content is edited via files or local CMS at http://localhost:8080/admin and saved to your computer.

MODE B: Cloud Mode (With Tina Cloud - For Client Who Wants to Edit Online)

Use this if you want your client to be able to edit content from yourdomain.com/admin without touching code.

Steps:

  1. Register at https://app.tina.io (free)

  2. Create New Project > Connect your GitHub repo litov

  3. After connect, you will get:

    • Client ID: example ea451189-976f-41e0-bb49-f2b5378d8d73
    • Token: example 530c671f37cde4518d3328be1edb09fe42c69e9e

  4. Edit your .env file to be:

TINA_CLIENT_ID=your_client_id_here
TINA_TOKEN=your_token_here

Example real:

TINA_CLIENT_ID=ea451189-976f-41e0-bb49-f2b5378d8d73
TINA_TOKEN=530c671f37cde4518d3328be1edb09fe42c69e9e

4. Local Installation (First Time Only)

After you rename .env.example to .env:

Open terminal in project folder:

# Install dependencies (only first time)
npm install

# Run website
npm run dev

Open:

  • Website: http://localhost:8080
  • CMS: http://localhost:8080/admin

Now you can edit logo, title, homepage content via CMS.

5. Node Version - Must Be 22.15.0

Litov uses Eleventy 4.0 Alpha which requires Node.js 22.15.0 or higher.

How to set Node version correctly:

For Local: Make sure you installed Node 22.15.0. Check with node -v.

For Cloudflare Pages: By default Cloudflare uses Node 22.12.0 which will fail with error Build Awesome requires Node >=22.15.

You must force Cloudflare to use 22.15.0:

Option 1: Create file .nvmrc in root project, content:

22.15.0

Option 2: In Cloudflare dashboard > Settings > Variables > Add:

Name: NODE_VERSION
Value: 22.15.0

We recommend using .nvmrc file - we already included it for you.

If your hosting does not support 22.15 yet (some Netlify old build), downgrade Eleventy:

npm install @11ty/eleventy@3.1.6

And set engines in package.json to >=20.0.0.

6. Deployment - Step by Step

Deploy to Cloudflare Pages

  1. Push your project to GitHub

  2. Cloudflare Dashboard > Pages > Create Project > Connect GitHub

  3. Select your repo litov

  4. Build Settings:

    • Build command: If you use Local Mode: npm run build . If you use Tina Cloud Mode: npx tinacms build && npm run build
    • Output directory: _site

  5. Environment Variables: This is the most important!

    If Local Mode, add:

    TINA_PUBLIC_IS_LOCAL=true
NODE_VERSION=22.15.0

    If Cloud Mode, add:

    TINA_CLIENT_ID=your_id
TINA_TOKEN=your_token
NODE_VERSION=22.15.0

  6. Click Deploy

  7. After deploy, set custom domain: Pages > Custom domains

Your admin will be at yourdomain.com/admin

Deploy to Vercel

  1. Vercel > New Project > Import GitHub
  2. Framework: Other
  3. Build: npm run build (or npx tinacms build && npm run build for cloud mode)
  4. Output: _site
  5. Add ENV same as Cloudflare above in Vercel > Settings > Environment Variables
  6. Deploy

Deploy to Netlify

  1. Netlify > Add new site > Import from GitHub
  2. Build: npm run build (or with tinacms build for cloud)
  3. Publish: _site
  4. Add ENV in Site Settings > Environment Variables
  5. Deploy

7. How To Use After Setup (For Client / Non-Developer)

After deployment, you NEVER need to open code again.

  1. Go to yourdomain.com/admin
  2. Login with Tina Cloud account
  3. You can edit:
    • Site title, logo, footer in metadata
    • Homepage sections in Home
    • Blog posts in Blog
    • Services in Services
    • Pages in Pages
  4. Click Save - website will auto-update in 1-2 minutes (Cloudflare will rebuild automatically)

8. File Structure - Where to Edit What

_data/
  metadata.json -> Logo, site title, footer, social links
  page/
    home.yaml -> Homepage content (slider, intro, projects, clients)
content/
  blog/ -> Blog posts (.md files)
  services/ -> Services
  page/ -> About, Contact etc
public/
  img/ -> All images

You can edit via CMS or edit those files directly.

9. Common Errors and Fix

Error: Missing clientId, token Fix: You didn't rename .env.example to .env. Or you didn't add ENV in Cloudflare Variables. Check section 3.

Error: project not found 404 Fix: Your TINA_CLIENT_ID is wrong or truncated. Check full ID from app.tina.io. Also check if project was deleted.

Error: requires Node >=22.15 Fix: Add NODE_VERSION=22.15.0 in Cloudflare Variables and create .nvmrc file with 22.15.0.

Error: EBADENGINE Unsupported engine Fix: Update Node.js locally to 22.15.0. For Cloudflare, use NODE_VERSION variable.

10. Concept Summary

  1. Day 1 - Developer: Install Node 22.15.0, rename .env.example to .env, npm install, npm run dev, push to GitHub, deploy to Cloudflare with correct ENV and NODE_VERSION.
  2. Day 2 onwards - Client: Just go to /admin to edit content. No code needed.

That's the JAMstack way - Fast, Secure, Simple.

HOW TO UPDATE FROM v1.9 to v2.0:

1. BACKUP from OLD project: _data/ + content/ + public/img/
2. Extract NEW version
3. Paste backup folders into NEW version (Replace)
4. Rename .env.example to .env
5. npm install && npm run dev
6. Push to GitHub

Don't copy node_modules, _site, tina/__generated__

HOW TO UPDATE LITOV v1.9 to v2.0 AWESOME (Safe Method - No Content Lost)

IMPORTANT: Backup your content first. Only 3 folders contain your content.

Step 1: Backup Your Content (2 minutes)

From your OLD project, copy these 3 folders to your Desktop / safe place:

1. _data/      -> Contains your logo, site title, footer, homepage content
2. content/    -> Contains all your blog posts, services, pages
3. public/img/ -> Contains all your images

That's it. Only those 3. Don't backup node_modules or _site.

Step 2: Download New Version

  1. Go to https://gumroad.com/library
  2. Download Litov Awesome v2.0 zip
  3. Extract to new folder, example: litov-new/

Step 3: Move Your Content to New Version

Now copy your 3 backed-up folders into the NEW project and REPLACE the existing ones:

Copy:
Desktop/backup/_data/  -> to -> litov-new/_data/ (Replace)
Desktop/backup/content/ -> to -> litov-new/content/ (Replace)
Desktop/backup/public/img/ -> to -> litov-new/public/img/ (Replace / Merge)

For public/img/ : Use Merge, don't replace, so you keep both old and new images.

Step 4: Setup ENV (MOST IMPORTANT)

In the NEW folder, you will see .env.example

Rename it to .env

  • If you use LOCAL MODE:
TINA_PUBLIC_IS_LOCAL=true
  • If you use CLOUD MODE:
TINA_CLIENT_ID=your_id_from_app.tina.io
TINA_TOKEN=your_token_from_app.tina.io

Step 5: Install & Test

# Make sure Node is 22.15.0+
node -v

# Install
npm install

# Run
npm run dev

Open:

  • http://localhost:8080 -> Check if your content is there
  • http://localhost:8080/admin -> Check if CMS shows your posts

If everything looks good, you're done.

Step 6: Push to GitHub (Deploy Update)

git add .
git commit -m "update to awesome v2.0"
git push

Cloudflare / Vercel will auto deploy. Make sure you have ENV set in Cloudflare dashboard:

NODE_VERSION=22.15.0
TINA_CLIENT_ID=... (if cloud mode)
TINA_TOKEN=... (if cloud mode)

What NOT to copy:

  • Don't copy node_modules/ - always fresh install
  • Don't copy _site/ - it's build output
  • Don't copy tina/__generated__/ - auto generated
  • Don't copy old package.json - use new one for v2.0

Quick Checklist:

  • [ ] Backup _data, content, public/img from old
  • [ ] Download new zip
  • [ ] Replace those 3 folders in new project
  • [ ] Rename .env.example to .env
  • [ ] npm install
  • [ ] npm run dev to test
  • [ ] Push to GitHub

Done. Your content is safe, but you get new fast engine.

Need help? Contact Us