OddSite

This site is built using:

• HTML, of course
• CSS w/ a load of Grids & Variables
• Eleventy JS w/ Markdown & Nunjucks
• Sass w/ OddBird’s Accoutrement & Herman
• Netlify for deployment
• A lot of ideas from a lot of cool people

Develop:

Install Node and Yarn

We recommend using nvm for node version management. Install it if necessary, then run nvm install (once per active shell) to use the correct version of node for OddSite development.

The correct Yarn version is included in the repo, and will be used automatically for any yarn command.

To upgrade the node version used by OddSite, update the version number in these places and then run nvm install to upgrade:

• package.json (engines.node field)
• .nvmrc

To upgrade the yarn version used by OddSite, update the version number in these places and then run yarn set version <new-version> to upgrade:

• package.json (engines.yarn field)
• .yarnrc (yarn-path line)

Install dependencies

yarn

Development tasks

Compile and run Eleventy server, with a watcher for file changes:

yarn serve

The site will be compiled into _site/ and available at http://localhost:8080.

You can also run individual commands:

# build the static site for development
yarn build

# build the static site for development, re-processing all images
yarn build:images

# build the static site for production (in local development)
yarn build:prod

# build the static site for production (on Netlify)
yarn prod

# format and lint all files
yarn lint

# compile sass
yarn sass

# compile js
yarn js

# format and lint sass
yarn lint:sass

# format and lint js
yarn lint:js

# compile sass docs
yarn sassdoc

Sass Docs are compiled into the _site/styleguide/ folder, which is then available at the URL: /styleguide/.

Deployment

The site is auto-deployed on Netlify from the main branch on GitHub. Deploys are automated on push to main.

Use branches and PRs for changes, and Netlify will create staging previews for functional review before merge.