In this tutorial I will teach you how to test your Jekyll Bootstrap3 site locally.
Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as “a simple, blog aware, static site generator”.
To test your site locally, you’ll need
- ruby
- Jekyll
- github-pages gem
Installing ruby
There are lots of different ways to install ruby.
In Mac OS X, older versions of ruby will already be installed. But I use the Ruby Version Manager (RVM) to have a more recent version. You could also use Homebrew.
In Windows, use RubyInstaller. (In most of this tutorial, I’ve assumed you’re using a Mac or some flavor of Unix. It’s possible that none of this was usable for Windows folks. Sorry!)
Installing the github-pages gem
Run the following command:
gem install github-pages
This will install the github-pages gem and all dependencies
(including jekyll).
Later, to update the gem, type:
gem update github-pages
Testing your site locally
To construct and test your site locally, go into the directory and type
jekyll build
This will create (or modify) a _site/ directory, containing
everything from assets/, and then the index.md and all
pages/*.md files, converted to html. (So there’ll be
_site/index.html and the various _site/pages/*.html.)
Type the following in order to “serve” the site.
This will first run build, and so it does not need to be
preceded by jekyll build.
jekyll serve
To make jekyll automatically re-build your changes you can also add the --watch option:
jekyll serve --watch
Now open your browser and go to http://localhost:4000.
Read the complete tutorial on http://jekyllrb.com/docs/usage/.
Testing images
#Code
{: .image-fluid }
IMG With description on hover
#Code
{: .image-fluid }
With floating in markdown
| In markdown you can quikly use tables to align your images in right way, remember to style as you like the CSS of your table to have a amazing results. Use to size your pics in right way for best results. |  |
#Code
| In markdown you can quikly use tables to align your images in right way, remember to style as you like the CSS of your table to have a amazing results. Use to size your pics in right way for best results. | {: .image-fluid } |
 |
I am text to the right I am text to the right I am text to the right I am text to the right |
#Code
| {: .image-fluid } | I am text to the right I am text to the right I am text to the right I am text to the right |
Video embed sample
#Code
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ikbYpAHkurs?ecver=1" frameborder="0" allowfullscreen></iframe>
</div>
