alternate

An open-source portfolio theme for Jekyll.

Download alternate
Image credit:  alternate, a portfolio theme for Kekyll
alternatyves
Art Direction, Story, Design
Updated · 2 min read

An open-source portfolio theme for Jekyll.

alternate 2K20 is the Jekyll theme used for @alternatyves portfolio site (which you are browsing now).

Features

Download

Download the theme at: https://github.com/YJPL/alternate/

Download 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

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 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

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.

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 your footer links.

Editing

Posts

Collections

Read about collections in the Jekyll documentation.


Find more templates, themes and Jekyll tutorials at Jekyll’s official site.

Develop

Building front-end assets: styles and scripts

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 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 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.

Optimize Images

run

gulp images

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.

Responsive images

For a portfolio, this aspect is important. Resized images are served by the jekyll-picture-tag plugin to _site/images/generated

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!

Open-source

Get alternate

You are welcome to use and contribute to alternate on GitHub

chevronLeft icon Previous post

Supply

Next post chevronRight icon

Text-based systems