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}

    1. copy the files from _includes to PROJECT_ROOT/_includes
    2. copy the files from _layouts to PROJECT_ROOT/_layouts
    3. copy the files from _sass to PROJECT_ROOT/_sass
    4. If you want social icons svg such as facebook, twitter, copy assets/minima-social-icons.svg to PROJECT_ROOT/assets/images/
  • 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 %}