Netlify Stackbit Multi Site Example

screenshot of Netlify Stackbit Multi Site Example
gatsby
react
scss
netlifycms

Netlify Stackbit Multi Site Example

Gatsby Multi-site deployable on Netlify and built using Stackbit

Overview:

This product is a working multisite built using Gatsby and deployed on Netlify. It offers three different Gatsby sites that are randomly served when accessing the provided URL. The sites were set up this way for novelty purposes, as the developer couldn't decide between the themes. Two of the sites are backed by Netlify CMS and built via Stackbit, while the third one was built off the Gatsby Casper Ghost starter and modified for Netlify.

Features:

  • Multisite functionality with three different Gatsby sites.
  • Random selection of sites when accessing the URL.
  • Two sites backed by Netlify CMS and built via Stackbit.
  • One site built off the Gatsby Casper Ghost starter and modified for Netlify.

Installation:

To run the site locally, follow these steps:

  1. Install Node.js and npm.
  2. Install npm dependencies.
  3. Get the "stackbit-api-key" from the project menu in the Stackbit dashboard.
  4. Run the following command to assign the key to the STACKBIT_API_KEY environment variable.
  5. Run the following command to fetch additional site contents from Stackbit if needed.
  6. Start a development server.
  7. Browse to http://localhost:8000/ to view the site.

Summary:

This product is a working multisite built with Gatsby and deployed on Netlify. It offers three different Gatsby sites, with two of them backed by Netlify CMS via Stackbit and one built off the Gatsby Casper Ghost starter. To install and run the site locally, Node.js and npm must be installed, and npm dependencies need to be installed. The site can then be accessed by running a development server and browsing to http://localhost:8000/.

gatsby
Gatsby

GatsbyJS is a free and open-source static site generator based on React. It uses a modern development stack including Webpack, GraphQL, and modern JavaScript and CSS frameworks. It also provides a rich set of plugins, starters, and themes.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

netlifycms
NetlifyCMS

Netlify CMS is a powerful and flexible content management system that is designed to work seamlessly with the Netlify platform. Netlify CMS provides a user-friendly interface for managing content, including support for custom content types, localization, and asset management.

netlify
Netlify

Netlify is a cloud-based web development platform that provides a range of tools and services to help developers build, deploy, and manage modern web applications. It offers features such as continuous deployment, serverless functions, and CDN hosting, making it an ideal platform for building fast, scalable, and secure websites.