To Create your own template:
Follow the directory structure:
PROJECT_ROOT\
├── assets
│ ├── css
│ ├── fonts
│ │ └── bootstrap
│ ├── images
│ ├── js
├── _includes ➜ (Reusable HTML Elements)
├── _layouts ➜ (Template elements)
├── _pages ➜ (Pages for Static Sites)
├── _posts ➜ (Blog Posts)
├── _sass ➜ (CSS in SASS mode)
├── bootstrap
│ └── mixins
└── minima
-
For _pages to work, we need to define collections in
_config.yml
as below:
Adding this will give us neat project directory by allowing us to organise the pages inside _pages directory instead of PROJECT ROOT. One more major issue with having collections for pages, is that, it doesn’t support pagination, and github pages doesn’t support other paginate plugins, so, if you want to use pagination with collections, go for jQuery based plugins :collections: pages: output: true permalink: /:path
-
After creating the directory structure, open the following folder
/var/lib/gems/{gem-version}/gems/minima-{minima-version}
- copy the files from
_includes
toPROJECT_ROOT/_includes
- copy the files from
_layouts
toPROJECT_ROOT/_layouts
- copy the files from
_sass
toPROJECT_ROOT/_sass
- If you want social icons svg such as facebook, twitter, copy
assets/minima-social-icons.svg
toPROJECT_ROOT/assets/images/
- copy the files from
-
Next step, would be start creating our templates, by editing the files that we copied in above step.
-
Sometimes, we might need to list out files in a directory, there are many plugins available but Github Pages runs in
safe
mode, which means only defaults plugins will be allowed, otherwise github pages reports an error as unrecognized tag. This is the code sample, that I have used in this website, which is using liquid, it can be customised according to your own requirements, In Case you want to list based on extension of the file:{% raw %}{% if file.extname == ".jpg" %}{% endraw %} {% highlight liquid%} {% raw %} {% for file in site.static_files %} {% if file.path contains "/images/" %} {{file.url}} {% endif %} {% endfor %} {% endraw %} {% endhighlight %}
References :
- https://jekyllrb.com/docs/structure/
- https://jekyllrb.com/tutorials/home
- https://help.shopify.com/themes/liquid
- https://github.com/luis-almeida/jPages