Create and Deploy a TakeShape Blog with Vercel
How to launch a blog site using Next.js and TakeShape on Vercel in minutes.
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, 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 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/