An open-source portfolio theme for Jekyll.
alternate 2K20 is the Jekyll theme used for @alternatyves portfolio site (which you are browsing now).
Features
- Image index start page
- Blog
- 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
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
Setup
- Install Jekyll
- 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.
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 footer.html
in _includes
to add your footer links.
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
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
You are welcome to use and contribute to alternate on GitHub