My role at Contentful is to manage the company blog, and I love it. We have a dedicated team of developers, designers, writers, and editors all working together to deliver great content –– and I get to pester all of them on a daily basis.

But when the Developer Showcase was launched early this summer, it got me thinking about building a Jamstack site of my own; a sandbox to play in, learn something new, and occasionally break stuff.

The idea was simple: to create a basic blog from modular components, and to do it using existing resources without getting too deep into the code. I wanted to bring together standalone elements like a content management system, a static site generator and hosting provider through the magic of APIs. The grand result would be a site that was performant and secure.

In the end, I got a bit carried away and wound up creating several blogs plus a portfolio to bring them all together. The result is called Get Some Jam. And that’s what’s been so utterly delightful about this project.

Approaching it as a content editor searching for low-code solutions, I found many options for achieving my goal and couldn’t settle on just one. I’m going to tell you all about it in this post, so pull up a seat and make yourself comfortable.

First things first, set up a GitHub account

If you leave here with only one takeaway (other than the fact that Contentful is amazing and you should totally be using it for your next project), it’s that a GitHub account is your passport to many exotic locations on the magical electronic interwebs.

I used to think that GitHub was just a place where developers would store code and collaborate, but it’s a lot more than that. What’s also wonderful about GitHub is that an account functions as a universal identifier on the web, so you don’t need to create accounts with multiple services and then try to remember passwords for each of them. One GitHub account will grant you secure access to everything.

From my personal GitHub account, for example, I created and synced up free accounts with Contentful (content platform), Gatsby (static site generation and deployment), Netlify (deployment), and Vercel (deployment), and between those four entities I was able to build four different websites in about a week. 

The only outlier to this process was Google, which has its own authentication protocol for their services. That came into play for this project when it came to buying and managing domains. But Google makes doing this so easy that I really can’t object.

Oh yes, and the OTHER useful thing about GitHub is that it’s your de-facto place for storing and delivering files that go into the upkeep of a website. Which leads us to my first example.

1. Building a low-code blog with Gatsby and Gatsby Cloud

The tech stack for this first blog is very simple and consists of two components: Gatsby and Contentful.

This is because Gatsby offers more than a framework for static site generation, there’s also the option of a fully featured deployment and hosting service called Gatsby Cloud.

So, my first port of call was the official GitHub repository where Contentful maintains a starter blog template built using Gatsby, which has push button deployment for Gatsby Cloud. This template is basic but properly formatted with all the necessary features of a functional blog. Things like an index page, formatting for individual posts and key visuals, plus timestamps, authors, and tagging.

It also comes with a preconfigured content model to populate your Contentful space, and sample posts you can delete later. Much of the heavy lifting is done already for those who are still learning the concept of structured content. My thanks to David Fateh for maintaining this great resource. 

Bonus: How to add inline images

While adding some sample entries of my own to this blog, I found a setting that wasn’t to my liking. You’re not able to show inline images in the body of a post. This is because images are a Rich Text Asset that’s not defined (and therefore not queryable) in the content model when setting up the blog for the first time.

After a bit of Googling, I found some helpful blog posts articulating how to resolve the issue. One by Paul Scanlon over on the Gatsby blog and another by Andreea Macoveiciuc on Medium. After a bit of trial and error, I wedged an approximation of their code into my blog-post.js file in starter-gatsby-blog/src/templates/blog-post.js and now images are visible.

Here it is if you’d like to use it yourself:

Copy

I did attempt to have this merged into the main Starter Gatsby Blog repo on GitHub, but it causes issues at startup because it’s an unexpected element in the schema. As long as you use this code after the blog has been generated you’ll be golden.

Would you like to build something more elaborate with Contentful and Gatsby? Check out this guide for a fully featured homepage starter.

2. Building a low-code blog with NextJS and Vercel

Moving on to something slightly more complicated — but not by much — the tech stack for this second blog is three components: Contentful, NextJS and Vercel. In this instance, we’re switching to a new framework and a new deployment service.

