# Automatically generate pages from JSON data file

**URL:** <https://discourse.gohugo.io/t/automatically-generate-pages-from-json-data-file/13494>\
**Category:** support\
**Created:** [August 10, 2018, 9:48am UTC](https://discourse.gohugo.io/t/automatically-generate-pages-from-json-data-file/13494 "2018-08-10T09:48:24Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![BinaryJim](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/binaryjim/32/6704_2.png) [@BinaryJim](https://discourse.gohugo.io/u/BinaryJim)\
**Post date:** [August 10, 2018, 9:48am UTC](https://discourse.gohugo.io/t/automatically-generate-pages-from-json-data-file/13494/1 "2018-08-10T09:48:24Z")

</div>

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.

> **[Generate page from json rather than md](https://discourse.gohugo.io/t/generate-page-from-json-rather-than-md/3314)**
>
> Im not looking for dynamic content but for generating new static pages from json files rather than from md. I can place the json files in data/ and access elements in the template from site.data just fine… but how do I get hugo to create a new page?

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

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [August 10, 2018, 9:56am UTC](https://discourse.gohugo.io/t/automatically-generate-pages-from-json-data-file/13494/2 "2018-08-10T09:56:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maiki](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maiki/32/16384_2.png) [@maiki](https://discourse.gohugo.io/u/maiki)\
**Post date:** [August 10, 2018, 4:43pm UTC](https://discourse.gohugo.io/t/automatically-generate-pages-from-json-data-file/13494/3 "2018-08-10T16:43:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BinaryJim](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/binaryjim/32/6704_2.png) [@BinaryJim](https://discourse.gohugo.io/u/BinaryJim)\
**Post date:** [August 10, 2018, 8:36pm UTC](https://discourse.gohugo.io/t/automatically-generate-pages-from-json-data-file/13494/4 "2018-08-10T20:36:29Z")

</div>

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}}”/>`

---

<div class="post-metadata">

**Author:** ![maiki](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maiki/32/16384_2.png) [@maiki](https://discourse.gohugo.io/u/maiki)\
**Post date:** [August 11, 2018, 1:40am UTC](https://discourse.gohugo.io/t/automatically-generate-pages-from-json-data-file/13494/5 "2018-08-11T01:40:21Z")

</div>

All is revealed: [https://gohugo.io/templates/data-templates/](https://gohugo.io/templates/data-templates/)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/totallyinformation/32/5668_2.png) [@TotallyInformation](https://discourse.gohugo.io/u/TotallyInformation)\
**Post date:** [August 17, 2018, 8:05pm UTC](https://discourse.gohugo.io/t/automatically-generate-pages-from-json-data-file/13494/6 "2018-08-17T20:05:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeremyzilar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jeremyzilar/32/3423_2.png) [@jeremyzilar](https://discourse.gohugo.io/u/jeremyzilar)\
**Post date:** [August 17, 2018, 9:48pm UTC](https://discourse.gohugo.io/t/automatically-generate-pages-from-json-data-file/13494/7 "2018-08-17T21:48:16Z")

</div>

It might be worth checking out this thread.

> [@How to enable JSON endpoints for all tags or all categories](https://discourse.gohugo.io/t/how-to-enable-json-endpoints-for-all-tags-or-all-categories/13671):
>
> We have two taxonomies on [digital.gov](http://digital.gov): tag | [https://digital.gov/tag/](https://digital.gov/tag/) categories | [https://digital.gov/categories/](https://digital.gov/categories/) The data for these are stored here: [https://github.com/GSA/digitalgov.gov/tree/master/data](https://github.com/GSA/digitalgov.gov/tree/master/data) What is the best way to build or enable JSON endpoints for all tags or all categories on a HUGO site? I can’t tell if I am naming the template files wrong not understanding the path where they’d be visible not configuring them in the config.yml correctly Any thoughts?

---

<div class="post-metadata">

**Author:** ![anthonyfok](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/anthonyfok/32/106_2.png) [@anthonyfok](https://discourse.gohugo.io/u/anthonyfok)\
**Post date:** [January 23, 2019, 5:50am UTC](https://discourse.gohugo.io/t/automatically-generate-pages-from-json-data-file/13494/8 "2019-01-23T05:50:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![azdev](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/azdev/32/9120_2.png) [@azdev](https://discourse.gohugo.io/u/azdev)\
**Post date:** [July 18, 2019, 8:44pm UTC](https://discourse.gohugo.io/t/automatically-generate-pages-from-json-data-file/13494/9 "2019-07-18T20:44:38Z")

</div>

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

Would definitely appreciate some feedback.

---

<div class="post-metadata">

**Author:** ![maiki](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maiki/32/16384_2.png) [@maiki](https://discourse.gohugo.io/u/maiki)\
**Post date:** [July 19, 2019, 4:34pm UTC](https://discourse.gohugo.io/t/automatically-generate-pages-from-json-data-file/13494/10 "2019-07-19T16:34:02Z")

</div>