In this tutorial, you’ll learn how to deploy a React blog on Netlify that fetches content from a Strapi instance, which will be deployed on Heroku, which is a cloud platform where you can host a Strapi server for free.
Deploy a New Strapi Instance to Heroku
To deploy your Strapi instance you’ll need:
The Cloudinary account is required because Heroku will restart at least once a day, which would remove any files not tracked in source control (e.g. uploaded blog post images).
Once you have your Heroku and Cloudinary accounts set up, click here to deploy a new Strapi instance on Heroku.
Once you have created your new Strapi instance, copy its URL for the next step.
Deploy Your React Blog Frontend on Netlify
To deploy your React blog frontend you’ll need:
Netlify allows for a one-click deployment experience by cloning and deploying the starter repository. Click here to deploy the Strapi React Blog starter to Netlify.
On the next screen, add your
API_URL, which is the URL of your Strapi instance running on Heroku (e.g.
https://your-strapi-app.herokuapp.com), without the trailing slash
Netlify will create a copy of the starter repository on your GitHub and deploy it to production!
Create New Articles in Strapi
When you have a new article in mind, dive into your Strapi instance to create a new post!
Head to the
/admin route of your Strapi instance (e.g.
https://your-strapi-app.herokuapp.com/admin) and log in. Click the “Articles” collection type to see your current list of articles.
Click the “add article” button to create a new article.
After saving, go to your Netlify dashboard and deploy the site to see the new article live!
Heads up! If you want to know learn how the React blog was built, check out this tutorial on how to build a React blog from scratch with Strapi.
Automatically Redeploy to Netlify When Content Is Changed In Strapi
If you don’t want to manually deploy your site every time you add an article, you can create a build hook for your site.
Copy your new build hook, then head to your Strapi dashboard and add it as a new webhook by visiting Settings > Webhooks.
Choose which events should trigger a rebuild, then save the webhook and make a change to see your Netlify site automatically redeploy!
Edit Your Strapi Collection Types
For safety, Strapi doesn’t allow you to edit the structure of your data in production. If you want to modify the article collection type to have a new field, you’ll need to make modifications locally, push the changes in your repository, and deploy your application again.
To do this:
- Clone the repository that was created when you deployed the site to Netlify
- Clone your Heroku project to your local machine
You can now run your Strapi server in development in order to edit collection types either through the admin UI or by editing the model. When you’re done, commit your changes and push it to Heroku.
git add . git commit -am "make it better" git push heroku master
What to Do Next
There are several options for Strapi blog starters:
You can learn more about Strapi in the docs. Happy building!