The challenge!

So, here is one of those challenges, a lightweight project in which (due to budget and/or content restrains) the best option is a static site. Plot twist, it needs a way to edit the content without having to change a single line of code. Drupal or Wordpress being over the top in this case, we started work on an alternative to get this done.

We went fishing...

We found Netlify CMS, an open-source React app with a simple YAML config. It’s quite easy to install, and its editorial workflow goes through a Github repository that holds all the site’s code. It doesn’t use a database, the content is updated directly in the repo through Git commands, e.g.: when saving a draft, the CMS actually commits the changes to a new branch, and opens a pull request.

Once we found this amazing tool, we benchmarked the best fit for it in terms of a static site generator (SSG) and we ended up with Hugo. Written in GO, quite flexible and fast, it is not only a great match for Netlify CMS, but its template system was already familiar, based on simple html markup.

...and we fished out a Besugo.

So we came up with Besugo, born from the combination of those two, a forked framework from Hugo with Netlify CMS integrated, as the result of our research, the full essence of an SSG with a CMS. The name Besugo is a word play on Hugo, coming from the common portuguese name for a fish species red seabream.

Each project is unique and has different goals. Besugo lets us work with as many different content types as the project requires; whether it’s news articles, blog posts, profiles, or just simple About and FAQ pages, Besugo is up to the task.

Because Netlify CMS is a React app, it lets us create our own custom React components for live previewing content as we edit it. With a little magic from our in-house Javascript nerd, we’re using those very same components to also render the content pages themselves after Hugo’s built them. (With server-side rendering done during the build process as a bonus, so that the fully built markup is delivered to the browser! Yay!) With all that, at every point during content creation and edition, you can see exactly how it will look like in the final pages.

Future editors, unfamiliar with any sort of programming, also have their lives made much easier, since they don’t need to worry about any code at all. A Hugo layout can fit any number of entries for that content type. This really lets you focus on your site’s message; in the end that message is always what matters most.

A hard rock fish!

Now, you might ask, isn’t it contradictory, having an SSG with a CMS? Why not go with a full-featured CMS platform in the first place? It all comes down to the practical application within the project. By taking full advantage of the speed and ease of installation and use, Besugo, a simple static site generator, stands as a solid framework for a quick response, while allowing for a highly versatile content management through its CMS that can be turned on at any moment. It supports i18n and responsive images, among other ready-to-use features, which only further solidify it as one of our go-to tools for new projects.

Oh, did we mention that every part of Besugo works seamlessly with Netlify’s own CDN hosting platform, with every change in code and content being published live immediately? :-)

This blog post was originally published at MarzeeLabs blog.