Simply copy and paste the following command line in your terminal to create your first Strapi project.
npx create-strapi-app
my-project
Strapi is the world-leading node.js open-source headless CMS. Strapi simplifies our development process, making it easier to access our content by providing us fast and secure APIs built in an efficient and scalable manner.
Jekyll is a simple blog-aware static site generator used for creating personal websites, blogs, documentation websites, corporate websites, etc. Jekyll was built with the Ruby programming language, using the liquid templating engine as its templating engine. Jekyll is also the engine that powers GitHub pages.
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. Using Tailwind, we can write our CSS directly in our HTML classes. This leads to faster development time since writing CSS this way is much easier.
Snipcart is an easy-to-implement shopping cart platform. With Snipcart, you can create a seamless online buying experience no matter your web stack with just two lines of code.
To complete this tutorial series, you need to have the following:
The first step in our tutorial will be to install and set up Strapi as our headless CMS. Make sure Node.js and NPM are fully installed before this step.
npx create-strapi-app@latest my-project --quickstart
my-project
to the preferred name of your project. Select n
when asked for a configuration template.Add your details and click LET’S START to access the Strapi dashboard.
We need to add a folder with the project name to your computer's root directory. Open the folder in your preferred code editor to access the backend code and configurations.
We will use Jekyll as our preferred static site generator for this tutorial. Jekyll is a simple blog-aware static site generator for building blogs, personal websites, corporate websites, documentation websites, etc. Ensure Ruby, Ruby gems, and Bundler are fully installed before this step.
The first step in the frontend setup will be to install Jekyll locally on your computer.
For mac installation, run:
sudo gem install bundler jekyll
For windows installation, run:
gem install jekyll bundler
Visit the Jekyll installation page for more information on installing Jekyll on your local computer.
For this guide, we will use the Jekyll starter styled with Tailwind CSS template. This template has Tailwind CSS ultimately set up with Jekyll, making our development journey more accessible and faster. To set up the starter project, navigate to the Tailwind starter GitHub repository on your browser.
You will be directed to the Create a repository page.
Add your project name as the Repository Name, and click Create repository from the template to create a new repository with the template.
Clone the newly-created repository.
bundle install
to install all the required gems.npm ci
to install the required NPM packages in the project’s package.lock.json
file, and run npm run dev
to start the Jekyll development server.You will be redirected to http://localhost:4000/, where the development server is hosted. The page should look like this:
The next thing to do is to add our products to the backend.
Navigate to your backend repository and start the backend with npm run develop
. We are using npm run develop
instead of npm run start
because we will change the server collection types.
Login to your dashboard, navigate to Content-Types Builder, and click create new collection type. Set the display name to Product and add the following fields to the collection type:
==> name(Text(Short text)) ==> price(Number(float)) ==> description(Text(Long text)) ==> image(Media(single media)) ==> images(Media(multiple media)) ==> videos(Media(multiple media)) ==> additional_information(Text(Long text))
Next, we will add a dynamic auto-generated slug system to the Product
collection type. Using a slug will make it easier to query for our products in the frontend.
slug
, and set the attached field to name
. slug
field. Now that we are done creating our collection types, we need to add products to our backend. On the Strapi dashboard, click Product under COLLECTION TYPES to navigate to the product page, then click on Configure the view and click on product again.
Make sure to add many products to your backend before moving to the next step in this tutorial. After adding a product, click publish to publish the product.
We will store our products in different collection types to create different product collections. We won’t use single types because single type requests are not retrievable in Jekyll with the Strapi-Jekyll plugin.
To create the collection, navigate to Content-Types Builder and click create new collection type. Add your collection name as the Display name, and add the following fields to the collection type:
To connect products to a collection, select the collection and click Add another field. Select Relation, select product
on the left menu, and set the relation field to The collection name has and belongs to many products
, ie.
For this tutorial, I will be using four product collections:
Click Save to register your changes. Please create these product collections as they will be needed going forward.
To add your products to your collections,
The last step in our backend setup is to allow access to our backend by editing user roles and permissions. This is done to enable our frontend to access our backend without the need for a token.
To do this,
By setting the find
and findone
permissions, a user will make GET requests for each collection type from any medium without the server asking for authorization.
The backend setup for this part of our tutorial series is complete. You can now add products and categories to the backend. In the next part of this tutorial series, we will start implementing our frontend and create a layout for our eCommerce website. Make sure to add plenty of products to your backend before moving to the next part of the tutorial series.