Quick Start

Introduction

This page will guide you through setting up your first site built with QuantumJS. At the end you will have written some quantum markup and will have compiled it into a HTML page that can be viewed in the browser.

Install quantum

The first step is to install quantum globally. Here is the command for doing that:

npm install -g quantum-core

Initialise the project

Next we are going to set up the project and install the dependencies we need.

Create a new directory for our example project to live in, and cd into it:

mkdir example-quantum-site
cd example-quantum-site

Initialise an npm project with:

npm init

Then install some of the quantum modules we are going to use:

npm install --save-dev quantum-html quantum-docs

Create a config file

Next we'll create a config file for building our project. The config file describes how to convert your markup into HTML. Create a file called quantum.config.js and copy the following into it:

const html = require('quantum-html')
const docs = require('quantum-docs')

/*
  Define the set of entity transforms - these transform
  individual entries in the page to virtual dom.
*/
const htmlTransforms = {
  html: html.entityTransforms(),
  docs: docs.entityTransforms()
}

/*
  Define the pipeline - this transforms an entire page from
  quantum ast to HTML.
*/
const pipeline = [
  html.fileTransform({ entityTransforms: htmlTransforms })
]

/* Export the pipeline, the pages we want to transform */
module.exports = {
  pipeline: pipeline,
  pages: '*.um'
}

Create an example page

Create a file called index.um and copy this into it:

index.um

@topSection
  @title My First Page
  @description: My first page built with Quantum

@contentSection
  @topic Information
    Page Content can go inside topics

    @section Sub-information
      It can also go inside sections inside topics

@codeblock js
  // Example Codeblock
  const length = 5
  for (let i = 0; i < length; i++) {
    console.log(i)
}

Build the site

Run this command in the terminal to build the site

quantum build

Check the 'target' directory for the output. There should be a file called index.html in there - open it up in a browser to see what has been generated.

Watching for changes

When working on your site, you'll more likely want to use the watch command. This command starts up a web server and reloads the page in your browser whenever a change is made.

quantum watch

After running quantum watch, open http://localhost:8080 in your browser and then change something in index.um.

What Next?

Read more about quantum and how it works here: