Contentful Markdown

Posted on  by admin

We used Contentful’s contentful-migrationand rich-text-from-markdownlibraries to handle the conversion of markdown to rich text. The contentful-migration library handles the actual passing of data. Often times, you'll deal with rich data that contains links, styles and images. Typically, this is really hard to do, but with React Native, you can easily render HTML from a Web View. Since Contentful uses Markdown, we can transform that to HTML using a library.

  1. Contentful で記事など(長文)を書くフィールドに、Markdown (マークダウン)と Rich Text (リッチテキスト)という2種類のエディタがあります。 この記事では Markdown について解説していきます。.
  2. Much better, but I would remove the H1 titles from the Markdown in Contentful and rename your Contentful blog posts with what the H1 title was. You will see why when we add the Icon and stuff in next.

Introduction

This article explains how to scaffold a website using Create React App, hook it up to content from a CMS and deploy as a static website on AWS S3.

Why React?

React has popularized component based development and risen to dominate the front end space with an intuitive API for building applications. It boasts a huge community and has an excellent developer experience.

Why Static?

React is traditionally used for building client side applications, which are burdened by an upfront performance cost. For websites that do not require a single page app experience, it is irresponsible to make a user pay this UX penalty.

React has more recently introduced server side rendering as a great solution to this problem, however this can require a complex Node server architecture, which may not be appropriate for websites with more basic needs.

We can achieve the same result of sending pre-rendered markup to the browser with a technique called static rendering (also known as snapshot rendering). This is where the pages are rendered into HTML by a build process and then written to static HTML files. This gives us the performance boost without the complex server maintenance. This article will explain one such build process.

Static sites are better for Google indexing and can mitigate security threats by way of not having a database behind the page rendering.

Starting Point

We will start with a basic client rendered app, built from Create React App. Run this command in your terminal:

This will install a React application into a new directory 'static-react'. We can cd into this new directory and yarn start to see it in our local browser.

Set up routing

Next we need to add some pages, so we can set up routing. Stub out some basic pages with new files Home.js and Post.js

Install React Router:

Update App.js with the relevant React Router components, plus the new page files we previously created.

Deploy to S3

This section will briefly describe how we can deploy our website to Amazon S3 using Travis CI. You can choose to use an alternate CI service, such as Bitbucket Pipelines, or just skip the deployment step and follow on with this tutorial using your localhost.

You will need to create a free account with Travis CI which you can do using your Github login. Next we create a .travis.yml file with the following config:

The last two lines need to be uncommented and updated with the details from your S3 bucket, for example:

Initialize the project as a Git repo and commit the files. Create a new repo on Github and push up the initial commit. We must then sync Travis CI with our Github account to pick up the new repo. Now, every time we push a new update to Github, Travis will yarn build then deploy the compiled code to S3.

We can now view the site at http://your-bucket-name.s3-website-your-region-name.amazonaws.com. If we open the dev tools and select the 'Network' tab, we can record a timeline of the page render. Since it is important to optimise for 'mobile first', we will select 'Fast 3G' from the network speed presets, then record the page load.

The above screenshot shows that nothing renders until 1.50s, with the complete render clocking in at 2.09s. We should keep in mind that this website has a bare minimum of content, so it is taking 2 seconds to render hardly anything. In the next section, we will improve this with static rendering.

Set up Static Generator

Install the react-snap package

Contentful Markdown

Update the build script in package.json to run react-snap after the app build

Update index.js to use the React 16 hydrate() method

We can now push the updates to Github and trigger another build and deployment. Then we can rerun the page load performance test with dev tools.

We can see that our first paint time has dropped from 2.09s down to 719ms - which is roughly one third of the time the client rendered page took. Or, a 3x speed increase! We can also load the pages with JavaScript disabled - this is rarely a hard requirement, but nevertheless it serves as a useful benchmark for what is independent of JS.

Set up CMS

This section will describe how to use Contentful as a headless CMS for your static React website. Let's begin by installing their JavaScript API package.

Next, create an account with Contentful, set up a new space, and then navigate to where it displays your API keys for the space. Create a .env.local file and add to it the 'space ID' and 'access token'.

Then create a handful of content items so we can consume them in our site.

Next, we update our Home.js file with a fetch to the Contentful API for the posts we just created. The updated file is now this:

When we run this in our browser, we'll see the object for each entry in our console, as shown below. We can inspect this data structure to determine which object keys to use for displaying the relevant data.

Let's now make each of these entries link to their respective pages. Update Home.js with React Router's Link. This is the diff to the previous snippet:

