Installation

To create a new Ecopages project, you can install the core package and desired integrations using Bun:

bun jsr add @ecopages/core @ecopages/kitajs @ecopages/mdx

This example installs the core package along with the KitaJS and MDX integrations. You can add or remove integrations based on your project needs.

Configuration

After installation, create an eco.config.ts file in your project's root directory to configure Ecopages:

import { ConfigBuilder } from '@ecopages/core';
import { kitajsPlugin } from '@ecopages/kitajs';
import { mdxPlugin } from '@ecopages/mdx';

const config = await new ConfigBuilder()
  .setRootDir(import.meta.dir)
  .setBaseUrl(import.meta.env.ECOPAGES_BASE_URL)
  .setIntegrations([kitajsPlugin(), mdxPlugin()])
  .build();

export default config;

This configuration sets up Ecopages with the KitaJS and MDX integrations. Adjust the integrations and other settings as needed for your project.

Project Structure

A typical Ecopages project structure looks like this:

my-project/
├── src/
│   ├── pages/
│   ├── layouts/
│   ├── components/
│   └── includes/
├── public/
├── eco.config.ts
└── package.json

• src/pages/: Contains your page files (e.g., .mdx, .kita.tsx, .lit.tsx)
• src/layouts/: Holds layout components
• src/components/: Stores reusable components
• src/includes/: Contains include templates (e.g., head.kita.tsx, html.kita.tsx)
• public/: Static assets that will be copied to the build directory
• eco.config.ts: Ecopages configuration file

Usage

Add the following scripts to your package.json:

{
  "scripts": {
    "dev": "ecopages dev",
    "build": "ecopages build",
    "start": "ecopages start",
    "preview": "ecopages preview"
  }
}

| Note: Due to current limitations of jsr, the bin directory should be added manually on postinstall. Please add the following postinstall script to your package.json:

{
  "postinstall": "bunx symlink-dir node_modules/@ecopages/core/src/bin/ecopages.js node_modules/.bin/ecopages"
}

Now you can use these commands to develop and build your Ecopages project:

• bun run dev: Starts the development server
• bun run build: Builds your project for production
• bun run start: Serves the production build
• bun run preview: Previews the production build locally

Next Steps

With Ecopages installed and configured, you're ready to start building your static site. Check out the Creating Pages guide to learn how to create content using different integrations.