An open-source portfolio theme for Jekyll.

Download alternate
Image credit:  alternate, a portfolio theme for Kekyll
Art Direction, Story, Design
Updated · 3 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).



Download the theme at:

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

Install Jekyll

git clone git://
cd alternate
(npm install tachyons)
npm start

That should do the trick. Add your site and author details in _config.yml. Get a workflow going to see your site’s output with Jekyll locally using Jekyll commands or Gulp.

Then open another tab in terminal and run

bundle exec jekyll serve --watch

This will build the site.

This sets up a Jekyll server for dev on port 4000. The site is regenerated every time you save a file. NOTE: Changing _config.yml will require a restart of the Jekyll server to see changes.

To restart server, go to terminal tab that server is running in then press

ctrl+C ⇧ enter then

To fire Jekyll with auto-regeneration, use:

npm run start

This runs a series of tasks: minifies CSS, images and Javascript.

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

Responsive images



Blog posts are in alternate/_posts/ There are three layouts, one for posts, one for other pages, and one for long form articles. Layouts are stored in alternate/_layouts/ Folders that begin with an underscore are not copied over to _site. The home page has its own layout (root index.html file). Drafts are used for development & testing purpose.


Building front-end assets: styles and scripts

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

Once you are done with your style changes, run:

Run the npm run


That will process all your CSS files in one readable file located in assets/css/alt-tachyons.css.

to minify your css you can run

npm run minify-css


npm run start

to minify and build the site locally.

npm commands with browser reload

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.




Read about collections in the Jekyll documentation.

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


Get alternate

You are welcome to use and contribute to alternate on GitHub

chevronLeft icon Previous post


Next post chevronRight icon

Text-based systems