Automatically generate pages from JSON data file

support
1

I would like to move a client off WordPress and onto Hugo. They are a publisher of a magazine and the new site will contain an archive of their past publications (section index listing all magazines and a single page for a given magazine detail view).

Typically I’d create the section index and single page views which would reference frontmatter. Pages would then be created from markdown files. Frontmatter in these md files would include meta data for each magazine (i.e publication date, external URL to view e-edition, magazine thumbnail from external CDN, list of contents etc).

The above is all doable within Hugo, however the client has a catalogue of over 100 magazines and manually entering each one is going to very time consuming. Fortunately I have access to each magazine and its meta data as JSON.

This question has been asked in 2016, so I’m hoping there may be a solution now or in the pipeline.

Here’s my question:

Can I get Hugo to parse this JSON data file and for each entry create a new page using my single page HTML view / layout (which in turn references the data in this JSON file)?

Many thanks

2

This is not currently possible. It’s on the roadmap though.

1 Like
3

A middle ground might be both markdown content and data: create a content file for each magazine using whichever title for the slug you want, and key the data from there. I’d probably using date as well.

4

Thanks for the replies, good to know it’s something that may come to Hugo in the future.

I think the mention of a compromise is a good idea and something I was considering. If I was to create md files for each magazine with a frontmatter field for id, could I then retrieve that data from the JSON file in the layout HTML view?

Here’s some example JSON data, we’ll call it sitedata.

“data":[
        {
            "0":{
                "alt":"Picture of a computer",
                "url":"img.cloudimages.us/2012/06/02/computer.jpg"
            },
            "1":{
                "alt":"Picture of a cpu",
                "url":"img.cloudimages.us/2012/06/02/mycpu.png"
            }
        }
    ]

Now say in the md file the front matter for id was “1”, could I then dynamically reference the data in the JSON file using this id key as per below when building my HTML layout view?

Note, not sure how I would include the frontmatter id key in this snippet as it’s dynamic, so I’ve just written id.

<img src=“{{.Site.Data.Magdata.id.url}}” alt=“{{.Site.Data.Magdata.id.alt}}”/>

5

All is revealed: https://gohugo.io/templates/data-templates/

6

If the above suggestions don’t work for you, I would write some Node.JS to process your JSON into a collection of folders/md files.

7

It might be worth checking out this thread.

8

Please follow latest development at https://github.com/gohugoio/hugo/issues/5074 “Build pages from data source”

9

Hey,
I wrote a simple tool that solves this problem (using a JS-wrapper): kidsil/hugo-data-to-pages.

Would definitely appreciate some feedback.

1 Like