!Keystone logo

Why Keystone?

Keystone is a static-site generator ideal for quickly building small websites. No setup required, and a collection of handy features are enabled by default.

Features

- Easy install & setup, one command and ready to go
- Auto-refresh development server
- Use templates and reusable partials/imports, with slots
- Automatic routing, just upload /public and you're ready to go
- Babel, SCSS, & Markdown support enabled by default, source maps in development mode
- JS & CSS minifying and bundling (with Rollup)
- Dynamic link loading (no page reload)
- Search index file generator, for easy website searching

Getting Started

Install

Create a new directory and run the following command to setup Keystone, package.json, & git. Node 14.x.x required.
``
$ npm install keystone-ssg
`
Great, you're installed!

Development server

Start the Keystone development server, and then go to http://localhost:8080 to see the example website.
`
$ npm run dev
`

Build project

The project is built within the /public folder after running the command, ready for upload.
`
$ npm run build
`

Building your website

There are six important directories within a Keystone project, each with their own purpose:

Pages

Every HTML .html & markdown .md file in the pages folder corresponds to a page on your website. There are two files in the example project in here, try opening index.html. The automatic routing will bundle the files to the /public folder upon running npm run build like so:
`
/pages/index.html -> /public/index.html
/pages/example.md -> /public/example/index.html
`
You may have noticed that index.html has the following tag: <_template basic.html />. This places the contents of index.html inside the slotted template file at /templates/basic.html. This custom HTML tag format works inside .md files too.

Templates

Templates can be used with /pages to provide a ready-made framework for your pages. Use a <_slot /> tag within the template file to provide an entry point for your content. Open /templates/basic.html and look for:
`html
<_var title default="Keystone default title" />
`
This is a variable slot, named title, in a template file, with an optional default value.

Using the following as a template tag inside of /pages will allow you to enter a custom value into the template, from a content page:
`html
<_template basic.html title="A custom title" />
`

Components

The /components folder is simply used for reusable components. The <_import> tag is used to import components into other HTML files, an example of which is inside /templates/basic.html.
`html
<_import header.html />
`
The <_import> tag can also be used to import the contents of any other kind of file (JS, SCSS etc), after first bundling the source.

Src

Place Javascript files within the /src folder. The following tag will be converted to a regular