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 with Node, and will be used automatically for any yarn command. To activate it, run corepack enable (once per local Node installation).

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, run yarn set version latest and then update the version range in package.json (engines.yarn field).

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:7050.

If localias is configured and running, add an alias for this project:

localias set oddsite.local 7050

This will allow you to visit the project at https://oddsite.local.

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.