A static website showcasing the Draw My Life initiative, partnerships and team
This website lives and is rendered on the client side. To get up and running with the development of this project there are a few prerequisites, i.e. you need to have node and Ruby installed on your local machine.
Ruby is required for Jekyll and Node will help you massively with all the javascript (see Tech Stack for more details).
React | Jekyll |
---|---|
Webpack | Yarn |
As mentioned in the Development setup intro there are some prerequisites required before you can begin work on the project.
{ installation instructions to go here }
Yarn is a javascript package management for all dependencies. It will be used to add and remove all javascript dependencies from this project.
- You'll need to have Yarn installed globally on your local machine. This can be installed via homebrew
- To install all the dependencies for this project you will need to
yarn install
on the command line - To add a dependency
yarn add {dependency}
on the command line. - If it's a development dependency add the flag
--dev
. Exampleyarn add {dependency} --dev
to save to thepackage.json
- If it's a production dependency add the flag
--save
. Exampleyarn add {dependency} --save
to save to thepackage.json
React and Webpack are dependencies and will be installed during the installation of all javascript dependencies, i.e. yarn install
It's probably best to have two terminal tabs open, as you will need to build and transpile your React components; and then Jekyll will serve it to your local host.
To build and transpile the React Components you will need to run the command yarn run build
in your command line. To build these whenever any files are edited, run the command yarn run watch
.
To build and serve the entire project so you can see local changes you will need to run the command jekyll serve
in the command line and visit http://localhost:4000
to see the changes.
To ensure we have less error prone code we are using two linting dependencies to highlight any errors as we code: eslint
and sass-lint
. It is recommended that you also get a local linters for your IDE or text editor.
Example of Linters
Atom | Sublime | |
---|---|---|
ESLint | Atom ESLint | {I need to find one 😂} |
SASS-Lint | linter-sass-lint | {See above} |
This site is hosted on GitHub Pages, the live site reflects anything in the gh-pages
branch. To deploy the latest changes in public live:
// Update your local version of master with origin
git checkout master
git fetch
git reset --hard origin/master
// Push only the public folder to the gh-pages branch
git subtree push --prefix public origin gh-pages