diff --git a/README.md b/README.md index fe8e6ddd..cf63aa17 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,102 @@ Website built with Webiu: https://www.scorelab.org/ The project is based on ReactJs, JavaScript and GatsbyJs. You need to make sure that you have compatible versions of node/yarn, npm installed. SASS as the stylesheet is used in this project. -## Initial Setup +### Local Development Setup + +You will need to have Gatsby CLI installed into your system +Go to the offical Gatsby documentation and proceed further to set up the Gatsby CLI https://www.gatsbyjs.com/docs/tutorial/ + +#### Project Dependencies + +This project relies on the dependencies as well. + +Name | Version | +--- | --- | +node | `14.17.4` | +npm | `6.14.14` | +Gatsby CLI | `4.0.0` | + +You might require nvm (Node Version Manager) if you are dealing with multiple versions of Nodejs. + +#### Installing Dependencies in **Ubuntu/Debian** + +``` +# Install nvm +sudo apt install curl +curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash + +source ~/.bashrc + +# Install specific node version. This will also install npm version 6.14.14 +nvm install 14.17.4 + +# To use node in the current shell session +nvm use 14.17.4 + +#Install Gatsby CLI +npm install -g gatsby-cli@4.0.0 +``` + +#### Installing Dependencies in **Windows** + +* Remove any existing versions of node which you might have installed. + +* Head over to [nvm-windows](https://github.com/coreybutler/nvm-windows/releases) and download the latest **nvm-setup.exe** file. + +* Install **nvm-setup.exe** file and confirm the installation by running `nvm -v` in Command Prompt. + +* Now open Powershell or Command Prompt with administrator permissions, and run the following commands: + +``` +# Install specific node version. This will also install npm version 6.14.14 +nvm install 14.17.4 + +# To use the node version which you have installed +nvm use 14.17.4 + +#Install Gatsby CLI +npm install -g gatsby-cli@4.0.0 +``` + +#### Installing Dependencies in **MacOS** + +* Remove any existing versions of node which you might have installed. + +* You will need Homebrew on your MacOS. After that follow the steps given below: + +``` +# Install nvm +brew update +brew install nvm +mkdir ~/.nvm + +echo "export NVM_DIR=~/.nvm\nsource \$(brew --prefix nvm)/nvm.sh" >> .zshrc +source ~/.zshrc + +# Install specific node version. This will also install npm version 6.14.14 +nvm install 14.17.4 + +# To use the node version which you have installed +nvm use 14.17.4 + +#Install Gatsby CLI +npm install -g gatsby-cli@4.0.0 +``` + +After installing dependencies, check their versions by using these commands + +``` +# Node version: 14.17.4 +node -v + +# npm version: 6.14.14 +npm -v + +# Gatsby CLI version: 4.0.0 +gatsby --version +``` + +## Project Setup Fork the repository as your own copy `https://github.com/ /Webiu.git` @@ -20,12 +115,7 @@ Fork the repository as your own copy Clone the repository in your local system `git clone https://github.com/ /Webiu.git` -## Local Development Setup - -You will need to have Gatsby CLI installed into your system -Go to the offical Gatsby documentation and proceed further to set up the Gatsby CLI https://www.gatsbyjs.com/docs/tutorial/ - -#### Cd into the project +#### cd into the project `cd Webiu` @@ -33,6 +123,30 @@ Go to the offical Gatsby documentation and proceed further to set up the Gatsby `npm install` +#### Add `variables.sass` file + +* In `src/styles/` folder create a new file named `variables.sass`. + +Add the following contents to it and save the file: + +``` +$text-color: #242526; +$primary: #54AD28; +$light-secondary: #E6ECEE; +$secondary: #24598B; +$dark-grey: #666666; +$grey: #808080; +$light-grey: #D3D3D3; +$very-light-grey: #C9C9C9; +$red: #F24423; +$very-dark-grey: #63676A; +$xs-and-less: (min-width: 576px); +$tiny-and-less: (min-width: 768px); +$md-and-less: (min-width: 992px); +$sm: (min-width: 576px); +$sm-and-less: (max-width: 576px) +``` + #### Errors if any? Got Stuck? Don't forget to give a look to the troubleshooting guides https://www.gatsbyjs.com/docs/how-to/local-development/troubleshooting-common-errors/