Sometime ago, I was thinking about my internet habit and, more specifically, what I really like when I'm reading stuff. Here’s what I usually do: I run a query, and then I just let myself be guided by the most interesting links. I always find myself reading blog posts about someone’s experience that is entirely unrelated to the query I initially typed.
Blogging is an excellent way to let share experiences, beliefs, or testimonials. And Strapi is useful at helping you create your blog! So, I am pretty sure that you now understand what this post is about. Let’s learn how to create a blog with your favorite tech, Strapi.
Goal
If you are familiar with our blog, you must have seen that we've released a series of tutorials on how to make blogs using Strapi with a lot of frontend frameworks:
The goal here in this article is to be able to create a blog website using Strapi as the backend, Nuxt for the frontend, and Apollo for requesting the Strapi API with GraphQL.
Click here to access the source code on GitHub.
Prerequisites
To follow this tutorial, you'll need to have latest version of Strapi and Nuxt installed on your computer, but don't worry, we are going to install these together!
You'll also need to install Node.js v14 and that's all.
Step 1: Backend Setup
Since the beta.9, we have an awesome package, create strapi-app, that allows you to create a Strapi project in seconds without needing to install Strapi globally so let's try it out.
- Create a blog-strapi folder and get inside!
mkdir blog-strapi
cd blog-strapi
- Create your Strapi backend folder using the blog template; copy and paste the following command line in your terminal:
yarn create strapi-app backend --quickstart --no-run
This single command line will create all you need for your backend. Make sure to add the --no-run flag as it will prevent your app from automatically starting the server because
SPOILER ALERT: we need to install some awesome Strapi plugins first.
Now that you know that we need to install some plugins to enhance your app, let's install one of our most popular—the GraphQL plugin:
cd backend
yarn strapi install graphql
yarn develop
Open your Strapi dev server at http://localhost:1337.
Once the installation is complete, you can finally start your Strapi dev server and create your first admin user. That's the one that has all the rights in your application, so please make sure to enter a proper password; (password123) is really not safe.
Nice! Now that Strapi is ready, you are going to create your Nuxt application.
Step 2: Frontend Setup
Well, the easiest part has been completed, let's get our hands dirty developing our blog!
- Create a Nuxt project by running the following command inside
./blog-strapi:
yarn create nuxt-app frontend
Note: The terminal will prompt for some details about your project. As they are not really relevant to our blog, you can ignore them. I strongly advise you to read the documentation, though. So go ahead, enjoy yourself, and press enter all the way!
Again, once the installation is over, you can start your front-end app to make sure everything is ok.
cd frontend
yarn dev
- Open your Nuxt.js dev server at http://localhost:3000/
As you might want people to read your blog or to make it "cute & pretty", we will use a popular CSS framework for styling: UIkit and Apollo GraphQL to query Strapi with GraphQL.
Step 3: Query Strapi with GraphQL
Make sure you are in the frontend folder before running the following commands.
- Install all the necessary dependencies for Apollo by running the following command:
// Ctrl + C to close Nuxt.js process
yarn add @nuxtjs/apollo
Apollo Client is a fully-featured caching GraphQL client with integrations for Vue, React, and more. It allows you to easily build UI components that fetch data via GraphQL.
- Add
@nuxtjs/apolloto the modules section with Apollo configuration in./frontend/nuxt.config.js
// nuxt.config.js
export default {
modules: [
'@nuxtjs/apollo',
],
apollo: {
clientConfigs: {
default: {
httpEndpoint: process.env.BACKEND_URL || "http://localhost:1337/graphql",
}
}
},
}
We'll also need to use an env variable for our Strapi base url, add a new env section at the end of nuxt.config.js file:
// nuxt.config.js
export default {
env: {
strapiBaseUri: process.env.API_URL || "http://localhost:1337"
},
}
Great! Apollo is ready now. 🚀
Step 4: Styling with UIkit
- Install UIkit by running the following command:
yarn add uikit
Now you need to initialize UIkit's JS in your Nuxt application. You are going to do this by creating a new plugin.
- Create a
./frontend/plugins/uikit.jsfile and copy/paste the following code:
import Vue from 'vue'
import UIkit from 'uikit/dist/js/uikit-core'
import Icons from 'uikit/dist/js/uikit-icons'
UIkit.use(Icons)
UIkit.container = '#__nuxt'
Vue.prototype.$uikit = UIkit
Add the following sections to your `nuxt.config.js` file:
// nuxt.config.js
export default {
css: [
'uikit/dist/css/uikit.min.css',
'@assets/css/main.css'
],
plugins: [
{ src: '~/plugins/uikit.js', ssr: false }
]
}
As you can see, you are including both UIkit and `main.css` files! We just need to create the `./frontend/assets/css/main.css` file.
a {
text-decoration: none;
}
h1 {
font-family: Staatliches;
font-size: 120px;
}
#category {
font-family: Staatliches;
font-weight: 500;
}
#title {
letter-spacing: .4px;
font-size: 22px;
font-size: 1.375rem;
line-height: 1.13636;
}
#banner {
margin: 20px;
height: 800px;
}
#editor {
font-size: 16px;
font-size: 1rem;
line-height: 1.75;
}
.uk-navbar-container {
background: #fff !important;
font-family: Staatliches;
}
img:hover {
opacity: 1;
transition: opacity 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
}
**Note:** You don't need to understand what's in this file. It's just some styling ;)
Let's add a beautiful font [Staatliches](https://fonts.google.com/specimen/Staatliches) to the project! Add the following code to your `link` section in your `nuxt.config.js`
// nuxt.config.js
export default {
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Staatliches' }
],
}
Perfect! Run yarn dev to restart your server and be prepared to get impressed by the front page of your application!
Awesome! It's time to structure our code a little bit.
Step 5: Designing the Data Structure
Finally, we are now going to create the data structure of our articles by creating an Article content type.
- Dive in your Strapi admin panel and click on the “Content-Type Builder”
- Click on “Create new collection type”
Now you'll be asked to create all the fields for your content-type
Create the following ones:
Field Text “title”
FieldRich Text “content”
Field Media “image”, single image
Press Save! Here you go, your “Article” content type has been created.
You may want to create your first article, but we have one thing to do before that: Grant access to the article content type.
- Click on Settings then Roles and click on the “Public” role
Awesome! You should be ready to create your first article right now and fetch it on the GraphQL Playground.
Now, create your first article ! Here's an example:
Great! Now you may want to reach the moment when you can actually fetch your articles through the API! Go to http://localhost:1337/api/articles Isn't that cool!
You can also play with the GraphQL Playground.
You may want to assign a category to your articles (news, trends, opinion). You are going to do this by creating another content type in Strapi.
Create a “Category” content type with the following field
- Field Text “name”
Press save!
Create a new field in the Article content type which is a Relation Category has many Articles like below:
Again, open Settings then Roles and click on the “Public” role, then check the category find and findone routes and save.
Now you'll be able to select a category for your article in the right sidebox.
Now that we are good with Strapi, let's work on the frontend part!
Step 6: Create the Layout of the Application
You can change the default layout of the Nuxt.js application by creating your own layouts/default.vue file.
<template>
<div>
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href="#modal-full" uk-toggle
><span uk-icon="icon: table"></span
></a>
</li>
<li>
<a href="/">Strapi Blog </a>
</li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li v-for="category in categories.data" :key="category.id">
<NuxtLink
:to="{ name: 'categories-id', params: { id: category.id } }"
>{{ category.attributes.name }}
</NuxtLink>
</li>
</ul>
</div>
</nav>
<div id="modal-full" class="uk-modal-full" uk-modal>
<div class="uk-modal-dialog">
<button
class="uk-modal-close-full uk-close-large"
type="button"
uk-close
></button>
<div
class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle"
uk-grid
>
<div
class="uk-background-cover"
style="
background-image: url('https://images.unsplash.com/photo-1493612276216-ee3925520721?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3308&q=80 3308w');
"
uk-height-viewport
></div>
<div class="uk-padding-large">
<h1 style="font-family: Staatliches">Strapi blog</h1>
<div class="uk-width-1-2@s">
<ul class="uk-nav-primary uk-nav-parent-icon" uk-nav>
<li v-for="category in categories.data" :key="category.id">
<NuxtLink
class="uk-modal-close"
:to="{ name: 'categories-id', params: { id: category.id } }"
>{{ category.attributes.name }}
</NuxtLink>
</li>
</ul>
</div>
<p class="uk-text-light">Built with strapi</p>
</div>
</div>
</div>
</div>
<Nuxt />
</div>
</template>
<script>
export default {
data() {
return {
categories: {
data: [],
},
};
},
};
</script>
As you can see, categories list is empty. In fact, you want to be able to list every category in your navbar. To do this, we need to fetch them with Apollo, let's write the query!
- Create a
apollo/queries/categoryfolder and acategories.gqlfile inside with the following code:
query {
categories {
data {
id
attributes {
name
}
}
}
}
- Replace the
scripttag in yourdefault.vuefile by the following code:
<script>
import categoriesQuery from "~/apollo/queries/category/categories";
export default {
data() {
return {
categories: {
data: [],
},
};
},
apollo: {
categories: {
prefetch: true,
query: categoriesQuery,
},
},
};
</script>
Note: The current code is not suited to display a lot of categories as you may encounter a UI issue.
Since this blog post is supposed to be short, I will let you improve the code to maybe add a lazy load or something. For now, the links are not working, you'll work on it later on the tutorial :)
Step 7: Create the Articles Component
This component will display all your articles on different pages, so listing them through a component is not a bad idea.
- Create a
components/Articles.vuefile containing the following:
<template>
<div>
<div class="uk-child-width-1-2" uk-grid>
<div>
<router-link
v-for="article in leftArticles"
:to="{ name: 'articles-id', params: { id: article.id } }"
class="uk-link-reset"
:key="article.id"
>
<div class="uk-card uk-card-muted">
<div v-if="article.attributes.image.data" class="uk-card-media-top">
<img
:src="api_url + article.attributes.image.data.attributes.url"
alt=""
height="100"
/>
</div>
<div class="uk-card-body">
<p
id="category"
v-if="article.attributes.category.data"
class="uk-text-uppercase"
>
{{ article.attributes.category.data.attributes.name }}
</p>
<p id="title" class="uk-text-large">
{{ article.attributes.title }}
</p>
</div>
</div>
</router-link>
</div>
<div>
<div class="uk-child-width-1-2@m uk-grid-match" uk-grid>
<router-link
v-for="article in rightArticles"
:to="{ name: 'articles-id', params: { id: article.id } }"
class="uk-link-reset"
:key="article.id"
>
<div class="uk-card uk-card-muted">
<div
v-if="article.attributes.image.data"
class="uk-card-media-top"
>
<img
:src="api_url + article.attributes.image.data.attributes.url"
alt=""
height="100"
/>
</div>
<div class="uk-card-body">
<p
id="category"
v-if="article.attributes.category.data"
class="uk-text-uppercase"
>
{{ article.attributes.category.data.attributes.name }}
</p>
<p id="title" class="uk-text-large">
{{ article.attributes.title }}
</p>
</div>
</div>
</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
api_url: process.env.strapiBaseUri,
};
},
props: {
articles: Object,
},
computed: {
leftArticlesCount() {
return Math.ceil(this.articles.data.length / 5);
},
leftArticles() {
return this.articles.data.slice(0, this.leftArticlesCount);
},
rightArticles() {
return this.articles.data.slice(
this.leftArticlesCount,
this.articles.length
);
},
},
};
</script>
As you can see, you are fetching articles thanks to a GraphQl query, let's write it!
- Create a new
apollo/queries/article/articles.gqlfile containing the following:
query {
articles {
data {
id
attributes {
title
content
image {
data {
attributes {
url
}
}
}
category {
data {
attributes {
name
}
}
}
}
}
}
}
Awesome! Now, you can create your main page.
Step 8: Index Page
You want to list every article on your index page, let's use our new component! Update the code in your pages/index.vue file with:
<template>
<div>
<div class="uk-section">
<div class="uk-container uk-container-large">
<h1>Strapi blog</h1>
<Articles :articles="articles"></Articles>
</div>
</div>
</div>
</template>
<script>
import articlesQuery from "~/apollo/queries/article/articles";
import Articles from "~/components/Articles";
export default {
data() {
return {
articles: {
data: [],
},
};
},
components: {
Articles,
},
apollo: {
articles: {
prefetch: true,
query: articlesQuery,
},
},
};
</script>
Great! You have now reached the moment when you can actually fetch your articles through the GraphQL API!
You can see that if you click on the article, there is nothing. Let's create the article page together!
Step 9: Create Article Page
- Create a
pages/articlesfolder and a new_id.vuefile inside containing the following:
<template>
<div>
<div
v-if="article.data.attributes.image.data"
id="banner"
class="uk-height-small uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light uk-padding"
:data-src="api_url + article.data.attributes.image.data.attributes.url"
uk-img
>
<h1>{{ article.data.attributes.title }}</h1>
</div>
<div class="uk-section">
<div class="uk-container uk-container-small">
<div v-if="article.data.attributes.content" id="editor">
{{ article.data.attributes.content }}
</div>
<p v-if="article.data.publishedAt">
{{ article.data.attributes.publishedAt }}
</p>
</div>
</div>
</div>
</template>
<script>
import articleQuery from "~/apollo/queries/article/article";
export default {
data() {
return {
article: {
data: [],
},
api_url: process.env.strapiBaseUri,
};
},
apollo: {
article: {
prefetch: true,
query: articleQuery,
variables() {
return { id: parseInt(this.$route.params.id) };
},
},
},
};
</script>
Here you are fetching just one article, let's write the query behind it! Create a apollo/queries/article/article.gql containing the following:
query Articles($id: ID!) {
article(id: $id) {
data {
id
attributes {
title
content
image {
data {
attributes {
url
}
}
}
publishedAt
}
}
}
}
Alright, you may want to display your content as Markdown
- Install
markdownitwithyarn add @nuxtjs/markdownit - Install
date-fnswithyarn add @nuxtjs/date-fns - Add it to your modules inside your
nuxt.config.jsfile and add the markdownit object configuration just under// nuxt.config.js.
export default {
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
'@nuxtjs/date-fns',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'@nuxtjs/apollo',
'@nuxtjs/markdownit'
],
// [optional] markdownit options
// See https://github.com/markdown-it/markdown-it
markdownit: {
preset: 'default',
linkify: true,
breaks: true,
injected: true
}
}
-
Use it to display your content inside your
_id.vuefile by replacing the line responsible for displaying the content.// pages/articles/_id.vue
Step 10: Categories
Let's create a page for each category now! Create a pages/categories folder and a _id.vue file inside containing the following:
<template>
<div>
<client-only>
<div class="uk-section">
<div class="uk-container uk-container-large">
<h1>{{ category.data.attributes.name }}</h1>
<Articles :articles="category.data.attributes.articles"></Articles>
</div>
</div>
</client-only>
</div>
</template>
<script>
import articlesQuery from "~/apollo/queries/article/articles-categories";
import Articles from "~/components/Articles";
export default {
data() {
return {
category: {
data: [],
},
};
},
components: {
Articles,
},
apollo: {
category: {
prefetch: true,
query: articlesQuery,
variables() {
return { id: parseInt(this.$route.params.id) };
},
},
},
};
</script>
And don't forget the query! Create a apollo/queries/article/articles-categories.gql containing the following:
query Category($id: ID!){
category(id: $id) {
data {
attributes {
name
articles {
id
data {
attributes {
title
content
image {
data {
attributes {
url
}
}
}
category {
data {
attributes {
name
}
}
}
}
}
}
}
}
}
}
Awesome! You can now navigate through categories :)
Conclusion
Huge congrats, you successfully achieved this tutorial. I hope you enjoyed it!
Click here to access the source code on GitHub.
Still hungry?
Feel free to add additional features, adapt this project to your own needs, and give your feedback in the comments section.
If you want to deploy your application, check the documentation.
Top comments (0)