Getting Started

Hosting

Ecosystem

Tutorials

On This Page

  1. What to Expect
  2. Prerequisites
  3. Setup
  4. Jump Right In
  5. Next Section

Getting Started

Greenwood aims to leverage the web platform as much as possible, with just a little extra convenience added on top. This section of our Guides content will take you through a high level overview of the basics of Greenwood, with a light introduction to some of its more advanced capabilities and patterns.

What to Expect

This Getting Started guide will walk you through creating a basic static content (blog) site, touching upon the following areas:

  1. Creating content (pages)
  2. Shared layouts and styles
  3. Web Components for templating

Prerequisites

You will need the following installed on your machine:

  1. NodeJS LTS (required) - We recommend using a Node version manager (like NVM) to install the latest stable version of Node
  2. Git (optional) - Can be useful for cloning and inspecting the companion repo for this guide, or otherwise managing your Greenwood project through version control

You can verify that both NodeJS and NPM are installed correctly by checking their version from the command line:

$ node -v
v18.12.1

$ npm -v
8.19.2

Setup

With NodeJS installed, you'll want to prepare a workspace for your project and use our init package to scaffold out a new project into a directory of your choosing:

# initialize a new Greenwood project into the my-app directory
$ npx @greenwood/init@latest my-app
$ cd my-app

# clean up the src/ directory
$ rm -rf src/

Or you can also initialize a repository manually by installing the Greenwood CLI yourself, like so:

# make and change into your workspace directory
$ mkdir my-app
$ cd my-app

# initialize a package.json (you can accept all defaults)
$ npm init

# install Greenwood as a devDependency
$ npm i -D @greenwood/cli@latest

Then setup some npm scripts in your package.json for running Greenwood and make sure to set the type to module:

{
  "type": "module",
  "scripts": {
    "dev": "greenwood develop",
    "build": "greenwood build",
    "serve": "greenwood serve"
  }
}

Jump Right In

If you want to jump to the final results right away, you can browse the companion repo or play around with it directly in your browser on Stackblitz.

Next Section

With that all out of the way, let's move onto the next section.

Edit on GitHub