kumarunster-site.github.io: A JavaScript repository from kumarunster

Here the steps to setup Jekyll with Yeoman, Bootstrap 3 with Awesome fonts.

1.) You need ruby > 1.9. with several gems. Install newest from from PPA:

than you need NodeJs with NPM and several Node-Modules (Grunt, Bower, Yeoman generators)

{% highlight console %} sudo apt-add-repository ppa:brightbox/ruby-ng sudo apt-get update sudo apt-get install ruby1.9.1 ruby1.9.1-dev rubygems1.9.1 sudo gem install bundler sudo apt-get install nodejs nodejs-dev npm sudo npm install -g yo sudo npm install -g generator-jekyllrb {% endhighlight %}

Create folder in that you set up you new site

{% highlight console %} mkdir jekyll-with-yo cd jekyll-with-yo yo jekyllrb {% endhighlight %}

after answering of diverse questions test the site

{% highlight console %} grunt server {% endhighlight %}

broweser opens on http://localhost:9000 and presents the site.

Download bootstrap 3 and font awesome

{% highlight console %} bower install bootstrap-sass#3.0.0 --save bower install font-awesome --save {% endhighlight %}

change the setup

change the _scss/main.scss:

{% highlight css %} @import "../_bower_components/bootstrap-sass/lib/bootstrap";

$FontAwesomePath: "/_bower_components/font-awesome/font"; @import "../_bower_components/font-awesome/scss/font-awesome";

{% endhighlight %}

change the _lyout/default.html

{% highlight html %}

<!doctype html>

    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="/css/main.css">
    <!-- endbuild -->

<!--[if lt IE 9]>
  <script src="bower_components/es5-shim/es5-shim.js"></script>
  <script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->

<!-- Add your site or application content here -->

  <nav class="navbar navbar-inverse" role="navigation">

Toggle navigation Home

Submit

<div class="container" ng-view="">
    
    {{ content }}
  
</div>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

   ga('create', 'UA-XXXXX-X');
   ga('send', 'pageview');
</script>

<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>

    <!-- build:js scripts/plugins.js -->
    <script src="bower_components/bootstrap-sass/js/affix.js"></script>
    <script src="bower_components/bootstrap-sass/js/alert.js"></script>
    <script src="bower_components/bootstrap-sass/js/dropdown.js"></script>
    <script src="bower_components/bootstrap-sass/js/tooltip.js"></script>
    <script src="bower_components/bootstrap-sass/js/modal.js"></script>
    <script src="bower_components/bootstrap-sass/js/transition.js"></script>
    <script src="bower_components/bootstrap-sass/js/button.js"></script>
    <script src="bower_components/bootstrap-sass/js/popover.js"></script>
    <script src="bower_components/bootstrap-sass/js/typeahead.js"></script>
    <script src="bower_components/bootstrap-sass/js/carousel.js"></script>
    <script src="bower_components/bootstrap-sass/js/scrollspy.js"></script>
    <script src="bower_components/bootstrap-sass/js/collapse.js"></script>
    <script src="bower_components/bootstrap-sass/js/tab.js"></script>
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <!-- endbuild -->

{% endhighlight %}

kumarunster/kumarunster-site.github.io