Getting Started | Xylit SSG

Prerequisites

Node.js: v22.0.0 or higher
Editor: VS Code is recommended

Xylit does not have any Plugins for Syntax Highligting and IntelliSense right now. As workaround you can install Inline HTML.

Using the CLI wizard

npm create @xylit/ssg

Then Follow the prompts!

You can also directly specify the project directory & skip the questionaire while using the default settings:

npm create @xylit/ssg@latest my-website -- --yes

Manual Setup

This guide will walk you through the steps to manually install and configure a new project. If you prefer not to use the automatic create xylit CLI tool, you can set up your project yourself by following the guide below.

Create your directory
Create an empty directory with the name of your project, and then navigate into it.
```
mkdir my-website
cd my-website
```
Once you are in your new directory, create your project package.json file. This is how you will manage your project dependencies, including Xylit. If you aren’t familiar with this file format, run the following command to create one.
```
npm init --yes
```
Install Xylit SSG
First, install the Xylit project dependencies inside your project.
```
npm install @xylit/ssg
```
Xylit Projects are ESM only. You have to add the type definition to you package.json:
```
"type": "module",
```
Then, add the following scripts to your package.json:
```
"scripts": {
  "serve": "npx @xylit/ssg serve",
  "build": "npx @xylit/ssg build",
},
```
You’ll use these scripts later in the guide to start Astro and run its different commands.
In your text editor, create a new file in your directory at index.ssg.js. This will be your first Xylit page in the project.

For this guide, copy and paste the following code snippet into your new file:
```
export default html`
  <html>
    <body>
      <h1>Hello World </h1>
    </body>
  </html>
`;

style.css`
  h1 { color: azure; }
`;
```
Create xylit.config.js
Xylit is configured using xylit.config.js. This file is optional if you do not need to configure Xylit, but you may wish to create it now.

Create xylit.config.js at the root of your project, and copy the code below into it:
```
export default {};
```
Read Xylits’ configuration reference for more information.
You can now start the Xylit DevServer with npm run serve.

Configuration

cwd

The directory that uses Xylit SSG to watch for file changes.

Type: string
default: .

input

Set the directory that xylit will look for resources and routes. The value can be either an absolute file system path or a path relative to the project root.

Type: string
default: ./site

output

Set the directory that xylit build writes your final build to. The value can be either an absolute file system path or a path relative to the project root.

Type: string
default: ./_site

style

style.cssModules

Definition of the Postcss Module Plugin option that should be used.

Type: [SassOptions]
default: { localsConvention: "camelCaseOnly", scopeBehaviour: "local" }

style.sass

Definition of the sass option that should be used. The given options will be merged with the defaults.

Type: [SassOptions]
default: { loadPaths: [cwd, "node_modules"] }

style.plugins

Inject PostCSS plugins, you want to use.

Type: [PostCSSPlugin]
default: []

server

server.port

Set which port the server should listen on.

Type: number
default: 8080

server.host

Set which network IP addresses the server should listen on (i.e. non-localhost IPs).

Type: string
default: localhost

server.root

Set the fallback folder that will be used when the resource couldn't be found in the input folder.

Type: string
default: ./public