2018 04 01 own github page

To setup Github:

  • Login to your Github and create a new public repository with your Github Username.github.io
  • Goto repository settings and enable the repository for rendering github pages.

To Integrate Bootstrap:

  • Jekyll is used by Github Pages and it has it's own default minima theme.
  • Jekyll supports only Sass, but bootstrap is using Less.
  • If you want to customize themes based on bootstrap, then follow the below steps:

    • Download the sass bootstrap file from the following url SASS BOOTSTRAP.
    • Download the main bootstrap file from the following url BOOTSTRAP.

Install Jekyll:

  • Install Ruby
  • Install Ruby-Dev
  • Install Ruby Bundler
  • Install Jekyll - gem install jekyll

Create a new Jekyll project and start integrating Bootstrap:

  • To create a new project clone the repository from Github.
  • Now cd into the project folder and type jekyll new.
  • Basic Jekyll setup will be created.
  • Now Extract the original bootstrap and copy the following contents from them into the project folder:

    • {Boostrap Extracted folder}/dist/js/bootstrap.min.js to {Current Project}/assets/js
    • {Boostrap Extracted folder}/dist/js/bootstrap.min.js.map to {Current Project}/assets/js
    • {Boostrap Extracted folder}/assets/fonts to {Current Project}/assets/fonts
  • Download Jquery latest and Jquery Migrate to {Current Project}/assets/js
  • Now create a new folder css in {Current Project}/assets.
  • Create a new file named style.scss and include the following content:

    ---
    ---
        
    @import "bootstrap";
    
  • Create a folder named _includes and create a html file to include in all your templates. In that HTML file access your bootstrap css and js files using {site.baseurl}/assets/js/{jsfile.js} and {site.baseurl}/assets/css/style.css.