Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 

Table of Content

This is a two-parts article. There are few sections here.

Part One: Offline Template Examples
  • Get Bootstrap Source Code
  • Generate dist (js + css)
  • Open The Offline Examples
  • What's Next
Part Two: Install Jekyll on RVM
  • Install Ruby with RVM
  • Install Jekyll with Bundle
  • Run the site on localhost
  • Conclusion


Preface

Time to embrace the CLI webtools

You can install the boostrap v4.1 source code site on your localhost.

The bootstrap v4.1 utilize jekyll bundle. This can be achieved using RVM (Ruby Version Manager). RVM run on user space locally, and it won’t affect your system. That means it is distro-agnostic.

The Jekyll here run inside bundle. This bundle lock the jekyll version, along with all of its dependencies. That means any bundle can run anywhere without version conflict. Very useful, while deploying, or moving from one machine to another.

Why Another Tutorial ?

The step in this guidance is almost the same with the officials site below.

I need to keep the screenshot so I can help people. For each step, I can give screenshot. So the people get the idea, of what to expect, when issuing command on terminal shell.

Issue

Here, we install RVM using userwide.

Do not install sitewide. Running apt install rvm would create issue later on.

Step

  • Install Ruby with RVM

  • Install Jekyll with Bundle

  • Run the site on localhost


Install Ruby with RVM

These are the steps summary:

$ gpg --keyserver hkp://keys.gnupg.net --recv-keys \
  409B6B1796C275462A1703113804BB82D39DC0E3 \
  7D2BAF1CF37B13E2069D6956105BD0E739499BDB

$ \curl -sSL https://get.rvm.io | bash -s stable

$ source ~/.rvm/scripts/rvm

$ rvm list known

$ rvm install 2.4

$ rvm —default use 2.4.4

$ ruby -v

$ which ruby

GPG

$ gpg --keyserver hkp://keys.gnupg.net --recv-keys \
  409B6B1796C275462A1703113804BB82D39DC0E3 \
  7D2BAF1CF37B13E2069D6956105BD0E739499BDB

You may consider, clicking the image for wider figure.

RVM: GPG Keys

Get RVM

$ \curl -sSL https://get.rvm.io | bash -s stable

RVM: Get RVM

List Known Ruby

$ source ~/.rvm/scripts/rvm

$ rvm list known

RVM: List Known

We can see some Ruby version, such as 2.4.

Install Ruby

Consider install Ruby 2.4.

$ rvm install 2.4

You may consider, clicking the image for bigger resolution.

RVM: Install Ruby

Set Default Ruby

$ source ~/.rvm/scripts/rvm

$ rvm —default use 2.4.4

$ ruby -v

$ which ruby

RVM: Default Ruby

Set Environment

Set yor path environment such as in .bashrc or .zshrc. You may use any text editor, e.g. gedit, geany, nano, or ViM. Add these two lines:

export PATH=${PATH}:~/.rvm/gems/ruby-2.4.4/bin/
source ~/.rvm/scripts/rvm

RVM: bashrc zshrc


Install Jekyll with Bundle

These are the steps summary:

$ gem install bundler

$ cd bootstrap-4.1.3

$ bundle install

$ bundle exec jekyll serve

Gem Install Bundler

$ gem install bundler

Gem: gem install bundler

Gemfile Bundle Install

There is a file named Gemfile in extracted bootstrap directory. It is an ruby bundle configuration. Jekyll it requires a ruby bundle.

source 'https://rubygems.org'

group :development, :test do
  gem 'jekyll', '~> 3.8.3'
  gem 'jekyll-redirect-from', '~> 0.14.0'
  gem 'jekyll-sitemap', '~> 1.2.0'
  gem 'jekyll-toc', '~> 0.6.0'
end
$ cd bootstrap-4.1.3

$ bundle install

You may consider, clicking the image for longer message.

Gem: Gemfile bundle install


Run The Site on Localhost

There is a file named _config.yml in extracted bootstrap directory. It is a Jekyll configuration.

# Dependencies
markdown:       kramdown
highlighter:    rouge

kramdown:
  auto_ids:     true

...

Bundle Exec

Run the Jekyll, this will read the _config.yml.

Instead of

$ jekyll serve

Run the Jekyll inside bundle.

$ bundle exec jekyll serve

Gem: bundle exec jekyll serve

Open in Your Browser

localhost:9001

Bootstrap: index on localhost:9001


What’s Next

There are however, other material such as making custom themes, but let us now limit the scope here, and lt them in other article series.

For now, consider go back to [ Part One ].

Conclusion

It just works.

Thank you for reading.