Gentics Mesh Hugo Guide

Intro

In this guide you will learn how to use Gentics Mesh in combination with Hugo.

The site we are building is very basic and only consists of three different views which form a vehicle inventory.

Hugo Site

The welcome page contains just a basic intro text and navigation. The category overview pages display lists entries of the category. The last page is the vehicle detail page which shows detailed information about the selected vehicle in the inventory.

Building Blocks / Domain Model

In our site we use a few different data elements.

Each Vehicle has a name, description, SKU, price, weight, stockLevel and image field. Each Category with a name field can list multiple Vehicles.

Step 1 - Content

Next we will add our content to Gentics Mesh. For this we need to create a new project, link the created schemas to it. Finally we create some contents.

Project

Open the admin menu and create a new project called demo.

The previously created schemas category,vehicle, vehicleImage must be linked to the project.

Project setup

Content

Close the admin area and open the Demo project.

Images folder

Create a new folder called images.

Images folder

Aircrafts category

Next we create the Aircrafts category node. Make sure to use the category schema type.

Aircrafts category

Space Shuttle image

Open the Images folder and create a new VehicleImage node. You can download the space shuttle image.

STS VehicleImage

Space Shuttle vehicle

Now it is time to create our vehicle. Open the Aircraft category and create a new vehicle node.

STS Vehicle

Permissions

Before we can read our data via GraphQL we need to assign the read permission to the newly created project. We need to apply the read permission recusively so that it will be applied to all created nodes. Otherwise we would need to deal with authentication in our frontend app.

By default all unauthenticated requests to Gentics Mesh will fall back to use the anonymous user and the assigned anonymous role. This is very useful if you just want to serve data publicly without any authentication. This mechanism can of course be turned off in the mesh.yml file.

Role Permissions

Additionally we also need to grant read permission on the demo project itself.

Role Project Permissions

Step 2 - Export

Now that we have setup or model and contents we can export these in a format that Hugo supports.

The mesh2hugo will be used to load the contents from Gentics Mesh and export them to markdown files which contain the parameters of the content.

First download the latest version of the Mesh Hugo Exporter from https://github.com/gentics/mesh2hugo/releases

Now we can run the exporter which will connect to Gentics Mesh and load the contents.

java -jar mesh2hugo-1.0.0.jar -c -p demo -url http://localhost:8080

Alternatively you can also use the Gentics Mesh Demo server to load the contents.

java -jar mesh2hugo-1.0.0.jar -c -p demo -url https://demo.getmesh.io

The exported content markdown files show now look like this:

---
path: "/aircrafts/space-shuttle"
lang: "en"
version: "1.0"
displayField: "name"
edited: "2019-04-11T12:47:20Z"
created: "2019-04-11T12:47:20Z"
tags: ["Black","White","Hydrogen"]
fields_slug: "space-shuttle"
fields_name: "Space Shuttle"
fields_weight: 22700
fields_SKU: 9
fields_price: 1.92E11
fields_stocklevel: 0
fields_description: "The Space Shuttle was a partially reusable low Earth orbital spacecraft system operated by the U.S. National Aeronautics and Space Administration (NASA)."
fields_vehicleImage: "/images/sts.jpg"
---

Step 3 - Theme

The example project and theme can be found in the mesh2hugo project.

The template for the single view renders the vehicle detail page. The mesh fields can be accessed via the {{.Params.fields_name}} parameters.

{{ define "content" }}
<div class="product-detail">
  <h1>{{.Params.fields_name}}</h1>
  <div class="row">
    <div class="col-md-6">
      <form>
        <div class="form-group">
          <label htmlFor="name">Name</label>
          <input class="form-control" id="name" name="name" placeholder="Name" value={{.Params.fields_name}} />
        </div>

        <div class="form-group">
          <label htmlFor="description">Description</label>
          <div>{{ .Params.fields_description }}</div>
        </div>

        <div class="form-group">
          <label htmlFor="sku">SKU</label>
          <input class="form-control" id="sku" name="SKU" placeholder="SKU" value={{ .Params.fields_SKU }} type="number" />
        </div>

        <div class="row">
          <div class="col-sm-4 form-group">
            <label htmlFor="price">Price</label>
            <input class="form-control" id="price" min="0" name="price" step="0.01" type="number" value={{ .Params.fields_price}} />
          </div>
          <div class="col-sm-4 form-group">
            <label htmlFor="weight">Weight</label>
            <input class="form-control" id="weight" min="0" name="weight" type="number" value={{ int .Params.fields_weight}} />
          </div>
          <div class="col-sm-4 form-group">
            <label htmlFor="stocklevel">Stock Level</label>
            <input class="form-control" id="stocklevel" min="0" name="stocklevel" type="number" value={{ .Params.fields_stocklevel}} />
          </div>
        </div>
      </form>
    </div>
    <div class="col-md-6">
      <img class="img-thumbnail" src="{{.Params.fields_vehicleImage}}" alt="" />
    </div>
  </div>
</div>
{{end}}

Step 4 - Rendering

Now we can run Hugo to render our page and access it via http://localhost:1313

hugo server

Conclusion

You should now be able to create custom themes and load the content from Gentics Mesh. New vehicles can be added at any time. Invoking the exporter again will create the needed files and the preview server will reload the data.

Gentics Mesh Hugo Guide