Dynamic yaml

[kro]

Hi ! Extended question with context bellow.

TLDR :

I would like to process an yml file with hugo, but for now putting an yml file in /content, I end up with the same yml file in /public. With its front matter and all…

Full context :

I use NetlifyCMS to provide my customers with an admin panel.

This admin panel is provided by 2 static files : /admin/index.html and /index/config.yml.

I use two different versions of config.yml depending on environment : dev (local) or prod (gitlab pages). The only part changing is the backend: part at the begining of the file.

Thus I would like Hugo to process this config file and probably create a specific layout for the conditional part (netlifyCMS backend). The rest of the yaml content would sit directly in the /content/admin/config.yml file (this way no need to escape anything I guess…)

My big problem is it seems I can’t find a way for hugo to process my yml file. I get the exact same in the public folder with its front matter and all !

Then I’m not sure either yet on how to get the good layout (the file not being processed, I can’t test anything yet). Maybe something like /layouts/index.yml.yml ? (from what I could find in the doc concerning different file types and outputs)

My yml file / layout (I mix both for the general idea) would be something like :

---
---
{{ $url := .Permalink }}
{{ $u := urls.Parse $url }}
{{ $u.Hostname }}
{{ if eq $u.Hostname "localhost" }}
# local server ( run : npx netlify-cms-proxy-server )
backend:
 name: local
local_backend: true
{{ else }}
backend:
  name: gitlab
  repo: crachecode/unko
  branch: main
  auth_type: pkce
  app_id: 58a63e233ad656842e923955eabe574736bcc45ad13a48e71f1cc8a7f31760cf
{{ end }}

{{ .Content :
media_folder: assets/img
public_folder: /img

collections:
  - name: 'pages'
    label: 'Pages'
    folder: 'content'

etc.

I hope I am clear. Thanks for any help !

[regis]

What you’re trying to achieve is possible but requires many step to go through.

Have you declared your custom output format? Custom output formats | Hugo

the yaml format is not built-in, you’ll have to add it to your config and then make sure to choose application/yaml as a media type.

Then, if you have added to your configuration that the homepage uses this output format, you can create your layout at /layouts/index.yaml.yml

Your config should look something like that: https://github.com/theNewDynamic/hugo-module-tnd-netlifycms/blob/main/config.yaml

Also, this module could be useful to you but, like NetlifyCMS, it’s no longer maintained.

[nternetinspired]

Seems like a very complicated setup. I place both .config.yaml and the index file in static/admin and that’s it. It just works. I don’t understand why you would need the admin panel to be different on your dev environment.

Why even use an admin panel on your local? I don’t get it. You can just edit the files directly…

[kro]

Generating an yml file dynamically should not be that complicated…

I have already explained the situation : I work on netlifyCMS, I create plugins, stuff like that. And I definitely don’t use the same exact config file locally and on gitlab (it’s called a backend). Hence my message. Not everyone have the same needs !

[kro]

Thanks for your message.

Sorry I forgot to mention, because I thought YML was already included in hugo latest versions.

I have already added things related to yml in my hugo’s config.yml with no success yet :

# baseURL: http://example.org/
relativeURLs: true
title: unko
timeZone: Europe/Zurich
buildFuture : true
markup:
  goldmark:
    renderer:
      unsafe: true
mediaTypes:
  application/yaml:
    suffixes:
    - yml
    - yaml
outputFormats:
  yaml:
    baseName: yaml
    isPlainText: true
    mediaType: application/yaml
outputs:
  yaml:
  - yml

(I still end up with the original yml file in my output, without any process)

(I will have a look at the module you linked asap)

[regis]

This outputs key looks weird. If you’re using index.yaml.yml your output should be set on the homepage:

outputs:
  home:
  - html
  - yaml

See: Custom output formats | Hugo

You can also set it on the content file itself through front matter.

[kro]

at the moment this is what my setup looks like :

.
├── config.yml
├── content
│   └── admin
│       └── config.yml
├── layouts
│   └── index.yaml.yml
└── static
    └── admin
        └── index.html

Hugo’s ./config.yml :

[...]
mediaTypes:
  application/yaml:
    suffixes:
    - yml
    - yaml
outputFormats:
  yaml:
    baseName: yaml
    isPlainText: true
    mediaType: application/yaml
outputs:
  home:
  - html
  - yaml

./content/admin/config.yml :

---
---

media_folder: assets/img
public_folder: /img

collections:
[...]

./layouts/index.yaml.yml :

{{ $url := .Permalink }}
{{ $u := urls.Parse $url }}

{{ if eq $u.Hostname "localhost" }}
# local server ( run : npx netlify-cms-proxy-server )
backend:
 name: local
local_backend: true
{{ else }}
backend:
  name: gitlab
  repo: crachecode/unko
  branch: main
  auth_type: pkce
{{ end }}

{{ .Content }}

Still no success :
./public/admin/config.yml

---
---

media_folder: assets/img
public_folder: /img

collections:
[...]

(exact same as ./content/admin/config.yml)

I’m giving a go to your module ! (unless anyone find my error)

[regis]

@kro

./content/admin/config.yml

Hugo is not treating this as a page for it’s not a mardkown file. For Hugo, this is just a file, so no template is applied, it is merely copied over as is to /public.

Now try and use the md extension for it be to be processed as a page and applied a template etc…
But be aware that your current yaml output format template is for the homepage alone (index.yaml.yml), for it to be applied to a page you should rename it to single.yaml.yml and move it to the layouts/_default folder.

Also, remove the following from your project configuration file:

outputs:
  home:
  - html
  - yaml

And add this to the frontmatter of your content/admin/config.md

outputs:
- yaml

[kro]

a HUGE thank you !

Thanks to your help I finally got it working perfectly.

If it can be useful to anyone here is what it looks like :

.
├── config.yml
├── content
│   └── admin.html
├── layouts
│   └── _default
│       └── single.yaml.yml
└── static
    └── admin
        └── index.html

Hugo’s ./config.yml :

[...]
mediaTypes:
  application/yaml:
    suffixes:
    - yml
    - yaml
outputFormats:
  yaml:
    baseName: config
    mediaType: application/yaml

./content/admin.html (html extension avoid the processing of the content) :

---
outputs:
- yaml
---

media_folder: assets/img
public_folder: /img

collections:
[...]

./layouts/index.yaml.yml :

{{ $env := os.Getenv "HUGO_ENV" }}
{{ if eq $env  "DEV" }}
# local server ( run : npx decap-server )
backend:
 name: local
local_backend: true
{{ else }}
backend:
  name: gitlab
  repo: crachecode/unko
  branch: main
  auth_type: pkce
{{ end }}
{{ .Content }}

I end up with my 2 files : ./public/admin/config.yml (processed) and ./public/admin/index.html.