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
- SEO tags
- Microdata markup
- Jekyll
livereload+ NPM 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
Install Jekyll
git clone git://github.com/YJPL/alternate.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
see https://github.com/YJPL/alternate/blob/master/README.md#responsive-images
Notes
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.
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
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/alt-tachyons.css.
to minify your css you can run
npm run minify-css
or
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.
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.
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
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.
Open-source
You are welcome to use and contribute to alternate on GitHub