strapi-blog v1.0.6
Strapi Template >> Blog
β‘ Strapi is an Open-Source NodeJS Headless CMS with a fully customizable API that lets you develop practical, production-ready Node.js APIs in hours instead of weeks.
π― Strapi-V4 Headless-CMS Template for creating Blog CMS Backend, such as Education, Agency, Beauty, Medical, News, Personal, and Science ππ².
π³ https://blog.oceansoft.io/strapi-nodejs-headless-cms/
β¨ 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