How to Use
Some suggestions for how to use this starter.
Chris Tham
2021-10-16
Share this post on:
- Clone your own version of the starter template or fork the repository. Run
yarn
thenyarn build
oryarn develop
. - The default colour scheme is purple to match the Gatsby logo. Change to your preferred hue by doing a global search and replace of ‘-purple-’ to your favourite colour.
- The home (landing) page consists of a number of components (Hero, Feature, CTA, …) - edit these components in
src/components
to customise. - The
/contact
page displays an OpenStreetMaps map via Leaflet - customise by changing to your preferred set of coordinates. gatsby-config.js
has all the site parameters - edit site metadata to suit.- Create new MDX pages in
src/mdx
(using either.md
or.mdx
extension). Add React components to MDX in thesrc/pages/{mdx.slug}.tsx
file. - Any content created in the
src/mdx/blog
subdirectory will automatically be a blog post. Usesrc/mdx/post/2000-01-01-template.md
as a base for creating a new blog post. - If you create a new tag (eg.
newtag
) a new tag page will be created ie./tags/newtag
. The/tags
page will enumerate all tags. - If you want to change the navigation menu, edit
src/components/header.tsx
. Similarly, editsrc/components/footer.tsx
to customise the footer. - If you make a lot of changes, use
yarn lint
andyarn type-check
to check everything is okay.
SendGrid configuration (for contact form)
Insert the following environment variables (either in .env or on deployment host):
SENDGRID_API_KEY
SENDGRID_AUTHORIZED_EMAIL