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.ymlas 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
_includestoPROJECT_ROOT/_includes - copy the files from
_layoutstoPROJECT_ROOT/_layouts - copy the files from
_sasstoPROJECT_ROOT/_sass - If you want social icons svg such as facebook, twitter, copy
assets/minima-social-icons.svgtoPROJECT_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
safemode, 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