Shopify's Open Source page is built with Jekyll and Sass and hosted on GitHub Pages.
All of the data comes from Jekyll. Any change in index.html (including whitespace commits - e.g.) will trigger a rebuild and update all of the numbers.
To include a repo in the list, add it to optInRepos
in javascripts/custom-repos.js
. The repo must be owned by Shopify. To include non-Shopify repos, use customRepos
. Set a defined project language or custom avatar in the same file.
- Clone this branch or download the zip and navigate to the folder in terminal
- Install Jekyll:
gem install jekyll
- Install Sass:
gem install sass
- Use
sass -v
to make sure it worked
- Use
- Install Compass:
gem install compass
- Make sure everything is setup with
bundle install
- Run
bundle exec jekyll serve
- In another terminal window, run
compass watch
- Access the page at
http://localhost:4000
bundle exec jekyll serve
will compile the Jekyll and Sass files into static assets in the _site folder each time a file is saved. That folder is excluded from the repo.compass watch
will update ie.css and main.css.- Use
rake build
to manually parse SCSS files. - Your local build will be nearly empty because:
- The page uses Jekyll's
site.github.public_repositories
object to get the repo data. This data is only available when live. - Custom repo data is generated by Github's JS API, so it will show up locally.
- The page uses Jekyll's
- The content for each project comes from the GitHub Pages for that repo.
This can be from a
gh-pages
branch, or from the/docs
directory, based on the GitHub Pages settings. Using the/docs
directory is preferred as it's less confusing for contributors.