Skip to content

Home

Jump to bottom
Rishi Khan edited this page Jan 31, 2021 · 12 revisions

Welcome to the TTM-Gatsby wiki!💜

The README.md file for this repository has the basic information about the Gatsby starter. Please feel free to ask if there are any questions. We are currently working on a CI/CD with Netlify.

Get Started Developing

To get started, clone the repository by doing git clone https://github.com/Toronto-Tech-Mentoring/TTM-Gatsby.git

Navigate to your local repository until you're in the working directory containing the package.json file Now you have to install all your node modules/dependencies.

npm install

This should install the gatsby cli but in the case that it doesn't, run: npm install -g gatsby-cli

You can serve up your local dev environment now through gatsby develop

Using Docker

If you prefer to use Docker container to run Gatsby (which is good for being platform independent and reducing the installs on your machine). Follow these steps:

  1. Install docker and docker-compose
  2. Navigate to a directory and clone the repo
  3. docker-compose build
  4. docker-compose up
  5. Open a browser and go to localhost:3000

Docs

🚀 More information about the Gatsby starter can be found here

CSS Styling

Photos and Illustrations

Please use SVG's when possible and through the CTTO Figma File.

CSS Modules

We are using CSS Modules for styling the components. What are CSS modules you might be asking? It's just regular css with a .module.css extension (example: about.module.css) that is scoped to the page/component you apply it to. Series on CSS modules from CSS tricks

The main advantage of CSS modules over regular CSS is that all of us can work on a component/page without worrying about if we are going to interfere with other members CSS.

Here is how an example workflow will look, let's say you are designing the Navbar component, this will reside in the components folder, create a new file call Navbar.module.css and this is where all of the styles pertaining to the Navbar.js component will go. Make sure to import the styles you just created into the Navbar.js component and thats it.

This is just a proposal, so try it out and see if you like it!

Deployment

This site is deployed on Netlify and there is automatic deployment whenever a PR is merged into the master branch!

Clone this wiki locally