A free and open-source Jekyll theme for IT blog & portfolio.
⚠️Please note that this theme is NOT supported by GitHub pages. You need to generate your static site and push it to to your repository Github. 6i-Jekyll-Theme provides command to publish site on Github easily.
With Gem based themes, directories such as the assets, _layouts, _includes, and _sass are stored in the theme’s gem, hidden from your immediate view. Yet all of the necessary directories will be read and processed during Jekyll’s build process. This allows for easier installation and updating as you don't have to manage any of the theme files.
To install :
gem "6i-jekyll"
bundle install
_config.yml
with : theme: 6i-jekyll
yarn install
. This dependencies are described in package.json
, and install in node_modules
folder.To update :
bundle update
.To write a new post/page and serve it locally :
yarn dev:jekyll
to start a localy server and Jekyll compilation with watch mode._posts
or a new page. Jekyllhttp://localhost:4000
.To publish changement in Github Page
git init
, and don't forget to add the default remote Github repository git. By convention, it's called origin. git remote add origin https://github.com/user/yout-depot.git
. Change git url with yours.yarn publish
You also can fork this project, or directly copying all of the them files into your project, except for the node_modules
directory. To deals with Webpack assets you must install dependencies for front-end and development tools in Node.js ecosystem with : yarn install
. See bellow chapter : For development.
To set up your environment to develop this theme,
bundle install
.yarn install
. This dependencies are described in package.json
, and install in node_modules
folder.yarn dev
to start in parallel localy server, Jekyll & Webpack compilation.Theme is setup just like a normal Jekyll site, so to test it you wan use native Jekyll command bundle exec jekyll serve
, and open manually your browser at http://localhost:4000
. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal. But all assets are handling with Webpack. So we also need to launch in another terminal compilation in Webpack with watch mode by using : webpack --mode development --watch
.
It's boring to launch many commands to do it. We recommend to use only yarn dev
. One command to rule them all !
When your theme is released, only the files in _layouts
, _includes
, _sass
and assets
tracked with Git will be bundled. To add a custom directory to your theme-gem, please edit the regexp in 6i.gemspec
accordingly.
Finally to push gem
gem build 6i-jekyll.gemspec
gem push 6i-jekyll-x.y.z.gem=
6i-Jekyll-theme
├── _data # Custom data inject in Liquid template system
| ├── build.json # Generated by webpack. Give metadatas when its built.
| └── webpackstats.json # Generated by webpack. List of all assets paths with hash.
├── _includes # Theme liquid elements and functions
├── _layouts # Theme layouts
├── _drafts # Drafts are posts, not published yet
├── _posts # Blog
├── _projects # IT projects portfolio
├── _site # Jekyll output, i.e. static website
├── _webpack # Webpack content
| ├── fonts # Theme web fonts (*.ttf)
| ├── images # Theme images source
| ├── js # Theme javascript
| ├── scss # Theme styles (scss)
| └── static # Theme static files
| ├── .no-jekyll # To bypass Jekyll processing on Github Pages
| └── favicon.ico # Default favicon theme
├── assets # Theme assets
| ├── build # Webpack output
| └── images # Theme images preprocessed
├── doc # Documentation of 6i-Jekyll, built with itself
├── node_modules # Installed Node.js dependencies
├── pages # Theme pages
| ├── 404.html # Not found page
| ├── contact.html # Contact form
| ├── notes.html # Blog to show post pages
| ├── projects.html # Portfolio page for IT projects
| └── tags.html # List all tags in webiste with related pages
├── test # To test locally this theme
├── .gitignore # sample configuration
├── _config.yml # Sample Jekyll configuration
├── Gemfile
├── package.json # Node.js front & tools dependencies
├── postcss.config.js # Configuration for PostCSS (autoprefixer, precss...)
├── webpack.config.js # Configuration for Webpack
└── index.html # Home page
In order to make contribution, development and deployment of a Jekyll web site easier, we provide console commands built in Node.js ecosystem wit Yarn. You can see its in scripts
property of package.json
file.
Bug reports, comments, pull-request & Github stars are always welcome !
Copyright (c) 2018 by v20100v.
The theme is available as open source under the terms of the MIT License.