On This Page
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:
- Creating content (pages)
- Shared layouts and styles
- Web Components for templating
Prerequisites
You will need the following installed on your machine:
- Latest NodeJS LTS (opens in a new window) version (required) - We recommend using a Node version manager (like NVM (opens in a new window)) to manage local node installations.
- Git (opens in a new window) (optional) - Can be useful for cloning and inspecting (opens in a new window) the companion repo for this guide, or otherwise managing your Greenwood project through version control.
You can verify that NodeJS has been installed correctly by checking its version from the command line:
$ node -v
v22.18.0
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 (or any name you want)
# You can skip TypeScript for now, and select your package manager of choice
$ npx @greenwood/init@latest --name my-app
$ cd my-app
# clean up the src/ directory
$ rm -rf src/
Or you can manually initialize a workspace and installing the Greenwood CLI yourself:
# make and change into your workspace directory
$ mkdir my-app
$ cd my-app
# initialize a package.json (you can accept all defaults)
$ npm init # or Yarn, or pnpm, etc...
# install Greenwood as a dev dependency
$ 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"
}
}
Next Section
With that all out of the way, let's move onto the next section.