Static Site Generation with Decoupled Drupal and Hugo via JSON API

Showcases
1

I am currently working on the integration of Decoupled Drupal CMS and Hugo SSG via JSON API.

My GitLab repository is at:

I don’t think it fully supports the usage of advanced Drupal users, but it may be good enough as a starter.

Any comments or suggestions are welcome.

3 Likes
2

Its demo site is at https://drupal-umami-hugo.netlify.app/ (with Umami starter kit).

3

I like your JS solution for querying the JSON API and writing the response to files for Hugo to process. This is something I wish Hugo supported natively (afaik Hugo can only query JSON inside a template, not generate files from the results).

4

Thanks! I first tried Gatsby.js which can directly access Drupal without downloading, but finally reached this simple approach.

The downloading step is unnecessary for generation itself, but I think there are some merits to it.

  • Local editing: You can edit Hugo files locally with your favorite editor (e.g. VS code), and feed it back to Drupal via Feeds module of Drupal.
  • Incremental generation: It will be possible to download only newly modified files from Drupal and do regeneration with Hugo.

Both of them are just ideas now, and I have no implementation.

5

I updated the program for inremental downloading.

The new program stores the obtained JSON data in d2h_cache directory, and only modified data since the previous download are requested via JSON API at the second time. This reduces the number of JSON API requests dramatically.

1 Like
6

This is a very good solution to add CMS to Hugo. Love it.
Will be using it in an upcoming project.

Also, is it possible to have images and other assets downloaded automatically without have to manually copy them to Hugo ?

7

Thanks for your good comment!

Easiest way is pointing Hugo’s staticDir to Drupal’s site/default/files dir.

Note that not only image files but also other Drupal managed files will be copied to the staticDir.

1 Like
8

Thank you. Will try that.

1 Like
9

I added a shell script sync-files.sh to the GitLab repository.

1 Like
10

Awesome !
Thank you. I will utilize this for sure.

11

We renewed our university website with this technology. Drupal is used as a headless CMS, and static site is generated by Hugo.

2 Likes