Moving to Hugo (and Bulma) from a page builder (Jimdo)

support
1

Dear all, how would one best organize content and layout when moving to Hugo from a pagebuilder site (like Jimdo in my case), where all pages consist of many different content blocks in different layouts on a page?

We want to move our website from Jimdo to Hugo to make it bilingual and to add a blog. The site has 7 rich-content pages today; each page has its unique layout consisting of a number of individual content “blocks” underneath each other. These blocks all have a completely different layout, as it’s typical for a page builder.: e.g.

  • revolving slider
  • text with image to the left
  • twocolumn text with button
  • four-image-gallery
  • text with image to the right
  • fullwidth image
  • Newsletter signup form with image

But as we begin to understand Hugo, Hugo seems best-suited for websites where all pages have the same layout and have only one content element that’s then served from the page’s .MD file.

In contrast, in the typical pagebuilder case, each page has its own unique layout and many content elements embedded in the layout. So, the MD files’ out-of-the-box structure — frontmatter plus content — seems unsuitable when we’d need to maintain several content elements per page that are separated by layout structures like images, columns, blocks etc.

So, the concern is not the layout itself — this will be well manageable using Bulma and SCSS — but how to organize several different content blocks per page using Hugo in a way that’s not too confusing for the editors. E.g. it would be good to have all files for one page in one place, rather than having each page scattered over multiple folders for multiple MD files and multiple layout/partial files.

If this sounds too theoretical, please take a quick look at https://www.brandes.org and be so kind to suggest the most advisable way to organize such a pagebuilder layout and content in Hugo. Thank you!

Edit: Our current best guess how to build our pagebuilder-style pages with Hugo would be to have one .MD file per page where every content element is a Markdown String in a frontmatter parameter that’s being mounted (with markdownify) into Bulma’s flexbox HTML elements in the page’s layout file. Would you think this is advisable?

2

Using frontmatter is one way as you already guessed.

Another is using headless bundles in one or more sections. Then retrieve these sections and list them on another page.

3

The nice fellas at Forestry.io built a blocking system for Hugo (and Jekyll) that it’s pretty much what you need, I think. Take a look: https://forestry.io/blog/3-tips-for-mastering-blocks/

4

Thank you @frjo and @sjardim for your kind swift responses!

@frjo, what do you mean with ‘retrieve’? Do I understand correctly that you suggest to have one ‘headless bundle’ per web page (like https://…/contact/) as a Hugo ‘section’ (like /content/contact/), and then have Hugo concatenate the “content snippets” inside the section with a list page? If yes, how would one, in this scenario, have individual layouts per content block? I’m afraid we’d end up with many individual files across multiple subfolders for each page, making it hard for occasional users to add new content. Am I misunderstanding something? Can you maybe point to a github repository where such a structure is implemented?

@sjardim, Forestry CMS sounds like a very user friendly alternative. We’ve so far deployed using Netlify. In order to re-build a page like our https://www.brandes.org as a bilingual site with a future blog, how would you compare netlify CMS with forestry CMS?

5

I’ve used Forestry in the past and it was very good, but my only experience is as a solo developer/designer, so no client was involved and I can’t say how easy it is for non-technical folks, but they will probably be fine. :slight_smile:

Never used Netlify CMS yet so can’t comment. and just to clarify, Forestry does not host the files so you can keep hosting on Netlify.