klokie / multilingual-gatsby-starter

Gatsby starter for a static portfolio website/blog, supporting multiple languages, NetlifyCMS, Material UI components customizable in Sass

Multilingual Gatsby NetlifyCMS Starter

This is a gatsby starter, it supports multiple languages, NetlifyCMS, styling in Sass, and material ui components. A hosted demo is found at https://mountaincentral.netlify.com

Table of Contents

• Built With
• Getting Started
  • Prerequisites
  • Clone the repo
  • Development
  • Sass
  • Set up NetlifyCMS
  • Configuring NetlifyCMS
• Lighthouse Audit
• Author

Built With

• GatsbyJS - to obtain static/offline Progressive Web App
• NetlifyCMS - to obtain blog posts from markdown files.
• react-i18next - Internationalization to obtain multilingual site
• Sass - for styling
• react-md - Material UI components customizable in Sass instead of inline styles

Getting Started

These instructions will get you a copy of this gastby starter up and running on your local machine for development and testing purposes.

Prerequisites

Make sure to have Node & Yarn installed on your local machine

Open a terminal window and install React & Gatsby's command line tool

yarn add react react-dom gatsby-cli

Clone the repo

Clone the repo in the directory of your choice and then move to this new directory

git clone https://github.com/charbelchahine/multilingual-gatsby-netlifycms.git
cd multilingual-gatsby-netlifycms

Install all dependencies for the prototype

yarn install

Development

Start a hot-reloading development environment

gatsby develop

You will now be able to view the prototype at http://localhost:8000/. Any change you make to your React components will immediately be visible in the browser.

Sass

Run yarn sasss before making changes to any of the .scss files.

Set up NetlifyCMS

The following steps-by-steps use Netlify to host the starter from GitHub. Other methods can be used to implement NetlifyCMS.

1. Sign in or make a Netlify account
2. Make a New site From Git and select GitHub
3. Select the appropriate repo
4. Go to the Identity tab and Enable Identity
5. Click on Settings and usage
6. Under Registration check Invite only
7. Under External providers, add GitHub, Google etc
8. Under Services enable git gateway
9. Go back to the Identiy tab and invite users/yourself
10. Go to your netlify hosted website /admin/ and login using your credentials to access the CMS

Configuring NetlifyCMS

In /static/admin/confiq.yml, the CMS can be configured. Right now, blog posts are configured to have the same path in english & french; hence the titles are also the same since they are configured to create the path in gatsby-node.js.

Lighthouse Audit

Audits	Score
Performance	96%
Progressive Web App	96%
Accessibility	100%
Best Practices	100%
SEO	100%

Author

Charbel Chahine - LinkedIn