Purely Functional Website

Install gatsby-cli globally:

npm install -g gatsby-cli

Install project dependencies:

yarn install

npm start

or

gatsby develop

Open the browser to localhost:8000

Work on a branch off of master. Build and merge into master when ready to launch changes.

Global site metadata is located in gatsby-config.js

siteMetadata: {
  og_image: `./src/images/gatsby-icon.png`,
  og_url: 'https://[email protected]',
  title: ``,
  description: `default description here`,
  twitter_creator: '',
  keywords: ''
},

Import at the top: import launchIllustrationBackground from '../../images/illustration-background.png'

Include in <img src>: src={launchIllustrationBackground}

import setBgImage from src/utils/index.js

usage:

style={setBgImage('https://kelli.airshipcms.io/assets/images/portfolio-the-launch3.png')}

In SCSS, the path is background-image: url(../images/download-bluegrey.png); Images need to be dropped into src/images

In SCSS, the path is background-image: url(../static/download-bluegrey.svg); Images need to be dropped into src/static

Since the OG image isn't used anywhere when the source files are compiled, the file (or files, if alternate images are used on other pages) must be placed manually in the static/ folder. Then the image can be linked as:

og_image: /[email protected]

git push on the master branch will launch compartments/ to [email protected]

To generate static files in the simplest way, run:

npm run build

The public/ directory will contain all the files necessary to copy to the server.

To test the production build locally, run

gatsby serve

Open the browser to localhost:9000