@kobono-studio/create-webflow-starter v1.0.6

🌐 create-webflow-starter

A powerful CLI tool to scaffold modern Webflow projects using Vite and deploy them to GitHub — all with a single command. Whether you're a beginner or a pro, this tool gets you up and running in minutes.

✨ Features

• ✅ Interactive prompts to set up your project
• ⚙️ Generates vite.config.js, starter.config.js, ESLint/Prettier config, and package.json
• 🧱 Adds plugins:
  • vite-plugin-webflow-bundler
  • vite-plugin-github-deploy
• 🔐 Git + GitHub SSH integration with automatic key generation
• 🚀 Optional GitHub deployment (including split repos for private source/public dist)
• 📦 Installs dependencies and shows you how to start the dev server manually

💡 Why use this tool?

Using create-webflow-starter simplifies the entire workflow of managing Webflow projects with custom code and modern development tools.

🚀 Benefits

• 🎯 One command setup: Everything is scaffolded and configured in minutes.
• 🧠 Smart deployment: Handles GitHub repos, SSH keys, and CDN setup automatically.
• 🧪 Works out of the box: ESLint, Prettier, and Vite pre-configured.
• 🔁 Versioned deployment: Paired with Git versioning + jsDelivr delivery.

🔌 Powered by

➤ vite-plugin-webflow-bundler

• 🧠 Smart script loading: Automatically chooses between localhost and CDN depending on where your Webflow page is opened.
• 🔁 Hot-reload compatible: Works with vite dev for instant local updates.
• 📋 Copy-paste ready: Generates loader snippets you can paste into Webflow custom code areas.
• 📝 Generates manifest: Includes all scripts and styles, versioned for CDN use.

➤ vite-plugin-github-deploy

• 🔐 Handles SSH + GitHub auth
• ⚙️ Creates public/private repos via GitHub API
• 🚀 Pushes build to GitHub for jsDelivr CDN delivery

🚀 Quick Start

npm install -g @kobono-studio/create-webflow-starter
create-webflow-starter
# or
npx @kobono-studio/create-webflow-starter

💡 If you get a permission error, you may need to prefix the install command with sudo:

sudo npm install -g @kobono-studio/create-webflow-starter

You’ll be prompted for:

1. 📛 Project name
2. 📁 Whether to create a new folder
3. 🔧 Git deployment mode:
   • none
   • public-only
   • split
4. (if needed) GitHub user/org, branch name, public repo name
5. 🗝 Auto-setup of SSH key and GitHub authentication

# Once it's done, follow the instructions:
cd my-project
npm run dev

🧰 Installation Requirements

✅ Node.js

Install from https://nodejs.org — minimum v18.

✅ Git + GitHub CLI

macOS

brew install git
brew install gh

You may need to prefix with sudo if you get a permissions error:

sudo brew install git
sudo brew install gh

Windows

• Install Git
• Install GitHub CLI

Then run:

gh auth login

Choose SSH when asked for protocol. If you don't have a key, one will be generated for you.

🧠 Git Modes Explained

🧩 Perfect for:

• public-only: open source
• split: Webflow assets via jsDelivr

📁 Project Structure

my-project/
├── dist/
├── public/
├── src/
│   ├── css/
│   └── script.js
├── .eslintignore
├── .gitignore
├── .prettierignore
├── .prettierrc
├── eslint.config.js
├── index.html
├── package.json
├── starter.config.js
└── vite.config.js

⚙️ Config Example: starter.config.js

export default {
  cdn: {
    baseUrl: 'https://cdn.jsdelivr.net/gh',
    user: 'your-github-user',
    repo: 'your-public-repo',
    branch: 'main',
    org: true, // optional
  },
  deploy: {
    mode: 'split',
    publicRepo: 'webflow-assets',
    privateRepo: 'source-code-repo',
    branch: 'main',
  },
}

🔁 Workflow Summary

1. 👋 You launch: npx create-webflow-starter
2. 🧠 You answer a few questions
3. 🔐 If needed:
   • SSH key is created
   • GitHub auth is verified
4. 📦 Project is scaffolded
5. 📁 Git repos are created if required
6. 👨‍💻 Final instructions are shown — just cd into your folder (if needed) and run npm run dev!

🧪 Webflow Integration Preview

After running:

npm run dev

Visit:

http://localhost:3000/webflow

You'll get a dedicated interface with:

• 🔍 A visual preview of your loaders (CSS & JS)
• 📋 Copy-paste buttons for each loader
• ✅ Snippets that switch automatically between:
  • Local dev (localhost)
  • Production CDN (jsDelivr)

This makes it super easy to integrate modern, versioned scripts directly into Webflow's custom code areas — no guesswork, no manual rewriting.

🧠 Author

Made with ❤️ by Pierre Lovenfosse

📄 License

MIT — © Pierre Lovenfosse