How to add script tag in jekyll?

Question

Jekyll is a simple, blog-aware, static site generator for personal, project, how do i add a script tag in such ruby project.

My index.html looks like this :

---
layout: default
---

<div class="home">

  <h1 class="page-heading">Posts</h1>

  <ul class="post-list">
    {% for post in site.posts %}
      <li>
        <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>

        <h2>
          <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
        </h2>
      </li>
    {% endfor %}
  </ul>

  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>

</div>

the folder structure also consists of files and folders like this : about.md _config.yml css feed.xml _includes index.html _layouts _posts _sass _site

i am trying to explore the jekyll platform for static web pages.

Solution

Step 1: Make the Script file.

Create the script (.js) file as normal.

You might want to save in an appropriate folder, for example:

../assets/js/some-script.js

You may need to make the /assets/ folder if you do not have it.

Don't use underscore (_) at the front of the folder name and Jekyll will then simply copy that folder and contents into the build at `_site' as a static asset.

Step 2: Call / reference the script in your html.

Then just call it as you want it, like:

...<script src="{{ base.url | prepend: site.url }}/assets/some-script.js"></script>....

If you want the script available on every page, put the call in your default.html layout file. Every page that uses that default.html layout will then call the script. That layout file can be found at _layouts/default.html.

If you just want it on your current page, just call it in your some-page.md markdown in the same way.

If you only want to call it when it is live and DON'T want to call it while you are developing - like, for example, a google analytics script - then wrap the call in an if statement like this:

{% if site.environment == "production" %}<script src="//localhost:35729/livereload.js"></script>{% endif %}

Hope this helps.

Comments

[Timo]

If I put a script tag in a md file I get in the md file: <script src=assets/about.js></script> So the tag is parsed as a string.

[umbersar]

If you want the script available on every page, then instead of calling it in _layouts/default.html as suggested above, call it instead in _includes/scripts.html file which is a placeholder for calling various scripts.