An open-source portfolio theme for Jekyll.
alternate 2K20 is the Jekyll theme used for @alternatyves portfolio site (which you are browsing now).
- Image index start page
- jekyll-archives to build and sort through categories & tags pages
- RSS/Atom feed
- Jekyll Picture Tag plugin setup
- SEO tags
- Microdata markup
- Gulp.js + Browsersync for fast development
- Built-in site search (does not work with GitHub Pages)
Download the theme at: https://github.com/YJPL/alternate/
alternate was designed as a portfolio theme for alternatyves, but you can use this theme to start a regular Jekyll blog and tweak it any way you like.
Getting started with Jekyll + alternate
- Install Jekyll
- Add your site and author details in
- Get a workflow going to see your site’s output with Jekyll locally using Jekyll commands or Gulp.
Supply was built with Jekyll version 4.0.0, and should support newer versions as well.
Install the dependencies with Bundler:
$ bundle install
jekyll commands through Bundler to ensure you’re using the right versions:
$ bundle exec jekyll serve
Add your custom configuration in the
Exposed as a data file to give clients better access Set in the Data / Navigation section, look for
_includes to add your footer links.
- Add, update or remove a post in the Posts collection.
- Change the defaults when new posts are created in
Read about collections in the Jekyll documentation.
Find more templates, themes and Jekyll tutorials at Jekyll’s official site.
Building front-end assets: styles and scripts
Install Node module dependencies:
You can change the site styling using Tachyons, look for the CSS in the
sup-theme file, located in the
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 with gulp. Make sure to install gulp 4:
npm install --global gulp-cli. (If you have an earlier version of Gulp JS, make sure to remove it by running npm uninstall –global gulp). Then run
npm install --save-dev gulp@4 to install it into your project development dependencies.
Once that is done, to build your site & concatenate your CSS (in
CSS), simply run:
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.
to optimize images from “Illustrations” folder into “img”, which is the production folder. Since you only need to run this once, you should remove pictures from the “Illustrations” folder before you add the next batch.
For a portfolio, this aspect is important. Resized images are served by the jekyll-picture-tag plugin to
The site also use a custom ruby plugin, see
img_tag_transform.rb located in
_plugins that will replace Markdown images markup with the picture tag.
It means that you no longer need to write special markup for responsive image, and that, should you stop using the picture tag plugin, the site images would not break (assuming you keep the little
img_tag_transform.rb ruby plugin in place. Read more about this here.
Make sure to leave no space in image names!
You are welcome to use and contribute to alternate on GitHub