Headless CMS

Definitions & benefits

Tools & Concepts

Open source

Features

Authentication

Custom plugins & Marketplace

Webhooks

Multilingual CMS

APIs

Dynamic Zones

User roles & permissions

Content Modeling

Security & Privacy

Use Cases

Ecommerce

Blog

Forum

About Strapi

Life at Strapi

Releases & Roadmap

Events

Community

News

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

How tos

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

When building a website for a customer or yourself, you’d normally want to make your public content accessible via a human readable slug in your URLs. This will help for search engine optimization (SEO) and is easier for your users to understand. Thankfully, with Strapi’s headless CMS, you can easily make your content accessible in this way.

## The Evolution of Strapi

In version 3 of Strapi, to build a slug system for your Strapi content, there are [a few steps you need to do manually with code in order to generate slugs automatically for your Strapi app.](https://www.solmediaco.com/blog/how-to-fetch-items-by-slug-with-strapi-nuxt-and-graphql) You can also see [a quick overview of building a slug system in the Strapi v3 docs.](https://docs-v3.strapi.io/developer-docs/latest/guides/slug.html#create-a-slug-system) Now, in v4 of Strapi, things are much easier when it comes to generating slugs for your website content.

**Strapi v4 Makes Generating Slugs Easy**

![Ooh yeah](http://media.giphy.com/media/WJjLyXCVvro2I/giphy.gif)


In version 4 of Strapi, Strapi ships with a new field type, **UID**. This is for generating a unique identifier to use on your frontend. 

What is super about this feature is that you can use another field within your content type to generate the unique identifier for you. For instance, if you write a blog with a title, “Create a slug system in Strapi v4,” a slug will be generated for you, such as “create-a-slug-system-in-strapi-v4”. Now, you don’t need to mess with code to get a slug system built out of the box!

<iframe width="560" height="315" src="https://www.youtube.com/embed/NqQOOG_IGOo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>



## Prerequisites

Before you get started, you should have some knowledge of Strapi and the Strapi Admin Panel. If you don’t, I would encourage you to [check out the Strapi docs on how to get started](https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html).

**If you want to follow along, here are some things you will need:**

1. Node.JS on your machine. [Download Node here](https://nodejs.org/en/download/).
2. A Strapi instance up and running in development mode.

## Steps to Generating Slugs Automatically in Strapi v4:

Below I’ll outline a few steps to generating slugs for your content in Strapi v4.

**Go to the Content-Types Builder.**
In development mode, go to the Content-Types builder in the Strapi Admin panel.

![The content types builder can be accessed on the left nav menu of the Strapi Admin panel.](https://paper-attachments.dropbox.com/s_37E037DF755DF2E9E543835BABA5FF7AB055CE52E807B16D5CF4833AF9DDF2F4_1643828152030_Go+to+the+content+type+builder.png)


**Create a new Content Type.**
Select the option to create a new collection type.

![Select the option to create a new collection type.](https://paper-attachments.dropbox.com/s_37E037DF755DF2E9E543835BABA5FF7AB055CE52E807B16D5CF4833AF9DDF2F4_1643828247761_select+create+a+new+collection+type.png)


**Name your collection:**

![Give your collection a name.](https://paper-attachments.dropbox.com/s_37E037DF755DF2E9E543835BABA5FF7AB055CE52E807B16D5CF4833AF9DDF2F4_1643828349239_Create+the+collection+type.png)


**Add your title field with a Text field type.**

![Add fields to your collection type.](https://paper-attachments.dropbox.com/s_37E037DF755DF2E9E543835BABA5FF7AB055CE52E807B16D5CF4833AF9DDF2F4_1643828375580_Select+text+for+the+title+attribute.png)

![Create the title attribute.](https://paper-attachments.dropbox.com/s_37E037DF755DF2E9E543835BABA5FF7AB055CE52E807B16D5CF4833AF9DDF2F4_1643828397521_Create+the+title+attribute.png)


**Add your slug field.**

![Select UID for the Slug field.](https://paper-attachments.dropbox.com/s_37E037DF755DF2E9E543835BABA5FF7AB055CE52E807B16D5CF4833AF9DDF2F4_1643828421216_Select+UID.png)

![Name your slug field and select which field to generate slugs from.](https://paper-attachments.dropbox.com/s_37E037DF755DF2E9E543835BABA5FF7AB055CE52E807B16D5CF4833AF9DDF2F4_1643828449480_Create+a+field+for+the+slug+and+the+attached+field+to+generate+the+slug+from.png)


**Save your Content Type**

![Save your content type.](https://paper-attachments.dropbox.com/s_37E037DF755DF2E9E543835BABA5FF7AB055CE52E807B16D5CF4833AF9DDF2F4_1643828482166_Go+to+content+manager.png)


**Add a new entry for your new content type.**

![Go to the content manager, find your new content type and create a new entry.](https://paper-attachments.dropbox.com/s_37E037DF755DF2E9E543835BABA5FF7AB055CE52E807B16D5CF4833AF9DDF2F4_1643828539178_Create+a+new+entry.png)


**Add a title, and see your slug generated!**

![Give your content a title and generate your slug!](https://paper-attachments.dropbox.com/s_37E037DF755DF2E9E543835BABA5FF7AB055CE52E807B16D5CF4833AF9DDF2F4_1643828576658_Create+an+entry.png)



## Using Your Slug on the Frontend

The main reason you may want to generate and use slugs is for SEO purposes. Search engines can better understand and rank content with slugs that include title keywords. In order to utilize and get content by slug, you only need to filter your content by slug. 

**An example  REST API request to the /blogs endpoint above is below:**
```
    GET /api/blogs?filters\[Slug\][$eq]=create-a-slug-system-with-strapi-v4
```

**An example GraphQL Query:**

```
    query {
      blogs(filters: { Slug: { eq: "create-a-slug-system-with-strapi-v4" } }) {
        data {
          id
          attributes{
            Title
            Slug
            publishedAt
          }
        }
      }
    }
```

## Conclusion

Now, it is easier than ever to generate slugs with Strapi. You can do it fully within the admin panel using the Content-Type Builder plugin and you don’t need to touch the code. 

Give it a try and install v4 today.
Open up your terminal, cd into a the directory you want your project to live. Then, type the following command.

```bash
    yarn create strapi-app my-project --quickstart
```

medium_LkjdEahQ.jpeg

small_LkjdEahQ.jpeg

thumbnail_LkjdEahQ.jpeg

LkjdEahQ.jpeg

How to Create a Slug System in Strapi v4

Chris has been building applications, setting up servers, designing websites and writing blogs to try to make the world a better place.

*This article is a guest article by the inspiring [**Chris Wray**](https://chriswray.dev/). He’s a full-stack engineer and wrote this blog post through the Write for the Community program.*

<p align="center">
<a href="https://strapi.io/write-for-the-community">
<img src="https://assets.strapi.io/uploads/Join_the_program_498526acbe.svg#small" />
</a>
</p>

A couple of months ago, I was rejected for a job with an awesome company. It was a bummer, but it made me rethink the ways I was marketing myself as a software developer.

In order to better position myself and make a better impression with a future employer, I decided to build my own personal portfolio. Even though I have been doing web design and development for companies through my own company, [Soltech](https://solmediaco.com), for 3 years now, I had never had a portfolio just about my skills and software projects.

When I started [my personal portfolio](https://chriswray.dev) project, a big goal for me was to host my website for less than $10/month.

Thankfully, once I got to the deployment stage, I was able to host my website securely, on great hosting providers, for free!

Here is an overview of how I hosted my website for free.

[![CTT - Hosted Free.png](/uploads/CTT_Hosted_Free_0c30a342b4.png)](https://ctt.ac/9D363)

## Tech Stack

-   [Strapi](https://strapi.io/) for the Backend.
-   [NuxtJs](https://nuxtjs.org/) for the Frontend.
-   [Tailwind CSS](https://tailwindcss.com/) & [Tailwind UI](http://tailwindui.com/) for styling.

## Static Frontend

The first thing that I did was set up my [frontend Nuxt](https://strapi.io/integrations/nuxtjs-cms) application to [build statically.](https://nuxtjs.org/docs/2.x/concepts/static-site-generation)

This is easy to do with Nuxt. All that you need to do is add the static target flag to your nuxt.config.js. This will set up your app so that when you run  "nuxt build", the site will be built statically.

```javascript
// In nuxt.config.js:
export default {
  target: 'static',
  ...
}
```

By building your website statically, pages will be served as HTML for the first request, then via JavaScript without a full page load for pages linked using the [NuxtLink component](https://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxtlink-component) included with Nuxt.

This will also mean that no HTML will be generated on the fly. Everything is built at build time.

## Statically Serve Content from the Strapi API

Another choice I made was to use [the fetch() hook in Nuxt](https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch) to pull in data from the Strapi application from my page components.

This way, data is pulled in at build time via the server and rendered server-side on page loads.

This helps with SEO because search engines can more easily parse the content of pages.

```javascript

<script>
export default {
  scrollToTop: true,
  data() {
    return {
      postPage: {},
      posts: []
    }
  },
  async fetch() {
    this.posts = await this.$axios.$get('/posts')
    this.postPage = await this.$axios.$get('/posts-page')
  },
  ...
}
</script>
```

**Static Content for the Users**

Another reason I did this was so that I could serve all of the content from my Strapi CMS backend statically. I wanted to use Heroku to host the Strapi backend, but the [Heroku servers automatically shut down after a period of inactivity.](https://devcenter.heroku.com/articles/how-heroku-works)

If the content was pulled in on the client, users would have had to wait a long time with a loader before seeing content, making the bounce rate much higher.

Since all of the content is served statically, the Strapi API is only called during deployment, then the server shuts down until the next deployment or when I log in to update content.

This also helps a lot with the costs! Heroku charges per hour of server activity. Since the server is rarely on, costs will stay low or free, even if I start updating my content more often or make more deployments.

## Database Hosted on MongoDB

When I deployed my Strapi application on Heroku the first time, I made a bunch of edits, went away for a few hours, and realized that everything I did was destroyed!

That was because Heroku uses the git repo to rebuild the application, and the SQLite database by default will not work with Heroku.

I set up a [free MongoDB account](https://www.mongodb.com/) for the database. In order to connect to the Database in Strapi, you also need to install the Mongoose database connector. [The Strapi docs are great.](https://strapi.io/documentation/v3.x/deployment/heroku.html)

Also, make sure to set up your database configuration in the config settings of your Heroku account! This was confusing at first, but you need to add the env key and values to the config settings in Heroku before deployment. These settings take the place of your env file that is in development.

You want to make sure never to commit your database configuration to git.

## Images Hosted on Cloudinary

Another thing about Heroku that you need to know is that any images that you store locally will be destroyed along with the SQLite database as soon as the server shuts down.

In my case, I decided to host my website's images on [Cloudinary](https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/tyjytr506ffjmhjfqfui). They have a free account that will work just fine for my uses.  (I think this past month I've only used 2% of the plan!)

## Backend Hosted on Heroku

As I have already stated, the Strapi Application is hosted on Heroku.

It was AMAZING to set up. I also played around with trying to get Microsoft Azure Web Apps to work, but I still have been unable.

[Strapi has great documentation of getting your server set up on Heroku.](https://strapi.io/documentation/v3.x/deployment/heroku.html)

**Zero Downtime Deployments in Heroku**

My website is using the free Heroku plan. There are two instances of the Strapi CMS set up in a [Heroku](https://devcenter.heroku.com/articles/pipelines) [](https://devcenter.heroku.com/articles/pipelines) ["pipeline"](https://devcenter.heroku.com/articles/pipelines) for zero-downtime deployments from my git repo.

Whenever I push a commit to the main branch in GitHub, my development application in Heroku is built. This gives me time to test the Strapi application and changes before releasing them to the production backend.

## Frontend Hosted on Netlify

After using [Netlify](https://www.netlify.com/) for the first time on this application, I have to say I am pleased.

The Netlify team has done a great job of simplifying the deployment process in huge ways.

Like Heroku, there are also config variables that you must add. These are any configs that are in your env file while in development. For me, I am using these to store the API endpoint that Axios uses for API requests. That way my API is mostly out of view from the public and can remain a secret.

You can also create a webhook in Strapi so that when you update or create content in the CMS, [Netlify will automatically rebuild your website](https://chriswray.dev/posts/triggering-a-deploy-in-netlify-automatically-after-updating-content-in-strapi) for you. In Netlify, these are called [](https://docs.netlify.com/configure-builds/build-hooks/) ["build](https://docs.netlify.com/configure-builds/build-hooks/) [hooks"](https://docs.netlify.com/configure-builds/build-hooks/).

## Conclusion

This was a great project for me. Ironically, it was also the first website that I have ever built entirely API-driven, and I loved it! You can read more of [my journey building my personal portfolio](https://dev.to/cwraytech/part-1-a-little-background-664) on DEV.

I can say that [the Strapi documentation](https://strapi.io/documentation/v3.x/getting-started/introduction.html) helped me a ton, so if you struggle with doing this, make sure to look there first!

Also, if you are looking for a software developer to join your team, I would love to chat! [You can view my website here.](https://chriswray.dev)

---

Get started with Strapi by creating a project, using a starter or trying our instant live demo. Also, consult our forum if you have any questions. We will be there to help you.
<p align="center">
<a href="https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html#_1-install-strapi-and-create-a-new-project">
<img src="https://assets.strapi.io/uploads/Get_Started_e4e026ce55.svg#small" />
</a>
<a href="https://strapi.io/starters">
<img src="https://assets.strapi.io/uploads/Starters_9da222d819.svg#small" />
</a>
<a href="https://strapi.io/demo">
<img src="https://assets.strapi.io/uploads/Try_live_demo_af11161cd6.svg#small" />
</a>
<a href="https://forum.strapi.io">
<img src="https://assets.strapi.io/uploads/Forum_3ab5cad74b.svg#small" />
</a>
</p>
See you soon!

In this article, we'll look at how Chris Wray built a modern Strapi powered website using completely free developer tools and services. 