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: Creating Your API Keys

For your app to function correctly, you will need to provide it with 3 environment variables.

Create an .env.local file at the root of the project and add the key values using the instructions below, replacing the placeholders with the values and removing the brackets.

Your .env.local file will look like this:

TAKESHAPE_API_KEY=[API_KEY]
TAKESHAPE_PROJECT_ID=[PROJECT_ID]
TAKESHAPE_PREVIEW_SECRET=[PREVIEW_SECRET]

Creating an .env.local file to provide environment variables to the app during development.

TAKESHAPE_API_Key

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

TAKESHAPE_PROJECT_ID

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

TAKESHAPE_PREVIEW_SECRET

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

Step 5: Deploying Your Blog with Vercel

To deploy your TakeShape site with a Vercel for Git Integration, make sure it has been pushed to a Git repository.

During the import process, you will need to add the following environment variables:

• TAKESHAPE_API_KEY
• TAKESHAPE_PROJECT_ID
• TAKESHAPE_PREVIEW_SECRET

Import the project into Vercel using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

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