Design Tokens for Mesh have just been released!
Skip to content

Static site starter

Our recommended static site solution at nib is Gatsby, and we have a simple starter template

Gatsby is a React-based open source framework for creating websites and apps. For an overview of the project structure please refer to the Gatsby documentation - Building with Components.

Using the starter

Our static-site-starter repository has been set up as a template repository and can be used to create your own repo. Try out the template.

Alternatively our starter can be used via the Gatsby cli to set up your new site. As our static-site-starter GitHub repository is private, we are restricted to referencing it locally when creating a new gatsby site via the CLI.

Clone the repository:

bash
git clone [email protected]:nib-group/static-site-starter.git

Run from your CLI:

bash
npx gatsby new landing-page ../path/to/static-site-starter

Now install and run:

bash
cd landing-page
npm install
npm run develop

Then visit http://localhost:8000/ to view your static site.

Screenshot of the UI you see when you first run the static site starter

Production build

To see a preview of the production build locally, simply run:

bash
npm run build:unprefixed
npm run serve

Then visit http://localhost:9000/ to view your production build.

Note: build:unprefixed is required so that the path-prefix is not applied, otherwise assets (client side JS, images, fonts) would not load locally. The same behaviour is experienced in kaos when accesses the static site directly from s3. To see a working site you must also configure the location in the nib-www-router.

After starting your new site make these updates

There are a number of places where you will need to update your site name after spinning up your new gatsby site based upon this starter.

  1. package.json - name
  2. gatsby-config.js - pathPrefix and title
  3. README.md - title, url, plus remove all unnecessary information
  4. src/metrics/index.js - update tealium data layer attributes

    remember to update at least the pageName attribute on each page!

Features

Sceptre for pipelines

The starter has a familiar /.buildkite directory with an pipeline.yml for pipeline management.

Prepush hook

There is a prepush hook that formats your code with prettier and runs unit tests.

Dependency audit

The test script for this starter also runs npm's audit script.

It is set to fail for any High or Critical known vulnerabilities found.

If your build is failing for this reason, try running npm audit fix to see if issues can be resolved within semver ranges specified in your package.json.

If not, you will need to read the change logs for each major bump and make code changes as required.

Looking for TypeScript?

The Sales team have forked this repo to create the sales-gatsby-starter, with TypeScript support. It is likely that we will add TypeScript to the static-site-starter as the majority of new projects require it, but in the meantime this is your best option.