We now need to update the Post route in App.js accordingly, and also remove the placeholder links. The diff for this is:

We should check these links are working in the browser - click each of the links rendered on the homepage and we should see the same placeholder content loading for different URLs, each containing the post id.

Next, we will wire up the content for Post.js. We will import the Contentful client and make a fetch to their API using the post ID from the URL, which we can access via React props this.props.match.params.id. The updated file is shown below:

Contentful markdown react

Again, we start by logging the data object to the console to see what we get back from the API:

Now, let's update the returned markup with the post content. The diff for this is:

Metadata

A critical part of static web pages is the presence of metadata such as the <title> and <meta> attributes for SEO and social sharing. Create React App does not include any features for this out of the box, so we will introduce the popular React Helmet package to manage our metadata.

Let's start by updating Post.js to render a <title> attribute containing the post title. The diff for this is:

Markdown Support

Contentful supports Markdown syntax out of the box, so in order to take advantage of this feature, we need our React templates to support rendering Markdown. Firstly, let's add some Markdown to one of our posts in the CMS, for example:

In this tutorial we will use the marksy package, a library for converting markdown into a virtual DOM structure.

We can now update Post.js with a helper function for compiling the raw Markdown into a VDOM structure to output inside our JSX. The diff for this is:

Conclusion and Starter Repo

We have covered a lot of ground in this tutorial, taking a basic client rendered Create React App installation from its default state to a CMS-powered static website with Markdown and metadata support.

To make life a little easier, I have created a starter repo including all the packages featured in this tutorial, configured to generate a static website rendering the example content from Contentful's blog content structure. You can find this on Github here: https://github.com/astrotim/contentful-static-react. Please feel free to submit bug reports or feature requests via a Github issue.

Now go forth and create static!

Contentful is a fast and flexible Content Management System that makes content management simple for any product, anywhere in the world. Users are able to construct custom content models, as opposed to having to deal with rigid and predefined templates. In addition to providing a big enough room for users to design around, it delivers all needed content, removing the content from presentation in a free and scalable way for optimized performance.

The software is also very affordable and integrates perfectly with all your business software applications. Contentful offers a free plan for beginners, freelancers, and small businesses, as well as a smooth transition towards greater, paid plans to help your brand's development. Contents of this software are stored in entries, which are made up of highly modular and flexible fields. This makes doing away with conventional methods, which can be limiting in terms of presentation of content.

With Contentful, management of content and delivery are decoupled at the infrastructure level, meaning that if management of contents fails, the delivery aspect won't. The delivery infrastructure is read-only for greater speeds, and tighter security, access abilities are chaired depending on the business structure of your organization. It also offers synchronization which allows delivery of little bits of contents update, which can improve the requirements for mobile bandwidth greatly.

Developer Friendly API

With Contentful, you can now seed up your development cycle, as it provides you with powerful APIs, well-documented features, and business demos which can help you prototype easily, as well as design great applications faster than ever. Contentful's API works hand-in-hand with JSON payloads, to give users full programmatic control over content, assets, and translations. Also, the full decoupled write and read APIs ensure that you get a fault free service. The software is mobile friendly, giving you access to image auto-compression, selective sync, and support for offline use.

Great for Business

By going professional on Contentful, you are provided with highly reliable infrastructure and seamless performance monitoring, to professional advice and affordable pricing. You can manage environments, collaborators, access to both individual spaces and organizations, and billing easily. Your content can be hosted on the cloud platform which is monitored 24/7 by engineering and support teams. Also, with the Single Sign-On (SSO), managing user accounts are made easier, ideal for very large teams. The software also helps you manage traffic surges, and expand your team and at the same time keep tabs on your expenses.

Other features that users are equipped with on Contentful include Quick Deployment, Third Party Integration, Multiple API keys, Secure Previews, Media Library, and The Power of Markdown.

Pricing

Contentful Markdown Editor

Contentful offers users with four amazing pricing options, with a 14-day free trial on all plans. The Developer plan which is free accommodates 3 users, 2 spaces, and 10k records. Some other features of this plan include Community Support and 1TB of bandwidth. The Team plan at$249/month is great for commercial projects run by small businesses. This plan features 12 users, 3 spaces,25k records, Standard Support, 3M API Calls, and many more. At $949/month, the Professional plan which is ideal for sites, and apps run by mixed teams features 5 spaces, 50K records, 20 users, etc. Lastly, for the Enterprise plan, contact Contentful to opt in. This plan is great for global brands, big teams, and businesses and organizations with custom needs.