Supply is designed to sell products through Gumroad, but you can also use the theme to start a regular Jekyll blog.
_config.yml
.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
Add your custom configuration in the _config
file.
Exposed as a data file to give clients better access
Set in the Data / Navigation section, look for navigation.yml
in _data
.
Look for footer.html
in _includes
to add and change your footer links.
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 documentation for customizing your map(s).
If you have products on Gumroad, you can start right away by adding your product pages. Within the Supply theme you’ll find sample of product page with free products, located in _pages
.
Install Node module dependencies:
npm install
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
Once you are done with your style changes, run:
Run the npm run
build:css
That will process all your CSS files in one readable file located in assets/css/sup-tachyons.css
.
to minify your css you can run
npm run minify-css
or
npm run start
to minify and build the site locally.
Supply uses a couple of custom Postcss npm scripts. Make sure your dependencies are installed: npm install
. Type npm outdated
to see if you have outdated versions, then install any outdated dependencies.
Once that is done, to build your site & concatenate your CSS (in assets
-> CSS
), simply run:
npm run start
This command builds the site locally on port 4000, you can quickly revise design changes thanks to livereload
.
_posts/_defaults.md
.You can find products samples in the _products
collection folder. By design all the products are on display on the home page.
You can manually create pages to sort the template collection by custom variable.
You can also add Gumroad overlay for products or templates in posts thanks to an include.
Write something like:
<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" %}
to get a product display like this:
Don’t forget to customize your Gumroad button text in your post of product page front matter. For instance, the front matter of this post reads like this:
---
title: Theme setup
layout: post
description_markdown: >-
Start your site using Jekyll + Gumroad with the Supply theme.
date: 2020-04-16 12:48:59 +0100
categories: [Jekyll, tutorial]
text-button: I demand Supply!
---
You can of course design your own “buy me” button instead of the Gumroad overlay icon