How to add more to a head on Jekyll

Question

I have a GitHub hosted website, that is currently using a Jekyll theme, and running on HTML. The problem with this is I have to put

---
layout: default
---

Into the beginning, and that takes care of the head. But now, I can't add anything to the head, like important scripts I need to use. If anyone has experience with this, what can I do?

Answer 1

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.

Answer 2

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.