How to add more to a head on Jekyll

I found a solution to this on Jessica Reel's blog.

To your default.html layout, in your head (or better yet at the end of your body, unless your scripts need to be in the head), add something like this:

  {% if page.custom_js %}
    {% for js_file in page.custom_js %}
      <script type="text/javascript" src="{{ site.baseurl }}/assets/js/{{ js_file }}.js"></script>
    {% endfor %}
  {% endif %}

Then in your page's front-matter, add:

custom_js:
- example-js-file-1
- example-js-file-2

Exact same principle works great for CSS, too.

I ended up taking it a step further with my own website since I use nested layouts. Jekyll 3 so has a separate variable namespace for layout variables, so in the head of my main layout I specify first the layout's custom css then the page's custom css:

{% if layout.custom_css %}
  {% for stylesheet in layout.custom_css %}
  <link rel="stylesheet" href="/assets/css/{{ stylesheet }}.css">
  {% endfor %}
{% endif %}
{% if page.custom_css %}
  {% for stylesheet in page.custom_css %}
  <link rel="stylesheet" href="/assets/css/{{ stylesheet }}.css">
  {% endfor %}
{% endif %}

So you can see that it applies the custom css from the layout's front matter, then the custom css from the specific page's front matter, so that stuff cascades properly from general to specific styles.

If you are using a Jekyll theme by GitHub, you can populate the following file with the desired headers:

_includes/head-custom.html

Because this (AFAIK) overrides the theme-provided file, I recommend using the theme's own file as a starting point. In the cayman theme, for example, it looks like this (link, CC0):

<!-- start custom head snippets, customize with your own _includes/head-custom.html file -->

<!-- Setup Google Analytics -->
{% include head-custom-google-analytics.html %}

<!-- You can set your favicon here -->
<!-- link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}" -->

<!-- end custom head snippets -->

Please note that I only tested this for the cayman and architect themes.

https://jekyllrb.com/docs/layouts/#usage

The first step is to put the template source code in default.html.

Create the following file _layouts/default.html

And then you can put whatever you want inside and customize the head, for example:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <nav>
      <a href="/">Home</a>
      <a href="/blog/">Blog</a>
    </nav>
    <h1>{{ page.title }}</h1>
    <section>
      {{ content }}
    </section>
    <footer>
      &copy; to me
    </footer>
  </body>
</html>

Jekyll view can be divided into two main parts on is layout and second is content. Layouts are stored in _layouts folders, you can add your own layout there, you can even use other layouts to create a new one check here.

For each layout, you need to {{ content }}, this is the place where your page content will be added finally.

you can also add some more information in your content to access on the layout. Added info

And get it on the main/layout page. Get info