How to create a blog with Prismic.io

At Goodpatch, we usually use Memopatch as a blogging platform to inform you about the latest news on UI. Also, whenever we have the pleasure to interview inspiring people, this is the place where we write about it. Since we launched our mobile prototyping app Prott, we have used Memopatch to write posts about new app features.

Soon, however, it became obvious that our readers' interests were diverging. Some of our users were simply interested in the latest news on prototyping with Prott, while others cared more about our UI / UX design work at Goodpatch. So we decided to launch a Tumblr blog where we could focus exclusively on Prott.

This concept has worked well for some months now. But since we are always concerned with the great look and feel of our work, we felt that we needed to integrate the Prott Blog more seamlessly into the Prott app website. That is why about two months ago, we sat down, thought about a concept and started designing. We're proud to announce that what you are seeing right now is the fresh Prott Blog!

The design

Prott Blog now has the same color scheme and the fixed navigation bar that our users know from the web app. We display the newest post at the main spot on top of the page with a dominant picture. Other posts line up when you scroll down. When opened, a post will expand its main picture to full width and you can read the content below. Just like with our Memopatch blog, we included the name and picture of each author, because we like the personality. After all, we are all individuals!

You can filter by category and see the most viewed articles. Share buttons are visible at all times in our desktop version and stick to the end of the post on mobile.

We can also write sharable quotes like this one if we want to!

Spacing and font were chosen to be easily readable and feel pleasant and organized when scrolling. Also, there is only a single level of heading to keep the reading experience as simple as possible.

If you like, please feel free to give us feedback.

The engineering

Let me now walk you through our decision making process and show you what is happening under the hood.

When we started out we had the following requirements:

• The implementation should allow complete creative freedom in our design.
• We want to be able to write both Japanese and English blog posts for a multilingual experience.
• Regardless of their background, any Goodpatch member should be able to write and preview blog posts through an easy-to-use interface.
• If possible, we don't want someone to waste precious time because they have to write HTML for layout and styling.
• If possible, we want a very light solution. We are currently using Wordpress for Memopatch, but it feels big and heavy.
• Articles should be sharable on social media and SEO needs to work fine.

Luckily, about a year ago, a friend of mine introduced Prismic.io to me. They are a French startup who created a CMS that lets you use the technology of your own choice. The idea is that you write content in their web application while they provide an API so you can query and deliver the content to your users. It looked and sounded good. Even after reading about some of its limitations, we thought that a blog should be a rather simple use case and we decided to give it a try.

And in short: It worked! Now we can create a new blog post and write and upload the content. To deliver this content to our users, we developed a Rails app, starting from the Rails starter project provided by Prismic.io. With the help of the API browser we can check our queries and the returned data in JSON format. In our Rails backend for example, we ask the API for the five latest blog posts and then render the data into our custom styled HTML templates.

The concept is really that simple. The trickiest part was to find out exactly how to parse the data that we get in our Rails app with the help of Prismic's developer's manual.

Eventually, Prismic ended up matching all of our requirements. So right now, when anyone wants to write a blog post, they simply choose the language and start writing in a what-you-see-is-what-you-get editor.

Tutorial

In case you're planning to create a website with Prismic.io and your favorite technology, here is a short tutorial.

Step 1

Sign up for prismic.io and create a repository. Get familiar with their interface and take a look at their concrete example Les bonnes choses. After signup, they will ask you to clone Les bonnes choses as an example repository.

For me, at first it took a little while to understand that almost all content you create in Prismic.io is a document. In our case, for example, a blog post and an author. The content a document can contain is specified as JSON inside document masks.

Step 2

Get familiar and play around with document masks until they roughly fit your requirements. Don't worry if there are more document masks defined than you actually need, you can modify them later. Make sure there is at least one that you want to start querying and write one document for it.

In our example for the Prott blog, we specified that a blog post has a title, subtitle, main image, author and so on (called Fragments) in the Prismic web interface. Find out more about masks here.

Step 3

Clone the Prismic.io starter application for your favorite technology. You can find all of them on Github. Then start developing!

The good thing about these starter applications is that they contain a basic example of how to:

• setup the API connection
• query some documents
• make use of caching

Now it can get a little tricky to find out how to get to your content and render it into your layouts. Sometimes, like me, if you find that the developer's manual is not sufficient, be sure to check out the actual reference for your technology's kit. You can find it in the upper right corner on the developer's manual page, in a small dropdown menu.

For example, this is how we render the author's image.

Step 4

If you start getting confused with all these different entities like: References, Previews, Fragments, Structured Text — don't worry, you are on the right track! What you need now is to keep going and read more and more documentation. It will all get clearer soon and once you understand the concepts you get really productive.

Great support

Throughout the implementation we noticed various problems with Prismic.io. Their system was not yet built to fully support unicode, so Japanese text input did not work and slugs were not created correctly. But the Prismic team responded quickly, so after a few questions in their Q&A Forum, a couple of support tickets and a week later, they had fixed all the issues.

Also, using Prismic's content delivery network, people all around the world get their information delivered from local servers, which in turn means great website performance!

Of course, we know that it is always a risk when you rely on a third party for resources that you cannot control. In case Prismic goes down, Prott Blog will too, but this time, we wanted to take a step forward. Especially, because we believe in startups and we believe in prototyping the new. In case the system fails, we are sure to have learned something.

In conclusion we can recommend using Prismic.io to create a blog. They will get even better in the future.

Now we hope you enjoy the Prott Blog! In case you have any suggestions, please let us know.