Skip to content

README.md

Latest commit

 

History

History
106 lines (67 loc) · 3.22 KB

README.md

File metadata and controls

106 lines (67 loc) · 3.22 KB

SoftStack Factory

Overview

SoftStack Factory's website showcases our history as a coding school, featuring the classes we offered, and highlights the organizations we've supported in our community initiatives. This site is built with React, Gatsby, and Material-UI, and is hosted on GitHub Pages.

🛠 Prerequisites

Make sure you have the following installed:

  • Node.js (version 14 or later recommended)
  • npm (comes with Node.js) or yarn
  • Gatsby CLI (optional, for additional commands)

🚧 Setting Up the Project

  1. Clone the Repository:

    git clone https://github.com/digital-underground/ssf.git
cd ssf

  2. Install Dependencies:

    Use npm or yarn to install the required dependencies:

    npm install

  3. Material-UI Setup:

    This project utilizes Material-UI for consistent design components. If you need to install it again or add new Material-UI libraries, use:

    npm install @mui/material @emotion/react @emotion/styled

💻 Developing Locally

To run the site locally with hot-reloading enabled:

npm run develop

This command will start a local development server at http://localhost:8000.

🧩 Using Material-UI

Material-UI provides pre-designed components and themes. Here’s a quick guide on using Material-UI components:

  • Import Components: Import Material-UI components as needed in your pages or components:

    import Button from '@mui/material/Button';

  • Custom Themes: You can customize the default Material-UI theme by wrapping your application in a theme provider. Add your theme in gatsby-browser.js or gatsby-ssr.js for server-side rendering support:

    import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
    secondary: { main: '#dc004e' },
  },
});

// Wrap your app with the ThemeProvider

  • Styling with Material-UI: You can use the sx prop in Material-UI components for styling, or create custom styles with makeStyles if you need advanced styling.

🌐 Deploying Your Gatsby Website to GitHub Pages

This project is set up for deployment to GitHub Pages. Follow these steps to deploy your changes:

  1. Build and Deploy: To build your site and push it to the gh-pages branch, use:

    npm run deploy

    This command builds your Gatsby site and pushes the static files to the gh-pages branch.

  2. Setting GitHub Pages:

    • Go to your GitHub repository.
    • Under Settings > Pages, set the branch to gh-pages for deployment.

  3. Check Deployment: Your site should be live at https://your-username.github.io/ssf.

Additional Tips

  • Linting and Formatting: Consider using ESLint and Prettier for consistent code quality. You can set up custom scripts to lint and format code.
  • Environment Variables: Gatsby can use .env files. If needed, set environment variables in .env.development or .env.production.

For questions or support, please contact the SoftStack Factory team.