1

I have a static website generated by Jekyll. I was able to get sass converter + minification and HTML minification working using Jekyll built-in features or plugins. The json files included are not minified though, how can I achieve that?

I'm using Jekyll 3.8.5. I'm hosting and serving the website with GitLab pages. As far as the sass pipeline going, it is taken care by the | scssify Liquid filter and the _config.yml setting:

sass:
  style: compressed

HTML minification is taken care by compress front-end matter in the default.html layout:

---
layout: compress
---

My problem is that I have multiple json format data which is included in my templates. For example the structured data information or the analytics parameters. The metadata.json contains my structured data:

{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": "{{ page.url | replace:'index.html','' | absolute_url }}",
  "headline": "{% if page.title %}{{ page.title | escape | strip_newlines }}{% else %}{{ site.title | escape | strip_newlines }}{% endif %}",
  "datePublished": "{% if page.date %}{{ page.date | date_to_xmlschema }}{% else %}{{ site.time | date_to_xmlschema }}{% endif %}",
  "dateModified": "{% if page.date %}{{ page.date | date_to_xmlschema }}{% else %}{{ site.time | date_to_xmlschema }}{% endif %}",
  "description": "{% if page.teaser %}{{ page.teaser | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description | strip_html | strip_newlines }}{% endif %}",
  "author": {
    "@type": "Person",
    "name": "{{ site.author | strip_newlines }}"
  },
  "publisher": {
    "@type": "Organization",
    "name": "{{ site.organization }}",
    "logo": {
      "@type": "ImageObject",
      "url": "{{ site.portrait | absolute_url }}",
      "width": "350",
      "height": "350"
    }
  },
  "image": {
    "@type": "ImageObject",
    "url": "{{ site.portrait | absolute_url }}",
    "height": "350",
    "width": "350"
  }
}

And I include this in the head.html like this:

<script type="application/ld+json">
  {% include metadata.json %}
</script>

Or this is the analytics parameter json file:

{
  "vars" : {
    "gtag_id": "{{ site.gtag }}",
    "config" : {
      "{{ site.gtag }}": { "groups": "default" }
    }
  }
}

And it is included in the template by:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {% include analytics.json %}
  </script>
</amp-analytics>

Both json files are in the _includes directory since they gonna be included. This might be important, because they don't appear as they are in the generated _site content, they are only indirectly included.

I do have jekyll-minifier plugin, and theoretically it supports json minification by default (compress_json: true), see https://github.com/digitalsparky/jekyll-minifier. I even added a configuration section to _config.yml which redundantly re-defines default settings:

jekyll-minifier:
  remove_spaces_inside_tags: true
  remove_multi_spaces: true
  remove_comments: true
  remove_intertag_spaces: true
  remove_quotes: false
  compress_css: true
  compress_javascript: true
  compress_json: true

But when I verify the content the JSON sections are not minified. I'm not a Jekyll expert, I haven't ever written a Jekyll plugin. I'm looking at https://github.com/digitalsparky/jekyll-minifier/blob/master/lib/jekyll-minifier.rb and wonder if the problem is that the output file is an HTML in that case? So maybe the jekyll-minifier modifications don't happen because these files are not outputted into _site as a json, but just indirectly included? How can I minify them still? Everything else is minified now and it's annoying that they are the only things which aren't. I'm primarily looking for a Jekyll plugin (package or custom) solution since I don't have any gulp pipeline in my build right now.

Bonus question: can I minify manifest.webmanifest somehow? It's a json file but it doesn't have the json extension due to Progressive Web App standards.

Csaba Toth
  • 10,021
  • 5
  • 75
  • 121

0 Answers0