Frontmatter content gets rendered as text

#1

Hi All,

I have a very simple frontmatter on every content page

---
layout: "layout-en"
title: About
description: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate commodi animi, incidunt assumenda ea, libero corporis neque et saepe, placeat reiciendis ratione dicta. Quam error cum porro vitae laudantium voluptates.
---

It works, I mean it gets the layout and tilte as it supposed to, but it also gets rendered as text like this:

18
18819Ă—311 30.8 KB

42
42724Ă—234 18.2 KB

my Gemfile::

source 'https://rubygems.org'
gem 'middleman', '~> 4.2'
gem 'middleman-autoprefixer', '~> 2.7'
gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby, :x64_mingw]
gem 'wdm', '~> 0.1', platforms: [:mswin, :mingw, :x64_mingw]
gem 'middleman-livereload'
gem 'middleman-minify-html'
gem 'middleman-rsync'

Is there any settings for preventing that?

#2

Your frontmatter and Gemfile seem fine to me.

Two things that stick out to me, however:

  1. The indentation in your screenshot, before the first three dashes (---):
    Not sure if that’s just the screenshot, but if you do have spaces before those initial dashes, that would explain why Middleman doesn’t register that initial text as YAML Frontmatter
  2. Have you tried setting the layout without quotes? Ie. layout: layout-en — this might be a shot in the dark, but worth trying?
#3

Casper, thanks for the reply.
The screenshot is from chrome’s inspect window. The actual code doesn’t have any spaces.
meanwhile I tried it without quotation but it made no difference.

If I run middleman with a production env ( bundle exec middleman -e production ) the frontmatter works as it should be. This is my workaround for now. But I think I lost some features like scss.map

#4

I found out that this just happens when external pipeline is activated

configure :development do
  activate :external_pipeline,
    name: :gulp,
    command: "gulp serve",
    source: "",
    latency: 1
end

I concat .js and .scss files with gulp

#5

I received the solution (thanks again)

The pipeline should use content from a folder that is different that your middleman sources. Put your JS/css elsewhere and point the pipeline at it. The two outputs (middleman’s and the pipelines) will be combined automatically.

I had to change the source of the pipeline from source: "", to source: ".tmp",
and in my package.json I was missing:

"root": {
    "src:": "./source",
    "dest:": "./.tmp"
  },

now it works perfectly

1 Like