Here's a look at how to style your site with Bootstrap along with the tight integration available in GitHub, where you can host a Jekyll site for free.



Bootstrap joins the party

The basic interface created and presented by Jekyll is nice, but it can be greatly enhanced with one of the many freely available frameworks. I like Bootstrap, so I will use it to enhance my site presentation. The Jekyll-Bootstrap project makes this as easy as setting up Jekyll, so you can have a Bootstrap-themed site up in a relatively short time. It includes all necessary Bootstrap as well as Jekyll components, and there are some themes you can use or create your own.

The first step with taking advantage of the Jekyll-Bootstrap project is cloning its git repository. Once cloned locally, you may run it just like a basic Jekyll installation. The following commands show how this may be accomplished (just substitute your local directory information):

git clone https://github.com/plusjade/jekyll-bootstrap.git [local directory path] cd [local directory path] jekyll serve




In addition, you may use this site for the basis for your GitHub Pages site. You simply push the Jekyll-Bootstrap code to your GitHub repository as we did previously:

git remote set-url origin git@github.com:USERNAME/USERNAME.github.io.git git push origin master




This assumes an empty repository, so you may need to pull the site down first and then push changes -- there are a number of ways to accomplish it. If you prefer point-and-click instead of the command line, the GitHub GUI interface is a nice solution to working with your repositories.

While Jekyll is simple and straightforward to use, its template engine (Liquid) seems to have a bit of a learning curve. I mention it only because it is what the Jekyll-Bootstrap project uses to fully incorporate Bootstrap into Jekyll's ecosystem. A quick look at the directory structure after Jekyll-Bootstrap is installed shows a number of new directories and files. For example, there is a directory called _theme_packages as well as a themes directory under the assets directory. Once the site is generated (via Jekyll command), the themes directory is in the assets directory within the _site directory where the generated site file files are stored. You can learn more about directory structure and building custom themes online.

Thanks: Techrepublic