jekyll-inclusion
Jekyll blog theme
Simple and nice blog theme based on Inclusion framework.
Proudly built with Jekyll and Grunt, hosted on Github. Compatible browsers: IE8+, Firefox, Chrome, Opera, Yandex.browser, Safari
Check out quick demo of this theme
##Contents
Requirements:
Structure
There are two branches: master branch and gh-pages. Master is a main develop branch. Project based on Synteagle general project template
./
├── .editorconfig
├── Gruntfile.js
├── package.json
├── bower.json
├── README.md
├── CHANGELOG.md
├── Rakefile
├── Gemfile
├── _config.yml
├── post.sh
├──grunt/ * grunt tasks
| ├── task.js
│ └── aliases.yml
|
├── dev/ * site source
| ├── coffee/ * coffee scripts
| │ └── main/ * main scripts
| │
│ ├── images/ * image sources
| │
│ ├── jade/ * templates
| | ├── blocks/ * blocks library
| │ | └── block.jade
| │ ├── helpers/ * helper mixins
| │ ├── vendor/ * third-party code
| │ ├── layouts/ * page layouts
| │ └── pages/ * main pages templates
| │
│ ├── js/ * compiled and source js
| | ├── main/ * main site scripts
| │ ├── ie/ * ie compat scripts
| │ └── vendor/ * vendor scripts
| │
| ├── sass/ * sass preprocessor styles
| | ├── blocks/ * blocks library
| │ | └── block.sass
| │ ├── helpers/ * mixins and vars
| │ ├── vendor/ * third-party code
| │ └── screen.sass
| │
│ ├── ruby/ * jekyll plugins
| │
│ ├── helpers/ * helper files
| │
│ ├── fonts/ * font sources
| │
│ └── devtools/ * some dev tools
│
├── build/ * built source
| ├── index.html
| ├── _data/ * jekyll data (i18n, locales)
| |
| ├── _drafts/ * drafts
| |
| ├── _layouts/ * layouts for jekyll generation
| |
| ├── _plugins/ * jekyll plugins
| |
| ├── _posts/ * posts (*.md)
| |
| └── static/ * static assets
| ├── css/ * minified styles
| |
| ├── images/ * minified images
| │
| ├── js/ * minified assembled js
| |
| └── fonts/ * @font-face-ready webfonts
│
└── publ/ * generated website
├── _data/ * jekyll data (i18n, locales)
|
├── _drafts/ * drafts
|
├── _posts/ * posts (*.md)
|
└── static/ * static assets
└── images/ * post and pages images
Take a look at this article about creating dev and deploy branches for your blog.
NOTE: this example use in _config.yml use baseurl option, so after domain there is path: /jekyll-inclusion. If you want to run this example on the local machine you should comment or remove this line in _config.yml file.
Development and blogging
Editorconfig
This project contains .editorconfig file. It describes codestyle like indentation, trailing whitespaces etc. See more details here
Grunt tasks
Here comes groups of grunt tasks with some explanations
Start
grunt start - Install bower dependencies and place them to dev folders
- 'shell:bower' Install bower components
- 'bower:ie' Copy ie components to js folder
- 'bower:vendor' Copy vendor components to js folder
Dev
gulp dev - Dev task with static server
- 'coffee:main' Compile main coffescripts
- 'concat:main' Concatenate main javascripts
- 'concat:ie' Concatenate ie javascripts
- 'concat:vendor' Concatenate vendor javascripts
- 'sass' Compile Sass stylesheets
- 'jade' Compile Jade templates
- 'sync:imagesDev' Sync images
- 'sync:fontsDev' Sync fonts
- 'sync:helpersDev' Sync helpers and other assets
- 'sync:rubyDev' Sync jekyll plugins
- 'sync:mainPubl' Sync posts and pages from publ folder
- 'shell:jekyllBuild' Generate site using Jekyll.rb
- 'browserSync:dev' Run dev server with watch option
- 'watch:dev' Watch for changes and run dev task
Build
grunt build - Build task
- 'shell:jekyllBuild' Generate site using Jekyll.rb
- 'imagemin' Minify images
- 'cmq' Combine media queries in css files
- 'autoprefixer' Add vendor prefixes in css
- 'csscomb' Applie styleguide to stylesheets
- 'uglify' Minify javascript files
- 'csso' Minify stylesheets
- 'processhtml' Replace assets paths in html
- 'htmlmin' Minify html
- 'clean:dev' Remove dev things
- 'browserSync:test' Run test server without watch
Rebuild
grunt rebuild - Regenerate and build project by running all tasks
- 'coffee:main' Compile main coffescripts
- 'concat:main' Concatenate main javascripts
- 'concat:ie' Concatenate ie javascripts
- 'concat:vendor' Concatenate vendor javascripts
- 'sass' Compile Sass stylesheets
- 'jade' Compile Jade templates
- 'sync:imagesDev' Sync images
- 'sync:fontsDev' Sync fonts
- 'sync:helpersDev' Sync helpers and other assets
- 'sync:rubyDev' Sync jekyll plugins
- 'sync:mainPubl' Sync posts and pages from publ folder
- 'shell:jekyllBuild' Generate site using Jekyll.rb
- 'imagemin' Minify images
- 'cmq' Combine media queries in css files
- 'autoprefixer' Add vendor prefixes in css
- 'csscomb' Applie styleguide to stylesheets
- 'uglify' Minify javascript files
- 'csso' Minify stylesheets
- 'processhtml' Replace assets paths in html
- 'htmlmin' Minify html
- 'clean:dev' Remove dev things
Theme
grunt theme - Theme styles and scripts fixing
- 'coffee:main' Compile main coffescripts
- 'concat:main' Concatenate main javascripts
- 'concat:ie' Concatenate ie javascripts
- 'concat:vendor' Concatenate vendor javascripts
- 'sass' Compile Sass stylesheets
- 'sync:cssTheme' Sync css with Jekyll generated assets
- 'sync:jsTheme' Sync js with Jekyll generated assets
- 'browserSync:theme' Run dev server with watch option
- 'watch:theme' Watch for changes and run theme task
Template
grunt template - Theme templates fixing
- 'jade' Compile Jade templates
- 'shell:jekyllBuild' Generate site using Jekyll.rb
Publish
grunt publish - Copy posts, pages and images and generates website
- 'sync:mainPubl' Copy posts, pages and images
- 'shell:jekyllBuild' Generate site using Jekyll.rb
- 'processhtml' Replace assets paths in html
- 'htmlmin' Minify html
- 'clean:dev' Remove dev things
Deploy
grunt deploy - Deploy project by running Rakefile: git or ftp push
- 'shell:deploy' Deploy generated site to gh-pahes
Server
grunt server - Run server without watching for changes
- 'browserSync:test' Run test server without watch
Data driven nav
This theme use special data from _data/nav.yml to generate navigation. It's useful when you need to create nested menu. Also each page have menu option and if it will turn to true - this page will appear in menu.
Post creation
There is a simple bash script that allows us to create new posts. I've put it in the root of the website, so just execute it, like bash post.sh your-post-name or post.sh your-post-name and it will create new *.md file at _publ/pages/_posts with predefined draft layout from _draft directory and also it will create folder in _publ/img/posts/ with name your-post-name for your post images. It's pretty simple and useful.
Changelog
Youc can find full changelog HERE
Credits
- JADE bemto mixin
- Lazy load plugin
- Intense Image Viewer
- Prism syntax highlighter
- Detect Mobile Browsers
- Clean blog jekyll theme
- Strip.rb - strip newlines after for loop
- Tag pages generator
- Tag and Category pages pagination
- Jekyll i18n filter