🌑 this is the Jekyll theme used for @alternatyves portfolio site
To check the Jekyll theme minus content, go to: Theme demo
- 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)
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.
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.
-
Add, update or remove a post in the Posts collection.
-
Change the defaults when new posts are created in _posts/_defaults.md.
Read about collections in the Jekyll documentation.
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 that will replace Markdown images eg. ![description](image.jpg)
with {% picture %}
tag
It means that you no longer need to write special markup for responsive image such as {% picture image.jpg --alt alt text for image --title image title %}
, 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, otherwise you’d need to write ![description](img/image.jpg)
for the images to display.
Make sure there there is no space in image names!!!
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.
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 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.
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
.
Build with Jekyll, originally loosely based on JKL + TACHYONS, (c) 2015 @mrmrs
Thanks to GitHub for code versioning and to Netlify for deployment and content delivery.
The content of this project itself, all illustrations & design works are (c) Yves JPL Capelle / alternate outc. / SOFAM. The underlying source code used to format and display that content is licensed under the MIT license.
The MIT License (MIT)
Copyright (c) 2020-2024 @YJPL
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.