File-Based Routing

Greenwood supports file-based routing, which means that filenames in the pages/ directory of your project's workspace will be mapped to URLs that you can visit in your browser.

Static Pages

For static content, Greenwood supports HTML and markdown (with a plugin) as page formats.

For example, given the following folder structure:

src/
  pages/
    blog/
      first-post.md
      second-post.md
    index.html
    about.md

The following routes will be accessible from the browser:

src/pages/index.html -> /
src/pages/about.md -> /about/
src/pages/blog/first-post.md -> /blog/first-post/
src/pages/blog/second-post.md -> /blog/second-post/

SSR

Greenwood supports the intermingling of static pages with dynamic pages. Taking the example above, if we wanted a server rendered route, like a "Products" page, we can simply create a JavaScript file following the same naming convention.

src/
  pages/
    blog/
      first-post.md
      second-post.md
    index.html
    about.md
    products.js

Now the route /products/ will be available and will re-run on each request.

See our section on server-rendering to learn about using SSR in Greenwood.

APIs

Within a dedicated /pages/api/ directory, backend only routes can be created that can be called from the client.

src/
  pages/
    api/
      search.js

Now the route /api/search will be available to return a Web API Response.

See our section on API Routes to learn about using SSR in Greenwood.

SPA

You can opt-out of all file-based routing, like for a Single Page Application (SPA), and go full client-side only mode by just putting an index.html at the root of your workspace. (e.g. no pages/ directory).

Below is an example project structure for a typical SPA:

src/
  components/
    footer.js
    header.js
  routes/
    products.js
    home.js
  styles.css
  index.js
  index.html

SPA based projects do not support layouts or (active) frontmatter.

Not Found

As is a common convention with most hosting providers (opens in a new window) and web servers, you can create a 404 page in your pages/ directory which will be used as the default Not Found page for your site.

src/
  pages/
    404.html

Edit on GitHub

Introduction

Pages

Resources

Plugins

Content As Data

Reference