Static site starter

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:

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

Run from your CLI:

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

Now install and run:

cd landing-page
npm install
npm run develop

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

Production build

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

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.