HEY THERE! Thanks for contributing. This project has moved to the hackforla/website repo, though many of the existing issues here are still relevant so feel free to pitch in and make pull requests to that repo.
If you haven't yet, you'll need to install node and npm. Once those are installed, open up Terminal and navigate to the project root directory.
$ cd ~/{{your local path here}}
Install the project dependencies. You only need to do this the first time you are setting up the project.
$ npm install
Once project dependencies are installed, run:
$ gulp
This will build the project. All compiled files are now available in the /dist directory.
For local development you can run the project locally by doing:
$ gulp serve
A browser window pointed to http://localhost:3001 will open with BrowserSync active. This allows for live reloading of the page as assets (CSS, JS, images) are updated and is useful for synchronous browser testing.
This is more for active development though as not all assets will be fully optimized. To run a full build task and then serve the site locally, you can do:
$ gulp serve:dist
Which will run a local server at http://localhost:3002/ served from the /dist directory.
The site is continuously deployed by Netlify. Whenever a commit is made to the master branch of this repository, Netlify runs the build comman (gulp) and deploys the contents of /dist to its servers.
A very simple CMS is available for making site changes built on NetlifyCMS.
To make site changes, log in to https://www.hackforla.org/admin. You will need to authenticate via Github, and will need write access to this repository.
Content changes are written to a Markdown file that are then committed directly to master, which Netlify will then compile, build, and deploy. Since there is a build process involved, changes won't display instantly but will take a couple minutes.
This project is largely based on the Web Starter Kit, with some modification to the gulp workflow to add in svg and pug rendering.
Source files for the site's CSS are located in the /app/styles directory. The SCSS files are processed, concatenated, and minfied by the gulp styles task.
Bourbon (v4.3.3) is used as a light SCSS mixin library, and browser prefixing is included as a post-processor by the gulp styles task.
JavaScript is written in ES6 syntax and Babel is used to translate this into ES5 for browser compatibililty. Furthermore, it is minified all by the gulp scripts task. JS is pretty light for this project so it's all contained in /app/scripts/main.js.
SVGs are minified and concatenated into a single sprite file by the gulp svg-sprites task. SVGs only need to be added to the /app/images/_svg-sprite directory. The rendered svg sprite is then included inline via the gulp html task.
HTML is rendered using pug templates via the gulp html task. The bulk of the markup for these templates is located in /app/_layouts and /app/_mixins.
An .editorconfig file is included to enforce some style settings for code editors that support it. See editorconfig.com for more information. Furthermore, an eslint task enforces JavaScript style rules, based on Google's standards.