When you built a blog from Jekyll, a beautiful, mobile-responsive theme passed as well. However, if you want to utilize a third party web front framework like Bootstrap, the built-in CSS file became potential sources of CSS conflict and delayed page loading. Starting a Jekyll blog from blank theme seems daunting, but, with the help of Bootstrap, the process becomes agreeable and enjoyable.
Before starting our next awesome blog, let’s see a sample Jekyll project and build a blueprint in mind.
Most of the process building a blank Jekyll site is filling our own template files. They are default.html, post.html, and page.html, which are all in _layouts folder. Besides, you also need to edit index.html and don’t forget _config.yml.
default.html is the root of our template; all other templates inherit from it. Therefore, let’s start from here.
Here we keep a simple structure and delegate our HTML tags to other files. You may just put everything here if you prefer.
Let’s see our head.html file.
Then comes header.html. The template will make navigation bar. Simply follow standard Bootstrap navbar example here.
Next comes footer.html. You may refer this example and design your own footer. Here we use nested Bootstrap grids for layout.
Now we finished our default.html. Let’s re-use it in post.html and page.html. First comes post.html.
Here comes page.html.
Don’t forget index.html. You may design your impressive index page here.
The final step is writing down your own configuration file. Just follow the example and customize it to fit your own need.
Then, write some posts test your blog. With the help of Bootstrap, we built a clean and responsive blog merely in steps. You may try some Bootstrap themes for eye-candy.