Configuration

These are all the supported configuration options in Greenwood, which you can define in a greenwood.config.js file in your project's root directory.

A greenwood.config.js file with default values would be:

module.exports = {
  workspace: 'src',  // path.join(process.cwd(), 'src')
  devServer: {
    port: 1984,
    host: 'localhost'
  },
  publicPath: '/',
  title: 'Greenwood App',
  meta: []
};

Dev Server

Configuration for Greenwood's development server are available using the devServer option. Two options are available:

  • port: Pick a different port when starting the dev server
  • host: If you need to use a custom domain (using pathname) when developing locally and generally used along with editing an /etc/hosts file.

Example

module.exports = {
  devServer: {
    port: 8181,
    host: 'local.my-domain.com'
  },
}

Markdown

Using your greenwood.config.js, within your project's root directory, you can add additional unifiedjs presets and settings to the wc-markdown-loader.

Example

greenwood.config.js

module.exports = {
  markdown: {
    settings: { commonmark: true },
    plugins: [
      require('rehype-slug'),
      require('rehype-autolink-headings')
    ]
  }
}

Keep in mind, the point in the chain in which these configured presets will be inserted is in rehype and ends with converting rehype to html.

Meta

You can use the meta option for the configuration of <meta> tags within the <head> tag of the generated index.html file. This is especially useful for providing text and images for social sharing and link previews like for Slack, text messages, and social media shares, in particular when using the Open Graph set of tags.

Example

This is an example of the meta configuration for the Greenwood website.

const FAVICON_HREF = '/assets/favicon.ico';
const META_DESCRIPTION = 'A modern and performant static site generator supporting Web Component based development';

module.exports = {
  meta: [
    { name: 'description', content: META_DESCRIPTION },
    { name: 'twitter:site', content: '@PrjEvergreen' },
    { property: 'og:title', content: 'Greenwood' },
    { property: 'og:type', content: 'website' },
    { property: 'og:url', content: 'https://www.greenwoodjs.io' },
    { property: 'og:image', content: 'https://s3.amazonaws.com/hosted.greenwoodjs.io/greenwood-logo.png' },
    { property: 'og:description', content: META_DESCRIPTION },
    { rel: 'shortcut icon', href: FAVICON_HREF },
    { rel: 'icon', href: FAVICON_HREF }
  ]
};

Which would be equivalent to:

<meta name="description" content="A modern and performant static site generator supporting Web Component based development">
<meta name="twitter:site" content="@PrjEvergreen">
<meta property="og:title" content="Greenwood">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.greenwoodjs.io/docs/">
<meta property="og:image" content="https://s3.amazonaws.com/hosted.greenwoodjs.io/greenwood-logo.png">
<meta property="og:description" content="A modern and performant static site generator supporting Web Component based development">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="icon" href="/assets/favicon.ico">

Optimization

Greenwood supports a couple different options for how it will generate a production build, depending on how much JavaScript you will need to serve your users.

  • strict (expiremental, but recommended for basic sites): What you write will only be used to pre-render your application. No JavaScript is shipped at all and will typically yield the best results in regards to performance.
  • spa (default): This will pre-render your site and also ship a full "SPA" experience for your users.

You can learn more about optimizations in our How It Works docs.

Example

module.exports = {
  optimization: 'spa'
}

Public Path

The publicPath options allows configuring additional URL segments to customize the <base href="/"> for your site.

Example

As an example, given:

  • Top level domain like: http(s)://www.my-domain.com
  • Deployment path of: /web
  • For a full URL of: http(s)://www.my-domain.com/web

Your publicPath configuration would be:

module.exports = {
  publicPath: '/web'
}

Title

A <title> element for all pages can be configured with the title option.

Example

An example of configuring your app's title:

module.exports = {
  title: 'My Static Site'
}

Workspace

Workspace path for your project where all your project files will be located. You can change it by passing a string. Using an absolute path is recommended.

Example

const path = require('path');

module.exports = {
  workspace: path.join(__dirname, 'www'),
}