Simply copy and paste the following command line in your terminal to create your first Strapi project.

Get Started

Eleventy, (also written as 11ty) - tagged the simpler static site generator is anti-framework and does exactly what it says it does; generate static sites. Static sites are slowly becoming the standard for deploying content driven web applications. 

Eleventy, thought not a popular choice (at the moment) comes with not only the smaller bundle size it is known for but a wealth of templating languages that give developers the flexibility to build with what they like. It supports templating languages like `.njk`, `.html`, `.md`, `.11ty.js` ,`.liquid`, `.hbs`, `.ejs`, `.haml` and `.pug` to mention a few. In my [Top 10 Static Site Generators in 2020](https://strapi.io/blog/top-10-static-site-generators-in-2020) article, I described the tools ability to decouple your web pages from your content to make any future migrations easier just in case you decide to use something else later, yay for data ownership. It’s worth pointing out that Eleventy is not a JavaScript framework—that means zero boilerplate client-side JavaScript.

> Recently, Zach Leatherman, the creator of Eleventy shared [Vue template support](https://www.netlify.com/blog/2020/09/18/eleventy-and-vue-a-match-made-to-power-netlify.com/?utm_source=twitter&utm_medium=eleventy-vue-pnh&utm_campaign=devex) for Eleventy. 

For context, in this tutorial, you will build a static blog with Eleventy and Strapi. You will also learn how to create a content model in Strapi that can be used for a blog, consume data via the Strapi GraphQL API and use that data to generate a static blog with Eleventy.

## Prerequisites
- An LTS version of [Node.js](https://nodejs.org/en/download/)
- Either [Yarn](https://yarnpkg.com/getting-started/install) or [npm](https://www.npmjs.com/get-npm)
- Basic knowledge of JavaScript

Great so now that we have an idea of what Eleventy is and what it can do, let’s get started with building our blog. I want to start out with the Strapi part, defining our content model first will help us define how our blog consumes data. So let's get started!

- [Demo](https://11ty-x-strapi.netlify.app/)
- [GitHub Repo](https://github.com/malgamves/11ty-x-strapi)

## Your Strapi Backend

### 1. Installing Strapi and creating a new project 

Open your terminal.
- Run `yarn create strapi-app backend --quickstart` - this creates a new folder called **backend** and builds the admin UI.

### 2. Create an Administrator user 

Navigate to [http://localhost:1337/admin](http://localhost:1337/admin).
- Complete the form to create the first **Administrator** user.
- Click **Ready to start**
### 3. Create an Article Collection Type 

- Navigate to **Content-Types Builder** under **Plugins** in the left-hand menu.
- Click the **"+ Create new collection type"** link
- Name it *article* and click **continue**
- Add a **Text field** (short text) and name it *title*
- Click the **"+ Add another field" ** button
- Add a **Rich Text field** and name it *content*
- Click the** "+ Add another field"** button
- Add a **Date field** (date) and name it *published_at*
- Click the** "+ Add another field"** button
- Add a **Text field** (short text) and name it *author*
- Click the** "+ Add another field"** button
- Add a **Text field **(short text) and name it *slug*
- Click the **"Finish"** button
- Click the **Save** button and wait for Strapi to restart

These fields will store our article content

![image4](https://api-prod.strapi.io/uploads/image4_932adb6ad4.png)

### 4. Add content to the Article Collection Type 

Navigate to **Article** under **Collection Types** in the left-hand menu.
- Click **“Add new Article”**
- Fill in this information in the fields specified :

        **title**: *The Boy Who Cried Wolf*
        **content**: *Don’t be him, please.. just don’t.*
        **author**: *Daniel Phiri*
        **published_at**: *pick a date of your choice*
        **slug**: *the-boy-who-cried-wolf*
- Click **Save**

Before making requests, you need to make your collection type accessible by tweaking its permissions.

### 5. Set Roles and Permissions 

> In Strapi v3.1.6 (the latest as of writing) the Roles and Permissions have been moved to settings. Here are more details on the [release notes](https://github.com/strapi/strapi/releases/tag/v3.1.5).

Navigate to **Settings** under **General** in the left-hand menu. On the Settings page, navigate to **Roles** under the **User and Permissions Plugin.**
- Click the **Public ** Role
- Scroll down under Permissions, find **Articles**
- Tick the boxes next to **find** and **findone**
- Click **Save**

![ezgif.com-optimize](https://api-prod.strapi.io/uploads/ezgif.com-optimize_f68ab6758d.gif)

You have a collection type, you’ve added some content to it, you’ve set up permissions, let’s send requests to your API? Yes!

### 6. Send requests to the Collection Types API 

Navigate to [http://localhost:1337/articles](http://localhost:1337/articles) to query your data.

If everything went on smoothly, you should get back some JSON data containing the content you just added. For this tutorial, however, you will be using Strapi's GraphQL API.

To enable it, navigate to **./backend**
- Run `cd backend` to change directories
- Run `yarn strapi install graphql` to install the GraphQL plugin

*or*

Navigate to **Marketplace** under **General** in the left-hand menu.
- Click** Download** on the GraphQL card
- Wait for Strapi to restart.

When you have the GraphQL plugin up and running, you can test queries in your GraphQL Playground. That is all for your backend. Now to our Eleventy frontend? Yes

## Your 11ty Frontend


To get started, in your root folder install Eleventy globally by running `yarn global add @11ty/eleventy`. Now that we’ve got this out the way we’ll go ahead and use the official Eleventy blog starter. 


- Run `git clone https://github.com/11ty/eleventy-base-blog.git frontend` in your project folder, to clone the repo.
- Run `cd frontend` to change directories
- Run `yarn install` to install project dependencies 
- Run `yarn serve` to generate our static files and start the project server

Great! Now we should have our project running on localhost and your web page should look like this.

![image2](https://api-prod.strapi.io/uploads/image2_1b392684c8.png)

We have a basic version of our application running. Let’s talk about how Eleventy works. In our **./frontend** folder, we have a couple folders and files and do a lot to make Eleventy work the way it does. Let’s highlight a few. 

**.eleventy.js** - this file is at the root of your folder and helps you configure your project.
**_sites** - this folder stores all your statically generated files. It appears after building your project
**_includes** - this folder stores your default layout templates.
**_data** - this folder helps us store data from sources outside Eleventy i.e. JSON files and APIs

I’ve mentioned templates quite a bit already. What are they? My definition; templates are moulds that help us add structure to something. Eleventy does this with it’s templating languages. In this tutorial we are using Nunjucks (the .njk files you see). These template files are what we use to create a mould that our content can fit in. Think of a glass and water, water is our content and the glass is our template. Together they make a glass of water and anyone can drink that. The water is what’s important, the glass is just a tool. With eleventy, we can add our content (water) to different templates (glasses, jars, cups) and this way we have the freedom to use our content wherever we need to without having too much reliance on what’s being used to display this content.

Let’s have a practical example. The About us page on the website is powered by content in **./frontend/about/index.md**. In the file, we define our `layout` i.e **./frontend/_includes/layouts/post.njk** which acts as our template. In the post.njk file we have section `{{ content | safe }}` which will populate the page with content from a child layout which in our case is **index.md**.  


Great now we can get to building out our blogs section.

Now that we understand the concept of populating data into templates, let’s do exactly that with Strapi.

In the **./_data** folder, create a file called **blogposts.js** and paste the following code into it. 

```javascript
const fetch = require("node-fetch");

// function to get blogposts
async function getAllBlogposts() {
  // max number of records to fetch per query
  const recordsPerQuery = 100;

  // number of records to skip (start at 0)
  let recordsToSkip = 0;

  let makeNewQuery = true;

  let blogposts = [];

  // make queries until makeNewQuery is set to false
  while (makeNewQuery) {
    try {
      // initiate fetch
      const data = await fetch("<your Strapi GraphQL Endpoint>", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({
          query: `{
              articles {
              id
              title
              content
              published_at
              author
              slug
            }
          }`,
        }),
      });

      // store the JSON response when promise resolves
      const response = await data.json();

      // handle CMS errors
      if (response.errors) {
        let errors = response.errors;
        errors.map((error) => {
          console.log(error.message);
        });
        throw new Error("Houston... We have a CMS problem");
      }

      // update blogpost array with the data from the JSON response
      blogposts = blogposts.concat(response.data.articles);

      // prepare for next query
      recordsToSkip += recordsPerQuery;

      // stop querying if we are getting back less than the records we fetch per query
      if (response.data.articles.length < recordsPerQuery) {
        makeNewQuery = false;
      }
    } catch (error) {
      throw new Error(error);
    }
  }

  // format blogposts objects
  const blogpostsFormatted = blogposts.map((item) => {
    return {
      id: item.id,
      title: item.title,
      slug: item.slug,
      body: item.content,
      author: item.author,
      date: item.published_at       
    };
  });

  // return formatted blogposts
  return blogpostsFormatted;
}

// export for 11ty
module.exports = getAllBlogposts;

```
This file queries a Strapi GraphQL API, and maps the response data to a constant - `blogpostsFormatted`. We’ll now be able to use this data from our API which in our case is Strapi to populate a Nunjuck template. Before anything, let's build out those templates. 

In **./frontend** create a folder called **blogs**. In that folder, create a file called **list.njk** and paste in the following code.

```
---
layout: layouts/home.njk
templateClass: tmpl-post
eleventyNavigation:
  key: Blog
  order: 4
pagination:
  data: blogposts
  size: 12
permalink: blog{% if pagination.pageNumber > 0 %}/page{{ pagination.pageNumber + 1}}{% endif %}/index.html
---

{% include "postslist.njk" %}
{% set htmlTitle = item.title %}

{% block content %}
  <h2>Unfiltered, raw and probably full of typos</h2>

  {# loop through paginated item #}
  {% for item in pagination.items %}
    {% if loop.first %}<ul>{% endif %}
      <li>
        <h2><a href="/blog/{{ item.slug }}">{{ item.title }} </a></h2>
        <p>by {{ item.author }}  </p>
        <br>
      </li>
    {% if loop.last %}</ul>{% endif %}
  {% endfor %}

  {# pagination #}
  {% if pagination.hrefs | length > 0 %}
  <ul>
    {% if pagination.previousPageHref %}
      <li><a href="{{ pagination.previousPageHref }}">Previous page</a></li>
    {% endif %}
    {% if pagination.nextPageHref %}
      <li><a href="{{ pagination.nextPageHref }}">Next page</a></li>
    {% endif %}
  </ul>
  {% endif %}

{% endblock %}
```

At the top of our file in our [front matter](https://www.11ty.dev/docs/data-frontmatter/), we define a couple properties for our file. This is where we use the 11ty [pagination functionaliy](https://www.11ty.dev/docs/pagination/#paginate-a-global-or-local-data-file) to first initialise data we can use in our template. This then enables us to loop our our response data from **blogposts.js**  using `pagination.items` in the main section of our file.  We also include our page layout using `{% include "postslist.njk" %}` a define a pagnination solution for when our blog gets busy.

Now we have to create a template for individual blog posts, in **./frontend/blogs** create a file called **entry.njk** and paste the following code. 
```
---
layout: layouts/home.njk
templateClass: tmpl-post
pagination:
  data: blogposts
  size: 1
  alias: blogpost
permalink: blog/{{ blogpost.slug }}/index.html
---
{% include "postslist.njk" %}
{% set htmlTitle = blogpost.title %}

{% block content %}
  {# blogpost #}

  <h1>{{ blogpost.title }}</h1>
{{ blogpost.body | safe }}

{% endblock %}
```
Just like we did for the **list.njk**, we define properties in our front matter. The `permalink` is super important here. Because of the way we structure it. We will have a unique permalink created for each blog post we enter into Strapi. The blog posts corresponding title and content will them be displayed in the main section of our file. 

Having created two templates and added the blogpost data from the **blogposts.js** file, when we run `yarn serve` to generate the static files and start our server the data from our API will 1. Create a page that shows all blog posts from Strapi and 2. Create individual pages for each post in Strapi for our reading please :p 

You'll notice a few other files and folders that we didn't touch, you can safely delete **archive.njk** after which  your site should look something like this when your server restarts. 

![screen11tyshot](https://api-prod.strapi.io/uploads/screen11tyshot_1ff7ce4c71.png)

## Conclusion

That was fun! We went through building a blog content model with Strapi, enabling the Strapi GraphQL API, setting up an Eleventy project, understanding templates and Eleventy internals and adding an external data source. Hopefully this gives you a glimpse of how to work with both Eleventy and Strapi. You can now go on to build what your heart desires. I can't wait to see it. Share your projects with us in our [Community Slack](https://slack.strapi.io/) or [tweet at me](https://twitter.com/malgamves), I'll be sure to respond. Till next time!

### Resources
> [Consuming a headless CMS GraphQL API with Eleventy](https://www.webstoemp.com/blog/headless-cms-graphql-api-eleventy/)

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

image1

The Product section covers our releases, feature reviews and more. 

Product

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

The latest Strapi-related news and major events happening for Strapi – including announcements, remote-work, organization and tips on running a start-up. 

Company

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

Bootstrap a simple blog application using Nuxt.js and Strapi, the most suitable headless CMS for Nuxt.js

strapi-starter-nuxt-blog_ada58ebbf8_upd.png

Strapi Starter Nuxt Blog

Having a portfolio website to showcase your work is a great way to move your career forward. This starter helps you build yours, and manage all of its content in Strapi.

global

Strapi-Gridsome Starter for a Portfolio Website

This is a step-by-step guide on how to implement Strapi-based authentication in a Nuxt.js app.

Strapi Nuxy Auth upd.png

Strapi Authentication in Nuxt.js

# Strapi Starter Nuxt Blog

Nuxt starter for creating a blog with Strapi.

![screenshot image](https://github.com/strapi/strapi-starter-nuxt-blog/raw/master/screenshot.png)

This [starter](https://github.com/strapi/strapi-starter-nuxt-blog) allows you to try Strapi with Nuxt with the example of a simple blog. It is fully customizable and due to the fact that it is open source, fully open to contributions. So do not hesitate to add new features and report bugs!

## Features

- 2 Content types: Article, Category
- 2 Created articles
- 3 Created categories
- Permissions set to `true` for article and category
- Responsive design using UIkit

Pages:

- "/" display every articles
- "/article/:id" display one article
- "/category/:id" display articles depending on the category

### Getting Started
​
The easiest way to try this starter is to use the `create-strapi-starter` CLI.
​
```bash
# Using Yarn
yarn create strapi-starter my-project nuxt-blog
​
# Using NPM
npx create-strapi-starter my-project nuxt-blog
```
​
The CLI will create the monororepo, `my-project` , with a `frontend` folder for your Nuxt application and a `backend` folder for your Strapi application.  It will install all dependencies and launch the development servers automatically. 
​
The Next server will be running here => [http://localhost:3000](http://localhost:3000/)
​
The Strapi server will be running here => [http://localhost:1337](http://localhost:1337)
​
Enjoy this starter!

---

Get started with Strapi by creating a project using a [starter](https://strapi.io/starters) or trying our [live demo](https://strapi.io/demo). Also, consult our [forum](https://forum.strapi.io) 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>
</p>
See you soon!

Developers, designers, writers... The Strapi community is full of creative profiles. We built this starter to help them promote their work, and to celebrate their talent. We wanted to make it easier than ever for them to build a portfolio with Strapi.

Having a portfolio has almost become a requirement for freelancers. But it's also useful for everyone. It's a great way to demonstrate your expertise, to build your personal brand, or just to get feedback on your work. Your portfolio will also become especially useful when you start looking for a new job.

It's important to have an easy way to keep your portfolio up to date. An outdated portfolio is not a good look. Instead, you want to make sure that everyone knows about your latest creations. Strapi is perfect for this. Just log into the admin, add a new entry, and your site is live. No code required!

After setting up Strapi, we chose to built this starter with [Gridsome](https://gridsome.org/), a Vue.js framework to build static websites. If you're familiar with [Gatsby](https://www.gatsbyjs.com/), you'll feel right at home using Gridsome. Just like Gatbsy, it has a GraphQL data layer, a strong plugin ecosystem, and it powers super fast websites. Gridsome has been growing quickly in the Vue community, so we could not ignore it any longer.

This starter is also a great way to start learning Strapi. You'll get to know about collection types, single types, components and dynamic zones, all within the same app. On the frontend, you'll also learn how to fetch data using GraphQL, and how to style your app with [Tailwind CSS](https://tailwindcss.com/).

You'll find all the starter's documentation on its [**GitHub repository**](https://github.com/strapi/strapi-starter-gridsome-portfolio). Or you can watch the video tutorial on YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/4g3Pzj-wdXo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

We can't wait to see what you can build with this starter. Let us know on [Twitter](https://twitter.com/strapijs)!