Getting Started with Strapi: A Beginner's Guide
Date Published
1. Introduction to Strapi
Strapi is an open-source, headless content management system (CMS) that decouples the front-end and back-end of websites, giving developers more flexibility and control. Unlike traditional CMS platforms like WordPress, Strapi provides APIs to manage content and data, allowing you to create a fully customizable user experience. This makes it an ideal choice for building modern, dynamic websites, mobile applications, or even IoT integrations.
Root Concepts of Strapi:
- Content Types: These are the data structures that define the different types of content you manage. For example, "Article" can be a content type with fields like title, body, and author.
- Dynamic Zones: These flexible areas allow editors to mix and match different types of content blocks, which is perfect for creating custom layouts for various pages.
- Roles & Permissions: Strapi allows fine-grained control over who can access and edit the content, which is essential for collaborative work environments.
2. Crash Course on Using Strapi
2.1 Create a New Project
To get started with Strapi, simply run the following command:
1npx create-strapi@latest my-strapi-project
Strapi will ask a few questions during setup.
2.2 Run Your Project and Create an Admin Account
Once your project is set up, navigate into your project directory and run:
1cd my-strapi-project && yarn install && yarn develop
This will start the Strapi development server, and the admin panel will be accessible in your browser where you can create your admin account.
.webp%3F2025-03-25T15%3A05%3A53.988Z&w=3840&q=100)
2.3 Understanding the Content-Type Builder
Strapi provides a powerful content management interface. Key elements include:
- Collection Types: Articles, authors, categories, and users. These are used for managing repetitive content.
- Single Types: For unique content like your homepage or about page.
- Global Content: Used for metadata like site settings, which can also improve SEO.
3. Managing and Updating Content
3.1 Adding a Field to an Article
Once your project is up and running, you can start adding content. For example, add a new "schema" field to your article content type. This can be done through the Content-Type Builder.
Steps:
- Navigate to the Content-Type Builder.
- Add a new field to the Article content type by select "Add another field"
- Go to Content Manager, edit the schema in any Article. You will see the new field (schema) here. Then, edit it, save and publish your changes.
- Once published, you can access the updated API, which will reflect the new field in http://localhost:1337/api/articles:
1{2 "data": [3 {4 "id": 8,5 "documentId": "qwclc0ggiuhx8pim9vq3b0rq",6 "title": "What's inside a Black Hole",7 "description": "Maybe the answer is in this article, or not...",8 "slug": "what-s-inside-a-black-hole",9 "createdAt": "2025-03-24T15:02:46.300Z",10 "updatedAt": "2025-03-24T16:26:07.250Z",11 "publishedAt": "2025-03-24T16:26:07.263Z",12 "schema": {13 "title": "First article"14 }15 }16 ],17 "meta": {18 "pagination": {19 "page": 1,20 "pageSize": 25,21 "pageCount": 1,22 "total": 123 }24 }25}
3.2 Dynamic Zones
Dynamic Zones are powerful because they allow editors to combine various content types (e.g., text, media, quotes) into a single, customizable section of the page.
For example, on your About page, you can use the same set of components but order them differently for different pages. Here’s a sample API response showcasing the use of dynamic zones:
1{2 "data": {3 "id": 1,4 "blocks": [5 {6 "__component": "shared.quote",7 "body": "Strapi is a game changer."8 },9 {10 "__component": "shared.rich-text",11 "body": "Welcome to the future of CMS."12 }13 ]14 }15}
4. Building Pages with Strapi
4.1 Creating a Landing Page
To create a landing page, define it as a Single Type in the Content-Type Builder. This ensures that your landing page is unique and can be edited easily.
- Go to Content-Type Builder and click on "Create new single type"
- With the dynamic zones, you should choose:
- Then, you will got like below, click save
After setting it up, update API token permissions to ensure access for front-end applications.
Then, go to Content Manager, edit Landing page and save. After that, you can fetch the data via http://localhost:1337/api/landing?populate=blocks
1{2 "data": {3 "id": 2,4 "documentId": "maeyrzohb80hjvdz7qdc5nh0",5 "title": "Title",6 "createdAt": "2025-03-25T15:42:37.923Z",7 "updatedAt": "2025-03-25T15:42:38.249Z",8 "publishedAt": "2025-03-25T15:42:38.255Z",9 "blocks": [10 {11 "__component": "shared.rich-text",12 "id": 19,13 "body": "Landing text"14 }15 ]16 },17 "meta": {}18}191
4.2 Creating Custom Components
Strapi allows you to create custom components. For instance, you may create a Call to Action component with fields like title, subtitle, and link. This can then be reused across different pages or within dynamic zones.
To use this component in dynamic zones, you need to add it manually. For example, add Call to Action component to Landing page dynamic zones
Then, go to Content Manager and add this component to Landing page. You will get your custom component via http://localhost:1337/api/landing?populate=blocks
1{2 "data": {3 "id": 3,4 "documentId": "maeyrzohb80hjvdz7qdc5nh0",5 "title": "Title",6 "createdAt": "2025-03-25T15:42:37.923Z",7 "updatedAt": "2025-03-25T16:04:43.131Z",8 "publishedAt": "2025-03-25T16:04:43.142Z",9 "blocks": [10 {11 "__component": "shared.rich-text",12 "id": 20,13 "body": "Landing text"14 },15 {16 "__component": "shared.call-to-action",17 "id": 2,18 "title": "Call to action title",19 "subtitle": "Call to action subtitle",20 "link": "Call to action link"21 }22 ]23 },24 "meta": {2526 }27}
5. Deployment: Self-hosting vs Strapi Cloud
5.1 Deploying Strapi to a Server (Self-hosting)
If you choose self-hosting, follow these steps to deploy Strapi to your server:
- Set up a VPS or cloud instance (AWS, DigitalOcean, etc.).
- Install Node.js and Yarn.
- Install PostgreSQL or another database of your choice.
- Clone the Strapi project from your Git repository.
- Configure environment variables and the database connection.
- Use PM2 or another process manager to keep Strapi running.
- For scaling, you may need to set up a reverse proxy using NGINX and implement automatic backups.
Managing Changes on the Server:
Whenever you make changes to the source code (e.g., content types, components, or other customizations) via the Strapi admin panel or directly in the code, follow these steps to apply changes to the server:
Commit and Push Changes:
After updating or adding content types in the admin panel or making changes to the source code, commit these changes to your Git repository and push them to the relevant branch.
Pull Changes on the Server:
On your server, navigate to the directory of your Strapi project and run:
1git pull origin <branch-name>
Run the Necessary Commands:
Once the latest changes are pulled, you may need to install dependencies and build the project. Run the following commands:
1yarn install # To install any new dependencies2yarn build # To build the project for production3yarn start # To start the Strapi server
5.2 Deploying to Strapi Cloud
If you choose Strapi Cloud, the process is simpler as Strapi manages the infrastructure, scaling, and maintenance for you.
Steps to Deploy:
- Sign up for a Strapi Cloud Account: Create an account on Strapi Cloud and set up your project.
- Create a project and Connect to your Git Repository: Link your GitHub, GitLab, or Bitbucket repository to Strapi Cloud.
- Configure Environment Variables: Set up environment variables (like DATABASE_URL, JWT_SECRET, etc.) via the Strapi Cloud dashboard.
- Commit Your Changes: Before deploying, always commit your changes locally to your Git repository. This ensures version control and makes it easier to track and manage changes. For example:
1git add .2git commit -m "Updated content types and added new fields"3git push origin <branch-name>
- Deploy Your Project: Use the following command to deploy your changes to Strapi Cloud
1strapi deploy
They will ask you some questions
This will push your changes and automatically deploy them to Strapi Cloud. After deployment, you can access your project via the dashboard at: https://cloud.strapi.io/projects/strapi-demo-14ff25eef2/deployments
6. Pricing
6.1 CMS
Growth Plan with Advances features:
- Releases: Keep track of different versions of your content.
- Content History: Store and access previous versions of content.
- Basic Support: Get help from the Strapi team for minor issues.
- Single Sign-On (SSO) Add-on ($50 per seat/month): Authentication via Okta, Microsoft EntraID, or other SAML 2.0 or OAuth2 providers.
Enterprise Plan (Custom Pricing): Includes everything in Growth, plus:
- SSO: Single Sign-On for corporate authentication.
- Review workflows: Approval workflows for content changes.
- Audit logs: Track changes to the content and system.
- Premium Support with SLAs: Faster response times and dedicated support.
- Customer Success Manager: Assistance with product optimization and use.
- Technical Audit: In-depth review of your Strapi setup.
- Wire transfer & Purchase Order options.
- SOC 2 report: Compliance and security reporting.
- Volume-based discounts: Available for larger teams or enterprises.
You can use the free Community plan for smaller projects and only pay when you need advanced features like Content History, SSO,...
For larger businesses, the Enterprise plan offers enhanced support and compliance features.
6.1 Cloud
- Essential: Perfect for small to medium projects with lower traffic and fewer storage needs.
- Pro: Ideal for larger projects needing more resources and multi-environment setups.
- Scale: Designed for high-traffic projects requiring robust storage, bandwidth, and backup solutions.
7. Advanced Features and Customizations
Strapi offers a range of advanced features that enhance your website’s functionality:
GraphQL Plugin: Integrate with GraphQL for more efficient data fetching.
SEO Plugin: Improve your content's SEO performance by managing metadata directly in Strapi.
Webhooks: Automate workflows by triggering actions when content is published or updated.
8. Conclusion
Strapi is a powerful tool for managing content and building modern websites, offering flexibility with both self-hosting and Strapi Cloud deployment options. Whether you're building a simple blog or a complex eCommerce site, Strapi’s headless CMS is highly customizable, scalable, and developer-friendly. By mastering Strapi, you can create dynamic, performance-optimized websites that provide a seamless content management experience.
FAQs
What is Strapi?
Strapi is an open-source, headless content management system (CMS) that decouples the front-end and back-end of websites, enabling you to create scalable, customizable applications.
How do I create a new Strapi project?
You can create a new Strapi project using the following command:
What is the difference between self-hosting and Strapi Cloud?
Self-hosting: You install Strapi on your own infrastructure, such as a VPS or cloud provider.
Strapi Cloud: A fully managed solution where Strapi handles the infrastructure, scaling, and maintenance for you.
How can I deploy my Strapi project to Strapi Cloud?
To deploy your project to Strapi Cloud, connect your Git repository to Strapi Cloud, configure the environment variables, and use the strapi deploy command to push your changes. After deployment, you can access your project via the Strapi Cloud dashboard.
What are dynamic zones in Strapi?
Dynamic zones allow content editors to mix and match different types of content blocks (like rich text, images, and quotes) to create flexible and customizable page layouts.
How do I update my Strapi project after making changes?
After making changes to your project (such as updating content types or adding new fields), commit the changes to your Git repository and push them to the server. On the server, run git pull and execute yarn install, yarn build, and yarn start to apply the updates.
What is the recommended deployment process for Strapi?
Always commit your changes before deploying, use feature branches for new work, and configure environment-specific variables for different deployment stages (development, staging, production). Monitoring and testing after deployment is also crucial.