Strapi Template >> Blog
✨ Usage
Step 1: [Backend] Install Strapi Backend
echo "Strapi V4 template: https://github.com/OceanSoftIO/cms-blog/tree/main/template"
yarn create strapi-app backend --quickstart --template strapi-blog
echo "Strapi V3 OLD-version !!!"
# yarn create strapi-app backend --quickstart --template https://github.com/OceanSoftIO/cms-blog
✅ When the installation is complete, Strapi's administration panel will open in your browser, and you can register a user and get started creating content.
Step 2. [Backend] Powerful CMS-Backend REST & GraphQL APIs
cd backend
yarn install
yarn develop
Step 3: [Frontend] Installing Gatsby plugins & Enter Access Credentials
-
✅ After installing Strapi, you need to install the Gatsby plugin.cd ../frontend # yarn add gatsby-source-strapi
Auto-generated Access Credentials
-
✅ If you are working on local development, create a .env file and paste your Strapi credentials in it. -
☑️ To deploy your application in production, you need to add the environment variables to your deployment platform provider.echo "Move backend/frontend.env.development to frontend/.env" mv ../backend/frontend.env.development .env # cat frontend/.env
frontend/.env
STRAPI_API_URL=Your_Strapi_Server_URL STRAPI_TOKEN=Your_Strapi_API_Token
Step 4: Register Strapi CMS plugin
frontend/gatsby-config.js
require('dotenv').config()
module.exports = {
plugins: [
{
resolve: 'gatsby-source-strapi',
options: {
apiURL: process.env.STRAPI_API_URL || 'http://localhost:1337',
accessToken: process.env.STRAPI_TOKEN,
collectionTypes: ['article', 'category', 'author'],
queryLimit: 1000
}
},
{
/** ATTENTION: Match the theme name with the theme you're using */
resolve: '@oceansoft/gatsby-blog-education',
options: {
sources: {
strapi: true,
local: false
}
}
}
]
}
Step 5. Gatsby
-
Every time you modify
gatsby-config.js
file, you need to clean the cache:yarn clean
-
That’s it! You can now start gatsby dev server to see your content from Strapi.
yarn develop
Step 5 (Optional): Automate Re-building
If you’re planning to deploy your site to AWS, Netlify or Vercel, you can automate deployments by configuring webhooks to trigger a site rebuild when content is modified in your Strapi panel.
- Webhooks explained and how to use them in Strapi
- Triggering a deploy in Netlify automatically after updating content in Strapi