Create and Deploy a TakeShape Blog with Vercel

TakeShape provides instant, intuitive, adaptable, and collaborative services to power Jamstack projects of any size, shape, or complexity.

In this guide, you will discover how to create a TakeShape blog, and deploy it with Vercel.

Step 1: Setting Up with TakeShape

Firstly, create a free TakeShape account and set up a Blank Project.

Creating a new blank project with TakeShape.

From the project settings page on the TakeShape Dashboard, create an Author model by selecting "Add Content Type", using "Author" as the title.

When settings up the Author model, add two widgets, Single Line with the title "Name", and Asset with the title "Picture".

Creating an Author model from the TakeShape Dashboard.

Once you have added the required widgets, click "Create Content Type" to save the model.

Click the "Add Content Type" button again to create a Post model with the title "Post".

Add the following widgets with their corresponding titles:

• Single Line - "Title", marked as required.
• Markdown - "Content".
• Single Line - "Excerpt", marked as required.
• Asset - "Cover Image", marked as required.
• Date - "Date".
• Single Line - "Slug".
• Relationship - "Author", with Relationship Type set to "Single".

The widgets required to create a Post model from the TakeShape Dashboard.

Once you have added the required widgets, click "Create Content Type" to save the model.

Step 2: Adding Your TakeShape Content

Select the Author Content Type, then create an Author record using your name and select an image from the ones provided. If you like, you can use a custom image by uploading it to your TakeShape asset library.

Next, create multiple Post records, completing the fields where prompted. Make sure to choose the Author created previously, you can also use Markdown for the Content field.

Step 3: Set Up Your Next.js Blog

Set up a Next.js project by Initializing the project template and moving into the project directory:

yarn create next-app --example cms-takeshape my-takeshape-app && cd my-takeshape-app

Initializing a Next.js + TakeShape project and moving into the project directory.

Step 4: Adding Your API Keys

From the TakeShape Dashboard, create an API Key with the Read permission.

Using Vercel CLI, create Secrets to securely store the API key, the project id from the TakeShape dashboard, and a preview secret.

vercel secrets add next_example_cms_takeshape_api_key [your-takeshape-api-key]

Adding the next_example_cms_takeshape_api_key as a Secret.

You can find your project id in the URL from the TakeShape dashboard, it will look similar to a17a8efa-372e-4969-9267-55a9c35a0907.

vercel secrets add next_example_cms_takeshape_project_id [your-takeshape-project-id]

Adding the next_example_cms_takeshape_project_id as a Secret.

Create a random string that can be used as a preview secret and add it using Vercel CLI. You can use a string similar to MY_SECRET, but remember to change it to make it unique.

vercel secrets add next_example_cms_takeshape_preview_secret [your-random-string]

Adding the next_example_cms_takeshape_preview_secret as a Secret.

Step 5: Deploying Your Blog with Vercel

There are two ways to deploy with Vercel. We recommend using a Vercel for Git Integration for ease-of-use. Alternatively, Vercel CLI can be used to generate a manual Preview Deployment.

Once deployed, you will get a URL to see your site live, such as the following: https://next-blog-takeshape.now.sh/