Again, this is a basic but functional blog, with a pre-populated content model which looks like:

• title – Text field (type short text)

• content – Rich Text field

• excerpt – Text field (type Long text, full-text search)

• coverImage – Media field (type one file)

• date – Date and time field

• slug – Text field. You can optionally go to the settings of this field, and under Appearance, select Slug to display it as a slug of the title field.

• author – Reference field (type one reference)

If you really want to dig into the process yourself, you can follow the instructions on the GitHub repo and create the content model manually from within your Contentful space. OR you could just hit that big blue “deploy” button and have it taken care of for you. Can you guess which option I chose? =D

Not much else to add here, except that this template might be really useful if you’re intent on showcasing high-definition images for each post. You can see our very own Brittany Walker spinning up this same template in a video tutorial here.

3. Building a low-code blog with RemixJS and Vercel

At first glance, this third blog looks exactly the same as the Gatsby Starter Blog. It’s actually a fork and rebuilt from the ground up using the RemixJS framework. For this site, I opted to host it again on Vercel.

This starter blog template is the work of Contentful Software Engineer Marco Link, and has pride of place on the Developer Showcase alongside some other projects of his making. 

One tweak that I made to the blog after creating it was to change the date formatting from DE to EN. You can do that by visiting the file to-readable-date.ts in contentful-remix-starter-blog/app/utils and changing the value “de-DE” to “en-GB”.

Would you like to build something more elaborate with Contentful and RemixJS? Check out this guide for a fully featured portfolio starter.

4. Building a low-code portfolio with Gatsby and Netlify

Phew, that’s a lot of blogs! The last piece of the project is to bring them all together in one place, with all the relevant links and a bit of discourse about how they were made and the technologies used. This portfolio site is called “Get Some Jam,” and the pun is very much intended.

I’d been searching the web for a suitable template, and eventually I found the Mate portfolio starter by software engineer Ema Suriano. This is a beautiful single page site with a customizable and responsive design regardless of whether you access it on a desktop, smartphone, or magic mirror. If you end up using this template yourself, be sure to buy them a coffee.

It also has a handy feature to import posts from a Medium account, so that I could offer meta-commentary on the process of creating these posts and lessons learned alongside the links to the sites themselves. I expect that no one will find these posts interesting except perhaps my mother (and even that’s a stretch), but it felt good to document the personal eureka moments as I went along.

Next steps after the sites are built

That’s the story behind my submission of Get Some Jam to the Developer Showcase. Thank you for your attention. And since you’ve made it this far, I’ve two more nuggets of wisdom to share from these low-code examples.

Add webhooks for automating previews and updates

We recently published a detailed guide to using webhooks in Contentful. The ultimate guide, in fact. Just to add my two cents; this is one of the first things to investigate after you’ve set up your site with Contentful and your framework/deployment service of choice. It automates many of the key steps you would normally take when managing a site, such as web page previews or pushing them live when you hit the publish button in Contentful.

Keep an eye on Lighthouse scores

Another fantastic feature that’s available on Gatsby Cloud and Netlify is Lighthouse scores. Essentially, Lighthouse is a tool from Google that analyzes web apps and web pages, collecting modern performance metrics and insights to guide developer best practices. Each time you deploy an update, your new build is given a score between 1–100 for each of the following criteria: Performance, Accessibility, Best Practices, Search Engine Optimization and Progressive Web Apps. This post on the Netlify blog is a great introduction.

Wrapping up

Sitting on the other side of my little project, I have a renewed appreciation for the Contentful content platform.

Yes, it’s scalable and versatile and fast and reliable — all of these things are true. But it’s also accessible enough that a non-technical person can roll up their sleeves and build something for themselves.

All this is made possible thanks to a terrific group of developers and creatives who have shared their efforts for the betterment of the community. I proffer a tip of the hat to them all.

Start building

Sign up for a free Contentful account

Use your favorite tech stack, language, and framework of your choice.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.