Portfolio

The main aim of this project was to find a best way to capture my work and present it to the internet. I have created a custom theme for Jekyll. Later on I introduced Gulp.js, because certain funcationality, important to me, is still missing in Jekyll for ex. live browser refresh, vendor autoprefix, javascript minification, image optimisation, better handling of sass and more advanced watch tasks.

Contents

• Getting started
• Windows
• MacOS
  • Updating installed tools
  • Clean install
    • Git
    • Jekyll
    • Gulp.js
• Workflow
• Extra
• Author
• Ownership

Getting started

The instructions below cover Windows 10 and MacOS 10.15, and later versions.

Windows

1. Install RubyInstaller
2. Run gem jekyll install bundler
3. Install Node.js
4. Run npm i
5. Run npm i -g gulp-cli

MacOS

Updating installed tools

If you have already installed GCC, Git, Node.js and Gulp.js I would recommend checking for updates and installing all available updates.

• GCC: Download all available updates for Xcode in App Store
• Git: The easiest way to update Git is to download the latest version from the official website
• Node.js and Gulp.js can be updated by running npm update -g

If any of these tools are missing I would strongly recommend to do a clean install.

Clean install

It is recommended to follow the order of instructions to prevent possible errors.

Git

1. Install Homebrew. Select to install command line tools.
2. Install Git brew install git

Jekyll

1. Install rbenv brew install rbenv
2. Make rbenv run everytime terminal is open echo 'eval "$(rbenv init -)"' >> ~/.zshrc
3. Restart terminal for the previous shell command to work.
4. Install Ruby with rbenv rbenv install 3.1.2
5. Switch from system Ruby to rbenv rbenv global 3.1.2
6. Install Jekyll: gem install jekyll
7. Update all system gems: gem update --system

Gulp.js

1. Install Node Version Manager.
2. Install Node: nvm install node
3. Install all dependencies npm i
4. Link Gulp npm link gulp

Workflow

Here is what happens when you type gulp in terminal:

1. Gulp takes files from _assets directory (don't rename this directory) applies all the specified Gulp tasks, creates assets directory and copies optimized assets into this directory.

2. When all assets are built Gulp triggers jekyll build and Jekyll grabs everything from assets directory and copies to _site/assets directory.

3. When Jekyll is built, Gulp executes a watch task and tracks changes (yes, even _config.yml) and applies them straight away with live browser reloading.

To push all changes to master and _site contents to gh-pages branches, package.json has a handy script called deploy. You can call it by npm run deploy.

For more information look into the contents of gulpfile.js and package.json.

Extra

• If anyone is using Visual Studio Code I would recommend installing a SASS syntax indentation and highlighting extension.
• If you decide to create your own project based on my, and host it on Github Pages, you might face issues with relative links. To solve this you need to do two changes one in _config.yml and second in gulpfile.js. In _config.yml you need to change:

baseurl: /YOUR_GITHUB_REPOSITORY_NAME
url: YOUR_GITHUB_USERNAME.github.io

In gulpfile.js you'll need to create tasks Jekyll separate for local development and Github Pages like so:

gulp.task('build:jekyll:dev', function(callback) {
     var shellCommand = 'jekyll build --incremental --baseurl "" ';
    
     return gulp.src('')
         .pipe(run(shellCommand))
         .on('error', gutil.log);

     callback();
 });

gulp.task('build:jekyll:prod', function(callback) {
    var shellCommand = 'jekyll build --incremental';
    
    return gulp.src('')
        .pipe(run(shellCommand))
        .on('error', gutil.log);

    callback();
});

Calling build:jekyll:dev will rewrite the _config.yml baseurl and keep relative links intact.

Author

Aleksandr Ljamin

• https://github.com/alexljamin

Ownership

Bits and pieces of code are used from the following awesome projects:

• Poole Hyde built by Mark Otto. Open sourced under the MIT license.
• Forty Jekyll theme built by Andrew Banchich based on Forty HTML5 theme by HTML5UP. Under Creative Commons Attribution 3.0 Unported.
• Inspiration on CSS transitions from Riley Carroll.
• Jekyll and Gulp integration is based on the post by Anne Tomasevich.