First Pages: Getting Started

Rocket has the following prerequisites:

• Node 14+

Make sure they are installed before proceeding.

Setup

The fastest way to get started is by using an existing preset like the launch preset.

Step 1. Initialize the Project Package

Start by creating an empty folder for your project

mkdir my-project
cd my-project

Then initialize a package.json file

npm init -y

yarn init -y

pnpm init -y

Step 2. Install dependencies

npm install --save-dev @rocket/cli @rocket/launch

yarn add -D @rocket/cli @rocket/launch

pnpm add -D @rocket/cli @rocket/launch

Step 3. Bootstrap the project

npx rocket bootstrap

yarn rocket bootstrap

pnpx rocket bootstrap

The bootstrap command creates four files in your repo:

• .gitignore containing rocket's build artifacts
• rocket.config.js containing a minimal rocket config
• docs/.eleventyignore required to allow you to override templates
• docs/index.md your first page

It also set the package type to "module" and adds a start and docs package scripts.

import { rocketLaunch } from '@rocket/launch';

/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
  presets: [rocketLaunch()],
});

# Welcome to Your Rocket Site

Add your markdown content here.

_assets
_includes
_data

## Rocket ignore files (need to be the full relative path to the folders)
docs/_merged_data/
docs/_merged_assets/
docs/_merged_includes/

Add your First Page

Bootstrap created the file docs/index.md. Open it in your editor and change it to suit your needs.

NOTE: This tutorial assumes you are familiar with Markdown, for page authoring.

# Welcome to Your Rocket Site

Add your markdown content here.

Please note that the heading - text prefixed with # or ## - is not optional for each page in this tutorial. Everything below that first line is optional Markdown text.

Startup

Now you can launch your site locally with

npm start

yarn start

pnpx start

Taking Inventory Before Adding Pages:

We're about to add both content and navigation at the same time.

It can be helpful to take an inventory, before we start, to separate basic setup from the creation of content and navigation.

• We built the project with basic npm commands
• Added a couple required files manually
• Adjusted package.json
• docs/index.md to seed the content
• Launches with npm start

That's all it takes to get a new super-fast and powerful site, complete with a service worker, default styling, navigation, and ready to deploy as a plain old static files.

Next Steps

• Adding Pages
• Using Presets