Hugo + Directus


#1

I am wondering whether anyone managed to make Hugo work somehow with Directus.

In theory my approach would be:

  1. set up directus (check)
  2. fetch data from directus api that creates the content/post/*.md files. (this one I have 0 clue)
  3. build the site with Hugo (check)

Anyone managed to crack this?


#2

It would be good if you could provide a link/description to what Directus is. You assume too much.


#3

Totally right. Sorry about that.

From that docs:

What is Directus?

Open-Source Headless CMS & Content Delivery API

Directus Core is a free and open-source self-hosted platform
published under the GNU (v3) license. It provides a simple and intuitive
web interface for managing database content with completely custom
architectures.

It is like contentful or prose.io, etc.

Directus website


#4

Nope. I haven’t tried it. But thanks for the tip, I will try Directus if it doesn’t need too many dependencies.

Edit
Directus seems similar to Cockpit CMS.

Check this out: https://discuss.gohugo.io/t/web-based-editor-with-cockpit/6688

It is a web based editor for Hugo that works with Cockpit CMS I haven’t checked it out but since this is for Hugo I guess that it’s more suitable.


#5

Thanks. This solution looks pretty awesome.

However, what I was planning to do was to create a github repo for my Hugo site and host it from Netlify. Then use any headless CMS to edit content (also someone who has no clue about markdown and frontmatter can edit the content.) after save with a webhook I wanted to trigger Netlify to rebuild my site from the git repo through JSON data.

(BTW netlify has a pretty awesome CMS that works well with Hugo but I would like to create more users and roles.

As I said thanks though.

Edit:

Maybe my question shall be asked this way. How to generate PAGES from JSON data?


#6

I’ve looked at Directus in the past. Seems like it still has a way to go. I really like that Cockpit solution, but haven’t tried it yet. Though I don’t think the core Cockpit is all that actively maintained.

Just throw another one out there: DatoCMS is a headless CMS that will build Hugo pages. It seems to work well and the editor interface is quite good. It’s not open source (though I’ve heard they’re considering it, not sure how true that is). https://www.datocms.com/


#7

Hugo supports JSON frontmatter and there is a way to use JSON in data templates.

See here for more: https://hugodocs.info/tags/json/

Also there are topics about this in the forum. Just search for it. If you don’t find what you need, you probably need to open another thread as this question might be overlooked in here.


#8

Sure. Thank you all for the answers.


#9

I have created a short node.js script that fetches content from an API and creates the *.md files with frontmatter.

Install:
npm install tomlify fs request to-markdown

`

    var fs = require('fs'); //to access filewrite
    var toMarkdown = require ('to-markdown'); //to convert HTML to Markdown
    var request = require("request"); //to request the JSON file from the server
    var tomlify = require('tomlify'); //to add the frontmatter

//Request options
var options = {
   method: 'GET',
   json: true,
   url: 'YOUR_API_URL',
   /* headers:  
       {   'cache-control': 'no-cache',
           'x-apikey': 'YOUR_API_KEY' } 
  }; optional */

//Request
request(options, function (error, response, body) {
    if (error) throw new Error(error);
    
    var obj = body; //The actual JSON from the API
    console.log("Start converting API to files");

   //Split up the JSON response
    for (var i=0; i<obj.length; i++) {

        var toFrontmatter = obj[i]; 
        var htmlstring = obj[i].content; //The content that goes into the Markdown part
        var markdowntext = toMarkdown(htmlstring); //The HTML conversion
        delete toFrontmatter['_id']; //Deleting the stuff that I do not need to put into the frontmatter
        delete toFrontmatter['content'];   //Deleting the stuff that I do not need to put into the frontmatter
        var obj2 = tomlify(toFrontmatter, {delims: true}); //Creating the frontmatter
        obj2 = obj2 +"\n" + markdowntext; //Putting it all togeter
        var file = obj[i].slug+'.md'; //I have set up a slug as the file name in my CMS
        fs.writeFile(file, obj2, function (err) {  //writing it out to the filesystem
             if (err) {
                 console.error(err);
             } else {
                 console.log("Done converting API", obj2); 
             }
        });
     }
  });`

#10

You might also take a look at http://forestry.io


#11

This is brilliant !
How do you use it “in production”?

If I have other people creating content on Directus (through its API) I could crontab:

  • this script to create .md files
  • then rebuild the static site calling Hugo

Right?


#12

Indeed that was my thinking too. Production ready? I use it frequently. Never had an issue. However, I use it with contentful at the moment.


#13

If you don’t mind me asking
ÂżWhere do you host and run this script & Hugo?


#14

I use netlify.
I use their Victor-Hugo template. My code lives on bitbucket. Then when someone edits the content on the headless cms (directus, contentful, etc.) through a webhooks i trigger a deploy on netlify.


#15

@mazli84 I have the exact same question as you in this right instant !! You made my day literally. I see you use “Victor-Hugo” instead of “Hugo”, why is that ? Is it necessary to get the workflow to work ?

Finally, I don’t really understand one thing: your node.js code is hosted standalone in some server (OVH, Digital Ocean, OpenShift, Heroku…) that will receive a webhook from your headless CMS ? or is it something hosted right in the “Victor-Hugo” code ?

Wouldn’t it be possible to have a pre-build task that could handle the transformation or something similar ?

THANKS for the clue + code anyway !!