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.