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

🎁 Installation Service 💲