Kirby & Vite Starterkit

Use this Starterkit for your next Kirby-CMS-Project. It comes with a customized Panel, customized Styles and with the build tool Vite for fast asset bundling. Kirby Vite is building the bridge between Kirby and Vite by providing helper functions to get the correct path to the versioned assets.

This Starterkit will open the Website and it's Panel in development mode, will live reload changed Content, Assets and Templates. You can additionally use own Scripts and Styles per Page.

Prerequisites

In order to work with this Repository, please install Node and Yarn, if not happened before. Make sure, both is available.

$ npm install -g yarn
$ npm -v && yarn -v

Installation

If your Computer is ready-to-go, clone this Repository and install it's dependencies.

$ git clone git@github.com:macx/kirby-vite-starterkit.git my-website
$ cd my-website
$ composer install
$ yarn install

To get feature updates from this starterkit, add a remote host entry and pull a new version. Be sure to commit your changes before. If you just want to update Kirby, do it on your own.

$ git remote add updates git@github.com:macx/kirby-vite-starterkit.git
$ git pull updates

Development

Folder	What's in it?
/content	The content of your website.
/src	All your assets for the Vite bundling. app.js and app.scss are your main styles and script.
/src/assets	Folder for your global Fonts and Images.
/src/templates	Optionally, every page can contain it's own styles index.scss and script index.js.
/site	Project folder for Kirbys Config, Blueprints, Plugins, Snippets and Templates.
/public	The Public folder is your document root of your website, including the bundled assets from Vite.

Startits

$ yarn dev

$ yarn build

$ yarn preview

Thanks to

This Starterkit was heavely inspired by the Kirby Vite Multi Page Kit from @arnoson.