Skip to content

index.md

Latest commit

 

History

History
101 lines (68 loc) · 3.27 KB

index.md

File metadata and controls

101 lines (68 loc) · 3.27 KB
order 1
layout guides
tocHeading 2

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. Latest NodeJS LTS version (required) - We recommend using a Node version manager (like NVM) to manage local node installations.
  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 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
$ npx @greenwood/init@latest my-app
$ cd my-app

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

Or you can also manually initialize a repository setting up and 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"
  }
}

Next Section

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