Deploy Next SSG with Storyblok to Cloudflare Pages
Storyblok is the first headless CMS that works for developers & marketers alike.
In this tutorial, we will explore how to deploy applications built with Storyblok on Cloudflare pages. We'll deploy a blog application built with Next.js and Storyblok on Cloudflare pages and configure a deploy hook to publish changes we make on our application automatically.
This tutorial benefits readers interested in Storyblok, Next.js, and who plan on deploying their applications built with Storyblok to Cloudflare.
Section titled Requirements Requirements
The following are required for this tutorial:
- Basic knowledge of Next.js and React
- Node, yarn (or npm), and npx installed
- An account on Storyblok to manage content
If you're new to Storyblok, We highly recommend our tutorial Add a headless CMS to Next.js in 5 minutes.
Section titled Setup Next project Setup Next project
For this article, I prepared a blog application written with Next.js. Clone the project repository here to your local computer using the command below:
git clone https://github.com/storyblok/cloudflare-next-example.git
Run either of the commands below in the project’s root folder to install dependencies:
npm install
Section titled Configure Storyblok space Configure Storyblok space
Next, set up a Storyblok space for the blog following this guide. After setting up the space, the content should look like this:
)
Set up your Storyblok space
Section titled Create your preview token Create your preview token
Navigate to your settings tab {1} in your space, in the new page click on API-keys tab {2} and toggle to get your space preview token {3}
)
create your Storyblok preview token
Section titled Adding environment variables to Next SSG Adding environment variables to Next SSG
In the root folder of your Next.js application, create an env.local file, inside it, add your environment variables which include your Storyblok API keys, your space preview token and a Fallback=true.We will need this to prevent Next.js fallback error during deployment.
Your .env.local file should look like this:
STORYBLOK_API_KEY={YOUR STORYBLOK SPACE PREVIEW TOKEN}
STORYBLOK_PREVIEW_SECRET={YOUR RANDOMLY CREATED SECRET FOR PREVIEW}
FALLBACK=true
Section titled Deploying to Cloudflare Pages Deploying to Cloudflare Pages
We are going to deploy our project as an SSG. Read more about NEXT static site generation (SSG) here. To deploy your application, create a GitHub repository for the application and push it to that repository. We need to do this because we can only deploy to Cloudflare pages from Github or Gitlab.
After this, create a Cloudflare account from here. After creating an account and signing in, navigate to Home {1}, and click on pages {2}:
)
deploy to cloudflare pages
Click on the Create a project {1} button:
)
Create a pages project
Choose the Git repository you hosted your project on by connecting GitHub {1} or GitLab {2}, and grant Cloudflare access. Select the project and begin setup:
)
connect GitHub or GitLab
On the setup page, under Build settings {1} > Framework Preset {2}, choose the Next.js preset {3}. It will add a deployment command and specify the folder to deploy after the build. We also need to add environment variables:
Make sure you add all the variables in the .env.local file of the project except FALLBACK. We don’t want a fallback in our getStaticPaths function in production as this could cause a fallback: true export error.
A fallback:trueexport error occurs when fallback is added to getStaticPropswhich renders the build invalid. Click on Save and Deploy.
)
set up pages
Section titled Set up webhooks Set up webhooks
To set up deploy hooks on Cloudflare pages. Go to Settings {1} on Cloudflare pages, under builds and deployment {2} look for the create deploy hooks section {3}. Create a new hook and set the branch you want to deploy.
With the deploy hook, whenever we add or edit any content in our Blog Storyblok space and publish it, Cloudflare will automatically redeploy our app.
)
Cloudflare deploy hook
Copy the generated hook, then Go to Settings of your Storyblok space and under that General tab, you will find the Webhooks section {1}. Paste your recently copied webhook into the Story published & unpublished field {2}. Finally, add the deploy hook to the input for webhook then save it:
)
Adding hooks to storyblok
Now, every time you publish or unpublish your content in the space, Storyblok will trigger the webhook and Cloudflare will automatically start the deployment of your page. You can see a live version of the application here.
Section titled Conclusion Conclusion
In this article, we learned how to deploy applications built with Next and Storyblok to Cloudflare pages and set up a deploy hook for redeployment when any change is unpublished in our Storyblok space. We also looked at static site generation (SSG).
Section titled Nextjs and Cloudflare pages sources Nextjs and Cloudflare pages sources
| Resources | Link |
|---|---|
| Project Example Repo | https://github.com/storyblok/cloudflare-next-example.git |
| Adding Storyblok to Next.js | https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-in-5-minutes |
| Cloudflare Pages Docs | https://developers.cloudflare.com/pages/ |
