Content management systems (CMS) are a useful and popular tool for creating web pages, blogs, and online stores. [WordPress](https://strapi.io/wordpress-alternative) in particular powers about [42.5 percent of all websites](https://w3techs.com/technologies/details/cm-wordpress), including CSS-Tricks. If you like the ease of CMS but are looking for a faster, more efficient solution, Strapi is perfect. [Strapi](https://strapi.io/) is a JavaScript-based headless CMS. In a headless CMS, the content is decoupled from the presentation. In other words, an API serves up your content to be consumed by a separate head, or frontend. This is different from traditional CMSes, which are sometimes referred to as “monolithic” because the content and presentation are combined. ## Why Decouple Content from Presentation? So why would you want to decouple content from the presentation? There are many reasons. First, writers can focus on writing, and developers can focus on developing. With a traditional CMS, the developer is bound by the constraints of that particular CMS. For example, WordPress themes need to be constructed in a very specific manner using PHP. With a headless CMS, writers still have access to post content using a familiar portal, and developers are free to use whatever technology they want to create the frontend. Second, your site will benefit from enhanced security. With a headless CMS, the content publishing platform cannot be accessed from the database, which translates to less possibility of DDoS attacks. Finally, using a headless CMS allows you to manage content for multiple channels. Your content is being served up as pure data and is not bound to any particular UI structure. That means you have the flexibility to easily display it in different ways. [CSS-Tricks](https://css-tricks.com/) is a great resource for developers, but it’s built using WordPress. Using this tutorial, you’ll create a basic CSS-Tricks clone using Strapi as your CMS and [Next.js](https://strapi.io/integrations/nextjs-cms) for the frontend. ## Planning the Content Model A content model represents the pieces of your site and how they fit together. If you’ve ever created a database model, this should be a very familiar concept. For example, in a blog, your content model will consist of several content types, e.g. posts, writers, and tags. Each of these content types contains attributes. For example, the `posts` content type might contain attributes like a title, the text of the post, the author’s name, tags, and a featured image. Some of these attributes are actually links between different content types. The author of a post, for example, is a separate content type, and the link between the author type and the post type is one of the things described by the content model. One author can be connected to many articles. Structurally, CSS-Tricks is basically a blog. We can look at the CSS-Tricks website to get an idea of what our content model should look like and what the content types should be. ![Front page of CSS-Tricks](https://i.imgur.com/ckdiBOY.png) You can see from the navbar that there are several categories of content: articles, videos, almanac, newsletter, guides, and books. Today, you will be focusing on articles, the most visible category on the site. If you look at a single article, you will find that it includes some obvious attributes that can be described like this: - Author (a reference to the Author type) - Date - Title - Content - Tags (a reference to the Tags type) - Featured photo Clicking on the author of the article will bring up their page, which will give you an idea of what kind of data the Author type must include: - Name - Photo - Twitter handle - Website - Bio - Articles (a reference to the Articles type detailed above.) - Finally, many articles have tags. The tag type should include the following: - Tag name - Articles (a reference to the Articles type) ## Building the Backend Data Structure To create this CSS-Tricks clone, you’ll start from the backend and work your way forward. Starting a new Strapi project is incredibly easy. 1. Create a directory to hold your app. You can call it something like "strapi-css-tricks”, then `cd` into that directory. 2. Create your Strapi project using the `create-strapi-app` command: `npx create-strapi-app backend --quickstart`. Your basic file structure for this app will be a `backend` folder for the Strapi app, and a `frontend` folder for the Next.js app. 3. A local server will automatically startup. Navigate to `[localhost:1337/admin](http://localhost:1337/admin)` to create an administrator account. **Create Collection Types** Now you can create your collection types. You’ll start with the **Articles** type. In the admin panel, go to *Plugins* *> Content-Types Builder*. Under **Collection Types**, click **Create new collection type**. In the popup, type *article* under **Display Name**, then hit **Continue**. This will bring up options for fields. Start by clicking **Text**. Type *title* in the **name** field. Click **Add another field**. Repeat this pattern for all of the fields associated with the Articles type, making sure to choose the correct type for each field as in the screenshot below: ![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639483631779_image.png) As you saw above, the author and tags fields are links (called *relations*) to other content types. This is similar to a foreign key in SQL databases. You can’t add those relations until you have the Author and Tag content types, so save your work, and make those next. Back under **Collection Types**, click **Create new collection type** again and go through the steps to create the **Author** type. Use the image below to see what fields to add. ![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639482973889_image.png) The **articles** field is a relation to the Article type. Make sure to select **Author has many Articles**. This describes the relationship between authors and articles. ![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639483029513_image.png) Finally, create the **Tag** type using the same steps as you used for the other content types. Tags only have two fields: tagname and articles, which is a relation to the Articles type. ![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639483287658_image.png) Articles can have many tags, and tags can be associated with many articles, so make sure that when you create the relation between the two types, you choose **Tags has and belongs to many Articles**. ![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639483684702_image.png) **Set Permissions** Next, you’ll need to set permissions on your app. In the admin panel, go to *General* *> Settings > Users & Permissions Plugin* *> Roles > Public*. In order for the API to be accessible to users, you will need to check the boxes for **find** and **findone** on each content type in the application. Do this and then hit **Save**. You can verify that this worked by testing it out using [Postman](https://www.postman.com/). Send a GET request to `[localhost:1337/authors](http://localhost:1337/authors)`. If you’ve set the permissions correctly, you will get a JSON object of authors in the response. ## Building the Frontend As you know, the beauty of a headless CMS lies in the flexibility to choose how you create the frontend. In this case, you will be using Next.js. To get started, navigate into your project folder, then use `npx create-next-app frontend` to create your Next.js app. Start your app with `npm run dev` (while keeping your Strapi backend server running.) Your frontend will be on `[localhost:3000](http://localhost:3000)` while the server runs on `[localhost:1337](http://localhost:1337)`. **Structuring the Next.js App** At a basic level, your app needs a header and the ability to display cards representing articles. You can create a basic Header component and display it on all pages using `_app.js`. Update the `pages/_app.js` file by adding the following code to it: import '../styles/globals.css'; import Header from '../components/Header'; function MyApp({ Component, pageProps }) { return ( <>

); } export default MyApp; Now create an `ArticleCa``rd.js` component file in the `frontend/components` directory to display data about the articles that you will get from the Strapi backend. Below, you can see one way to construct this component. import Link from 'next/link'; const ArticleCard = ({ article }) => { const date = new Date(article.date).toDateString(); return (

{article.tags.data.map((tag, i) => ( {tag.attributes.tagname} ))}

{article.title}

{article.brief}

{article.author.data.attributes.name} {' '} on {date}

); }; export default ArticleCard; On the main page (`index.js`), you will be connecting to the Strapi API and mapping the article objects to ArticleCard components. **Connecting to the Strapi API** To fetch articles from the backend, you will simply send a `GET` request to the `articles` endpoint on the server. You can do this in a `getServerSideProps` function: import ArticleCard from '../components/ArticleCard'; const qs = require('qs'); export default function Home({ articles }) { return (

{articles.map((article, i) => ( ))}

); } export async function getServerSideProps() { const query = qs.stringify({ populate: [ 'tags', 'author', 'author.photo', 'photo' ], }, { encodeValuesOnly: true, }); const response = await fetch(`http://localhost:1337/api/articles?${query}`); const articles = await response.json(); return { props: { articles: articles.data, }, }; } The [Strapi docs](https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/content-api.html#api-endpoints) have a great explanation for how to access your API from different endpoints. There are automatically created endpoints for all types of CRUD operations. As can be seen, we are populating some fields, this is because the media and relational fields are not loaded by default. So we need to define the ones we need by populating them. If you look closer at the code for the [ArticleCard component](https://github.com/chyke007/strapi-css-tricks/blob/master/frontend/components/ArticleCard.js), you can see a couple examples of how data from the Strapi API is accessed.

{article.tags.data.map((tag, i) => ( {tag.attributes.tagname} ))} In the code above, the array of tags associated with the article object is mapped over to create those tags on the page.

{article.author.data.attributes.name} {' '} on {date}

This code uses the article object to access its associated author, then hits that author’s endpoint to retrieve their photo and name. You can see this in action below: ![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639500295617_image.png) **Styling Your App** The layout of CSS-Tricks is pretty standard for a blog, but there are lots of neat little touches that make it look more polished. The wavy gradient background is done with a [clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path), but you can also use [Figma](https://www.figma.com/) to create a wavy gradient image and place it over the grey background. The header is partially transparent with an inset `box-shadow`, as seen in the CSS below: header { position: relative; z-index: 2; display: flex; padding: 1rem; margin: 0; color: #fff; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 -2px 5px rgb(0 0 0 / 33%); } Finally, the ArticleCards are simple cards displayed using CSS Grid. .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2em; margin: 2em; } .article { background: #fff; color: #474747; border-radius: 8px; position: relative; z-index: 1; overflow: hidden; -webkit-filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.24)); filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.24)); display: flex; flex-direction: column; } You can see the finished product below: ![](https://paper-attachments.dropbox.com/s_C01981784E9504DC8ECE10487CD22CE7831A125E9060482F349FEC76CBFA7F39_1639498712989_image.png) ## **Conclusion** As you can see, it’s easy to get started with Strapi. Strapi plus [Next.js](https://strapi.io/integrations/nextjs-cms) is an excellent alternative to [WordPress](https://strapi.io/wordpress-alternative). You just created a good start to a CSS-Tricks clone, but there are lots of other features that could be added. For more practice and to get a better look at the code, [fork and clone the repo on GitHub](https://github.com/chyke007/strapi-css-tricks)!

Veronica Stork

Creating a Recipe Book with Strapi

Join our Newsletter