We’re going to pick up where we left off with our last tutorial, in which we converted our entirely static Hammer website template gallery to an API-first CMS driven list of templates, using the workflow I described in an earlier post.
That gave us a great introduction to the workflow and setting up the tools for automated continuous deployment. If you haven’t yet read that article, I’d recommend starting there - don’t worry, we’ll wait here for you.
In this tutorial we’re going to go a level deeper in the information architecture, by generating new content at build-time - a template details page, in our case - which will be added to our project and linked to from our gallery list.
So, let’s get started.
Here’s the basic steps of what we need to do:
- Extend our Template config in hammer.json
- Create our Detail page template
- Update our Gallery page to link to the Detail page
- Deploy to Production
Extend our Template config in hammer.json
Let’s walk through what we’ve added to our hammer.json file, specifically, the “templates” configuration.
“template” - this will link our template entry to a physical layout template file.
“urlAliasPrefix” - this optional field specifies the location that generated pages will be added to, relative to the root of your project. In this case, our list page is at /gallery so we want the individual detail pages to be located relative to the /gallery path, e.g. /gallery/html5-boilerplate.html
“slug” - specifies a field that will be used to name the file. We’re using a short_text field in the Contentful content type for Template, called slug, to determine the name of the file.
“renderOnBuild” - specifies that you wish to generate the pages at build time, set this to true
Create our Detail page template
In the hammer.json file above, we specified that our detail page template is called _template-item.slim, located in the containers directory. This doesn’t currently exist, so we need to create it.
This is a very simplified version, and we’ll extend this in a coming tutorial.
We’re adding a link back to our Gallery page, for easy navigation. Then, simply listing some of the basic information about the template, its image, name and description.
At build time, Hammer will generate this page for each Template entry you have, and you’ll see it in the Build directory. The Hammerformac app will also list generated Contentful files so you can easily check what has been generated is as you expected.
You’ll want to make sure your page is styled as you like, in my case, I decided to reuse our Hammer Docs layout for the detail page style, but I’ll let you work your own presentation out.
Update our Gallery page to link to the Detail page
Finally, we want to make sure that when each Template listed in the Gallery page links seamlessly to the Detail page. For now, we’ll just use the template name to link.
Push to Production
We now want to push our changes up to Production. If you followed the earlier tutorial, you should already have your Github and Forge projects sync’d.
Simply add, commit and push your changes to your repository and wait a few seconds for your project to deploy.
You can now add and edit your Contentful template entries as you like, and with each change, your production site will rebuild and deploy your new content. Beautiful.