Our new-look website, currently viewable at https://www.makersacademy.com.
Here at Makers Academy we believe in practising what we preach - which means both open-sourcing code wherever possible and writing code that we're proud to showcase to the world. We wanted our new website to be open so people can both see the principles that drive our code, and as a learning tool for students and graduates alike.
- Clone the repo
- Run
bundle
to install gems - Run
npm install
to install node packages - Create a .env file - you can copy the .env.example file provided as an example to get you started
- Start the server with
middleman s
- Go to http://localhost:4567 to view the site in your browser
- You'll need to run Ruby tests using
bundle exec rspec
rather than justrspec
- JS is tested using jasmine_node - run
npm test
to run them
- Make sure you have submitted a pull request and had it approved following our contributing guidelines
- Check how it looks on the staging site -
you can deploy to staging using the command
rake publish:staging
- Merge the pull request into master
- Once our CI server has passed the tests, it will automatically deploy to Github Pages by using the
rake publish
command provided by the Middleman GitHub pages extension. This builds a Middleman site and pushes the built repo onto a gh-pages branch.
- Ruby as our server side language
- JavaScript/jQuery for client side scripts
- Middleman for compiling our code into a static website we can host on GitHub pages
- RSpec for testing
- Bower for installing shared assets
- Sass to help write our CSS
- Bourbon/Neat/Bitters as a framework for our CSS
- Typekit for typefaces
Our images are stored on the makers assets GitHub repo - we've split them out to a seperate repository to keep the size of this repository down. All assets from that repository can be accessed from https://assets.makersacademy.com.
When adding a new image, add it to the images directory of the makers assets GitHub repo, and make sure that the image has been compressed using image optim and are good quality images that fit the look and feel of the site.
We use Bower to share our assets across the various Makers Academy websites. If
you need to update the assets here so a newer version can be made available to
our other sites, just run rake publish:bower
, and enter a semantic versioning
number.
The latest SASS changes will be compiled into CSS and a new version of the styles will be published to Bower.
We use semantic versioning when creating new releases using tags, this allows Bower to keep track of our code.
Make sure that when releasing a new version of the site that you want bower to pick up you run rake publish:bower
with the new version number to ensure that the bower.json file has the correct version
Look at tracking.js
to see how to enable Segment.io tracking for websites that use makers_styles
bower package.
- Use Fridge raiders example as a form that works and copy over and adapt. Put this code on top of a form.
%form.trackable-form{action: "/"name of your page"/success.html.haml”}
- Include Javascript tag at the bottom:
= javascript_include_tag "track-form/save-for-later-submit"
-
Create submit page
source/"name of your page"/success.html.haml”
-
On success page put your copy and include this code, editing the details inside of the submitFormDataToAnalytics function
=javascript_include_tag "track-form/submit-to-analytics"
:javascript
function submitFormDataToAnalytics (formData) {
analytics.alias(formData.email);
analytics.identify(formData.email, formData)
analytics.track("Submitted "Name of form" form")
}
Look at tracking.js
to see how to enable Segment.io tracking for websites that use makers_styles
bower package.