Anyone integrated Hugo and Prismic?


#1

I’m looking for some kinda of tutorial or guide on where to start. I’ve searched high and low and nowhere offers a good how to guide so I thought first place to ask would be the HUGO community.


#3

Are you set on using Prismic? I know others have had success with Foresty


#4

Not set on it, but I’ve used prismic before on a react client side project, so I know its intricacies.

If you can share a forestry tutorial then I’ll take it :slight_smile:


#5

#6

I’ve not used Prismic but I have used Contentful with Hugo on a couple projects. My understanding is they are both API based so the concepts should be the same, although the exact script you need to write will depend on how the Prismic API differs.

You basically need to create a bit of code that generates .md files for Hugo from the Prismic API and then after that is done you can run the hugo CLI command like normal.

There’s a million ways to do this and it will ultimately depend on what your deployment stack looks like. However, I personally think writing a Node.js script to consume the API and using NPM to manage the build commands is the easiest way to handle it.

For example one of my project’s package.json looks like this:
image

node contentful.js pulls from the Contentful API and generates .md files and then hugo rebuilds the site as you probably know.

I use Netlify for deployment on this project so it consumes webhooks from Contentful and I just set the build command to “npm start” which will run the commands “prestart”, “start”, and “poststart” in that order.

Hopefully this helps you. Using node.js is mostly the same as regular JS with the addition of some features like the Node File Systems Module, which you will be using to generate the markdown files.

Something like this

let fileContent = 'data from API goes here formatted for HUGO markdown files'
let fileName = 'my-filename'
let path = '/path-to-file/'

fs.writeFile(`./content/${path}/${fileName}.md`, fileContent, (error) => {/* handle error here*/})

Obviously you’ll have to loop over this for every node of content in the Prismic API

However if the idea of generating files from a rest API sounds too daunting for you then I would recommend you look into a git based CMS like Forestry or NetlifyCMS instead of an API based CMS. It does add a layer of complexity that you’ll have to maintain especially if Prismic makes changes to their API, but it’s not too bad IMHO.

If you’re still curious in alternatives you could also look at Gatsby.js since you mentioned react. It’s another static site generator that uses react and it actually has a source plugin for Prismic. However it’s build time is much slower than Hugo’s so if your site is going to have a lot of pages and be update frequently I wouldn’t recommend it.