I recently built my personal portfolio and one feature I wanted was a blog where I could share my learning experience. While building the blog I had some requirements to fulfil; I wanted to build and deploy the blog at little or no cost, also I wanted it to be a source of truth for posts across different blogging platforms, and it needed to be fast.
Going with the jamstack approach I decided to use Next.js for the view layer, Strapi for the content management system, AWS Lamda functions to post to other blogging platforms, Cloudinary for Image storage and Optimization, Heroku for hosting my Strapi CMS, and because of the seamless integration between Next.js and Vercel and the latter’s rich feature set, I opted for Vercel to host the front-end.
I had built a fully static site however, I didn’t want to go to my Vercel dashboard to manually build my site every time I created a new post all things being static, 🙃 no pun intended. Luckily, both Vercel and Strapi have an easy way to automate the build process, let me walk you through It.
You would need to have a Vercel account with an application deployed on it and a Strapi application setup either running locally or on some hosting service.
Vercel has a git integration called deploy hooks that allows you to create URLs that accept HTTP POST requests to trigger deployments and re-run the build process. These URLs are uniquely linked to your project, repository, and branch, so there is no need to use any authentication mechanism or provide any payload to the POST request.
With deploy Hooks, you can trigger automatic deployments by hooking into content changes in a Headless CMS which in our case is Strapi. To do this follow these simple steps :
Step 1: Navigate to the settings tab
On your Vercel dashboard click on any of your existing projects and then you should also click on the settings tab.
Step 2: Navigate to the Git tab
On the left-hand menu, you should be able to find the Git tab. Click on the Git tab and scroll until you find the deploy hooks section.
Step 3: Create Deploy Hook
In the First Input enter a name to reference your deploy hook. For this example, I have chosen “strapi-hook” but it could be anything really.
For the second Input enter the name of any branch you want to trigger the build steps on when a post request is sent to the unique URL that is going to be generated. I have chosen to enter the “main” but it could be any other branch for example maybe the “dev” branch. You can then click on the Create Hook button to generate the deploy hook.
Copy the URL that has been generated for the deploy hook.
Step 4:Navigate to the Strapi webhooks page
On the side menu on your Strapi dashboard click on settings. Under the “Global Settings” click on the webhooks tab to navigate to the webhooks page.
Click on the “Add new webhook” button.
Step 5:.Create a New Webhook
On the form, we will need to fill in some input fields to generate our webhook which will trigger the build process on Vercel. For the Name field, we need to fill in a name to Identify the webhook we are about to create. For my webhook, I have chosen “Vercel build hook” as the name.
Next for the Url field, we need to paste in the URL we copied when we generated our deploy hook. We can skip the Headers section as Vercel does not require any payload for the POST request.
Finally, under the Events category, We want to specify what actions from our event will trigger our Webhook. In my case, I want to trigger a build every time I delete, publish and unpublish a post (entry) so my Next.js application rebuilds my static view layer. I am going to tick the corresponding checkboxes for the actions I mentioned above but if your needs differ, try switching it up. Also, if your application depends on media from your Strapi CMS you might want to tick the corresponding checkboxes that suites your needs.
Once you are done filling out the fields you can click on the “Save” button.
Now when you delete, publish and unpublish content from your Strapi CMS it will build your Vercel front-end application.🎉
