Having a blog to write and share our knowledge on the internet is essential for visibility and making us known in our field as an authority on a subject. This article will teach you how to build a blog that has dynamic pages for each article. Table of Contents Prerequisites Getting Started What is Nuxt? What is Nuxt Content? What is Cloudinary? Creating a Blog with Nuxt Creating the Blog Notes Fetching the Posts Creating Dynamic Pages Final Thoughts Learn More To follow along, view the codebase and its repo on and the for reference. GitHub demo Prerequisites The following are required to complete this tutorial: Cloudinary account. is free Sign up Basic knowledge of JavaScript Familiarity with Vue Getting Started To get started, open up the terminal and run the command: npx create-nuxt-app blog-for-developers The command above will kick off a command-line interface (CLI) prompt that will allow us to configure various aspects of our project. Now that the boilerplate is set up with all the files and folders, let’s run the development server which is accessible on inside the project. http://localhost:3000 # change directory to project folder cd blog-for-developers # start the development environment npm run dev NuxtJS is an open-source intuitive Vue framework that allows us to build user interfaces, making web development simple and powerful. What is Nuxt? During the initial setup of this project, we selected the Nuxt content module. This module lets us use our codebase as a Git-based headless CMS to access markdown, JSON, YAML, XML, and even CSV files through an API-like interface. With this module , it will inject the instance globally in our project to access it anywhere in a project. What is Nuxt Content? @nuxt/content $content Cloudinary is a cloud-service image and video management tool for web and mobile applications. With Cloudinary, we can upload, create, and manage digital experiences across any browser and device. What is Cloudinary? Creating a Blog with Nuxt Before we create the content for the blog in markdown using Nuxt content, let’s first create the landing page for the blog that will include the navigation links and some text. In the , we can add our favorite font to the head section and use a particular font family as seen below: Add Font Style nuxt.config.js file The above code block will have no effect on the page until we write the CSS that will use the font. Now, add the following code to the which will include the navigation links and some text on the home page. Remove the component, . pages/index.vue <Tutorial /> <template> <section class =" showcase "> < header > < h2 class =" logo "> < nuxt - link to ="/"> ecosurf </ nuxt - link > </ h2 > < nav class =" nav desktop "> < ul > < li class =" nav__list "> < nuxt - link to ="/ blogs "> Stories </ nuxt - link > </ li > </ ul > </ nav > </ header > < video autoplay loop muted src =" https: // res . cloudinary . com / terieyenike / video / upload / v1651393236 / mixkit - tropical - island - landscape - view - 4692 - large_yanvml . mp4 "></ video > < div class =" overlay "></ div > < div class =" text "> < h2 data - type =" uppercase " class =" stroke "> Never Stop </ h2 > < h3 data - type =" uppercase "> Exploring The World </ h3 > < p > View of the tropical island landscape, from a hill with houses, palm trees and many trees, and in the distance the hills that surround the sea, on a sunny day . </ p > </ div > < ul class =" social "> < li > < a href =" https: // twitter . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img alt =" twitter profile " src =" https: // i . ibb . co / Wnxq2Nq / twitter . png "/></ a > </ li > < li > < a href =" https: // instagram . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img alt =" instagram profile " src =" https: // i . ibb . co / ySwtH4B / instagram . png "/></ a > </ li > </ ul > </ section > </ template > In the above code block, we included a with the source of the video stored in Cloudinary with attributes such as autoplay, loop, and muted that mute the video when it loads. To obtain the media stored in Cloudinary, we upload our desired video to the media library tab. Thereafter, copy the URL which will be attached to the of the . <video> src <video> Also, we referenced the links in the navigation header with the component to both the home and the routes which we will create to view all our blogs. To make sure our page is styled with CSS, create a folder at the root of the project, , and include the following from this . In the file, update the file to include the created CSS file with the following: nuxt-link / /blogs assets/styles/main.css gist nuxt.config.js ... ...
 } export default { css : [ '@/assets/styles/main.css' ], Here is what our page should look like: Creating the Blog Notes To build our blog site, we need to have content to display and render on the page. First, create a directory and then the blog directory that will contain all the markdown files. Writing all the content in markdown supports a lot of the markdown syntax standards such as the headings, links, and code blocks with syntax highlighting for different programming languages. PS: The Nuxt content utilizes the content folder to store all the files. Here’s an example of a markdown file in the content directory. Add the following to the file . /blogs content content/blogs/egghead.md title: Egghead author: Teri Eyenike
    description: All we need to do is open up our terminal and run the command npm install @nuxt/content. Once it's installed, you'll see that inside of our package.json, we see our Nuxt Content module. Next, to finalize the setup, let's go ahead and open up our nuxt.config.js, and let's go ahead and scroll down to the section that's labeled Modules.
    date: May 2, 2021
    publishOn: 2021-05-02T00:00:00
    tags: ["learning", "platform"]
 --- --- cover _image: https://res.cloudinary.com/terieyenike/image/upload/v1651446130/pexels-jeremy-bishop-8241100_ oklfpe.jpg [ Egghead ]( https://www.egghead.io ) is a great platform for developers to enhance their skills!  Markdown files have the ability to add metadata using the concept of front matter which is denoted with the triple-dash syntax at the start and stop of the front matter. The metadata, is what is displayed to readers like the time of publication and excerpt of the blog content, is what is displayed to readers. Other various properties can be included. PS: Inside of the front matter, it uses the YAML syntax. To fetch the posts for the blog page, let’s create a new route under . Create a folder, called blogs, and in there create file for the directory, blogs. Next, copy and add the following code to the file to display the rendered markdown files. Fetching the Posts pages index.vue pages/blogs/index.vue <template> </template> // pages/blogs/index.vue < main > < header > < h2 class = "logo" > < nuxt-link to = "/" > ecosurf </ nuxt-link > </ h2 > < nav class = "nav desktop" > < ul > < li class = "nav__list" > < nuxt-link to = "/blogs" > Stories </ nuxt-link > </ li > </ ul > </ nav > </ header > < div class = "container section" > < div class = "container__grid" > < div v-for = "blog in blogs" :key = "blog.slug + blog.createdAt" class = "card" > < img :src = "blog.cover_image" alt = "blog photographs" /> < div class = "pad__card" > < div class = "author" > < p class = "author__name" > {{ blog.author }} </ p > < span > | </ span > < p > {{ blog.date }} </ p > </ div > < h2 class = "title" > {{ blog.title }} </ h2 > < p > {{ blog.description.substring(0, 150) }}... </ p > < button > < nuxt-link :to = "`/blogs/${blog.slug}`" > Read More </ nuxt-link > </ button > </ div > </ div > </ div > </ div > </ main > < script > export default { async asyncData ( {$content} ) { const blogs = await $content( "blogs" ).sortBy( "publishOn" , "desc" ).fetch() return { blogs } }, head ( ) { return { title : "Read interesting stories as a nomad" , meta : [ { hid : 'description' , name : 'description' , content : 'Daily and juicy content as you learn, work, and relax. WFH' } ] } } } </ script > < style scoped > header { background : #111111 ; position : unset; } .container { width : 85% ; max-width : 75rem ; margin -inline: auto; } .section { padding : 3em 0 ; } .container__grid { display : grid; gap: 2em ; grid-template- columns : repeat (auto-fit, minmax ( 19rem , 1 fr)); } .card { background : #f0f7f4 ; box-shadow : 0px 4px 3px rgba ( 0 , 0 , 0 , 0.1 ); border-radius : 5px ; } .card img { object-fit : cover; border-top-left-radius : 5px ; border-top-right-radius : 5px ; width : 100% } .pad__card { padding : 2em ; } .author { display : flex; align-items : center; } .author , .title { margin-bottom : 1em ; } .author span { margin : 0 0.3em ; } .author__name { text-transform : capitalize; } button { border : unset; padding : 1em 2em ; margin-top : 2em ; background : #0D5159 ; font-weight : 700 ; cursor : pointer; } button a { color : #fff ; } </ style > The code block above does the following: : used to generate our page from Nuxt as it generates individual files statically to users. We pass in the method where the blog notes are stored, the function, and the method. asyncData $content sortBy() fetch : takes two parameters, (sort it by date) and the desc attributes on how you want the content to appear based on the most recent content published sortBy() publishOn To make each blog article dynamic, we will assign it to a URL, where it’s the blog slug on the Read more button using the component. /blogs/ <nuxt-link> The last step for viewing the snippet of the rendered posts from the content directory is to use the v-for directive and loop over the blogs and render each article in a card. Rendering the posts Here is what the blog page should look like now: Creating Dynamic Pages Now let’s create pages for each blog post to have dynamic URL routes. In Nuxt, to create dynamic pages, we append an underscore before the .vue file name so as not to make the URL hardcoded. We then create the file under the blogs directory and add the following code: _slug.vue <template> </template> // pages/blogs/_slug.vue < main > < header > < h2 class = "logo" > < nuxt-link to = "/" > ecosurf </ nuxt-link > </ h2 > < nav class = "nav desktop" > < ul > < li class = "nav__list" > < nuxt-link to = "/blogs" > Stories </ nuxt-link > </ li > </ ul > </ nav > </ header > < div class = "container" > < div class = "return" > < nuxt-link to = "/" > < img alt = "back to home" src = "/home.png" /> </ nuxt-link > < span > / </ span > < nuxt-link to = "/blogs" > Blog </ nuxt-link > < span > / </ span > < p > {{ note.title.substring(0, 15) }}... </ p > </ div > < section > < h1 > {{ note.title }} </ h1 > < nuxt-content :document = "note" cla /> </ section > </ div > </ main > < script > export default { async asyncData ( {$content, route} ) { const note = await $content( `blogs/ ${route.params.slug} ` ).fetch() return { note } } } </ script > < style scoped > header { background : #111111 ; position : unset; } .container { width : 85% ; max-width : 75rem ; margin -inline: auto; } section { padding-bottom : 2em ; } .return { display : flex; margin : 1.5em 0 ; } .return img { width : 20px ; height : 20px ; } .return span { margin : 0 1em ; } h1 { margin-bottom : 1em } </ style > This block of code does the following: : We use the content to fetch a specific file from the directory blogs using the route parameter and the slug which will map to our actual file name ${route.params.slug} To render the markdown as actual content defined in the markdown file, we use the nuxt-content component and pass the prop of the with the entire object document note : Defining the scoped to the style element make sure that the styling only applies to a specific page scoped Final Thoughts The creation of a blog is great when you want to share your thoughts with a wider audience and Nuxt has provided us with a way to do so in this article. There are still other features we can still explore to make sure we have a robust blog website. Learn More Nuxt content Nuxt documentation Try out the live demo

Dash

Fetch

Instagram

NuxtJS

Target

Twitter

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Build Your Own Blog with Nuxt, Nuxt Content, and Cloudinary

How to Build Your Own Blog with Nuxt, Nuxt Content, and Cloudinary

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Coin Mentioned

Teri

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

How to Build Your Own Blog with Nuxt, Nuxt Content, and Cloudinary

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Coin Mentioned

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES