Skip to content

Quick Supply Setup

Jump to bottom
YJPL edited this page Jun 22, 2020 · 5 revisions

Supply, a Jekyll theme

Supply is an e-commerce template for Jekyll + Gumroad, designed with Tachyons CSS by alternatyves. If you are a Gumroad creator, you can use Supply with Jekyll to display products within your site or blog.

Supply Code on GitHub

Demo Site with documentation

Templates Supply

Find more templates, themes, and Jekyll tutorials.

Features

Setup

  1. Install Jekyll
  2. Add your site and author details in _config.yml.
  3. Get a workflow going to see your site's output with Jekyll locally.

Supply was built with Jekyll version 4.0.0 and should support newer versions as well.

Install the dependencies with Bundler:

$ bundle install

Run Jekyll commands through Bundler to ensure you're using the right versions:

$ bundle exec jekyll serve

Config

Add your custom configuration in the _config file.

Navigation

  • Exposed as a data file to give clients better access
  • Set in the Data / Navigation section, look for navigation.yml in _data.

Footer

Look for default.html in _layouts to add your footer links.

Contact Page

To add you formcarry endpoint URL to _config.yml, you'll need a fromcarry account, please refer to formcarry documentation

Add your map coordinates if you want to display a map. Please refer to the jekyll-leaflet plugin and [Leaflet](https://leafletjs.co m) documentation for customizing your map(s).

Product Pages

If you have products on Gumroad, you can start adding product pages right away. Within the Supply theme, you'll find a sample of a product page with free products, free-products.html, located in _pages.

Develop

Building front-end assets: styles and scripts

  1. Install Node module dependencies:
npm install

Tachyons

You can change the site styling using Tachyons, look for the CSS in the sup-theme file, located in the src folder.

Tachyons is a CSS toolkit and design system based on using components. Please refer to Tachyons documentation, you can also start with https://github.com/dwyl/learn-tachyons

Gulp commands with browser reload

Supply uses a couple of custom Gulp.js commands. To build your site concatenate your CSS (in assets -> CSS), simply run:

gulp build

in Terminal.

Then use

gulp watch

This command builds the site locally on port 3000, with Browsersync so you can quickly revise design changes.

Preview your site with browser reload at localhost:3000 Use the address localhost:3001 for additional features like grid preview, CSS highlighting, and more during development.

Editing

Posts

  • Add, update, or remove a post in the Posts collection.
  • Change the defaults when new posts are created in _posts/_defaults.md.

Collections

To display products, Supply uses a collection called product You will find a series of product samples in the _products collection folder. By design, all the products are on display on the home page, in Supply, that is ìndex.html. You can manually create pages based on this index to sort your products or any other collection by custom variable.

You can also add your products in regular posts, using the Gumroad overlay, embed, and hyperlinks method, thanks to an include snippet.

Write something like:

{% raw %}<a href="https://gum.co/supply class="no-underline pv2 grow db"><img class="w-100" src="/images/screenshot.png"></a>

{% include gumroad-overlay.html id="supply" %}{% endraw %}

to get a product display with an overlay link to your Gumroad product

Open-source

Get Supply

Please use and contribute to Supply on GitHub

Clone this wiki locally