A minimalist boilerplate to get you started on a new Jekyll project quickly.
After working on a few Jekyll projects, I got tired of setting everything up from scratch every time, including setting up Bootstrap, cleaning up the default Jekyll stuff, and configuring Grunt. So I decided to create BoilerPack as my own Jekyll starter kit.
BoilerPack comes pre-configured with the following tools so you can hit the ground running:
- Bootstrap 3 (Sass port)
- Font Awesome (loaded from CDN)
It also has the following features right out of the box:
- Static navbar
- Sticky footer
- Old-browser warning notification
- Site-wide custom notification
- Dynamic go-to-top button
Run the following commands (replace
myproject with your actual project name):
mkdir myproject cd myproject git clone https://github.com/mariordev/jekyll-boilerpack.git . npm update
_source/sass/*.scss. All you have to do is:
Now you can serve the site with:
In your browser, go to
localhost:4000 and you should get the default index.html page.
npm update and
grunt, you'll have the following folder structure:
_includes _layouts _posts _source js sass assets css js node_modules
This folder contains your typical Jekyll includes. I've provided some files to support the default layout, navbar, footer, and custom notifications.
The _layouts folder includes the default layout plus simple page and post layouts.
The default _posts folder for you to store your blog posts.
sass folders into
This is the folder where Grunt will save the output of the pre-process and post-process operations.
This is where all your dependencies are installed when you run
You can add your main custom styles to
All sass files in this folder are imported together by
_source/sass/main.scss. Bootstrap sass files, which are located inside
node_modules are loaded here as well.
After the Grunt tasks run, the end result is a single
main.css file, which is loaded by
Please check out the heading comments on each
.scss file for usage details.
If you want to add things like Google Analytics code and similar stuff, the
This is also where jQuery, Bootstrap js, and custom js files are loaded.
There are three types of notifications included by default: "old-browser", "no-script", and "site-wide" notifications. These notifications are loaded and displayed as needed by the default layout.
Displayed automatically if the browser is IE and it's older than version 9, just in case! You may edit the text for this notification in
Displayed automatically when the variable
notification is set in
_config.yml. This is useful when you need to display some kind of global notification or warning to your users on every page.
I hope this is useful to you as it's been to me. Let me know if you have any questions or comments. I'm @mariordev on the Twittersphere. Have a great day!