Gatsby starter CMS landing page

Use this starter, if you want to create a simple landing page for a product very quickly. Check out this sample page here: https://gatsby-starter-cms-landing-page.netlify.app/

Used technologies

This site uses these technologies to achieve a great developer experience and easy editing:

• website creation framework Gatsby
• type checking during development via Typescript
• website hosting via Netlify
• form submissions via Netlify Forms
• analytics via Matomo
• styling via Tailwind CSS
• fonts via Google Fonts (but served locally or via Netlify)
• formatting via Prettier
• dependency updates via Renovate
• commit message standardization via Conventional Commits
  • enforcing of this standard via CommitLint and husky

Local development

Getting started

• create a new repository from the template on GitHub
• clone the repository
• cd into the folder
• install the dependencies via npm ci
• start the development server via npm start
• update the code to change the design and content

Adding animations on scroll

The gatsby-plugin-scroll-reveal is added to this template. With this plugin, it's easy to add animations, when the user scrolls through the page.

To get started, follow their usage guide.

One time set up

Setting up the netlify deployment

• make sure, you have a Netlify account
• allow the Netlify Github app to access your repositories (Link)
• add a new site in Netlify
  • import from existing project
  • authorize Netlify
  • choose this repository
  • keep the default settings
  • deploy the site
• adjust your site name in the site settings

Customizing the fonts

• install your fonts via FontSource (e.g. npm install @fontsource/roboto)
• uninstall the fonts you no longer need (see package.json) (e.g. npm uninstall @fontsource/itim)
• adjust the imported fonts in the gatsby-browser.ts file
• adjust the tailwind defaults in the tailwind.config.js file
• restart the gatsby development server

Setting up Matomo analytics

• make sure, you have an account for Matomo
• add a new website via the Administration > Measurables > Manage options in the Matomo UI
• configure the site
  • give a meaningful name
  • add the URL from which you want the website to be publicly accessed
  • use the only track visits and actions when the action URL starts with ... setting
  • leave the rest as default
• comment in the matomo plugin in the gatsby config
• use the matomo URL and the site ID from your Matomo configuration